/* 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;
}


#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;}


/*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;
 }



 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: 100%;
		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{

}



.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(0%);
   -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(0%);	
}


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;
}



.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 */


@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 {
		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)
{





}

@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 ++++++++++++ */


/* 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;
}


/* Motto Seite Anfang */

/* Banner-Grundlayout */
.figure-banner {
  width: 100%;
  height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
  margin: 0 0 20px 0;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.5s ease, filter 0.5s ease;
}

/* Titel Overlay */
.banner-title {
  position: absolute;
  bottom: 12px;
  left: 12px;
  margin: 0;
  font-weight: bold;
  padding: 6px 12px;
  background-color: rgba(250, 250, 250, 0.75);
  border-radius: 4px;
  color: #000;
  font-size: 1.2rem;
  line-height: 1.2;
  transition: background-color 0.3s ease;
}

/* Hover-Effekt (nur Desktop) */
@media (hover: hover) and (pointer: fine) {
  .figure-banner:hover {
    transform: scale(1.03);
    filter: brightness(1.1);
  }

  .figure-banner:hover .banner-title {
    background-color: rgba(250, 250, 250, 0.9);
  }
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  .figure-banner { height: 160px; }
  .banner-title { font-size: 1.1rem; padding: 5px 10px; }
}

@media (max-width: 480px) {
  .figure-banner { height: 120px; }
  .banner-title { font-size: 1rem; bottom: 8px; left: 8px; padding: 4px 8px; }
}

/* Motto Seite Ende */

/* Banner "Hintergründe" */
@media (max-width: 600px) {
    .camp-banner img {
        max-height: 200px;
    }
}
/* "Hintergründe" Ende */

/*  Rechter und Linker Rand Start */
/* Variablen */
:root {
  --side-width: 6vw;    /* Breite des gelben Randes */
  --side-color: #ffde13; /* Gelb */
}

/* BODY: gelbe Seiten, weiße Mitte */
body {
  background-color: #ffffff; /* Fallback */
  background-image:
    linear-gradient(to right,
      var(--side-color) 0 calc(var(--side-width)),
      #ffffff calc(var(--side-width)) calc(100% - var(--side-width)),
      var(--side-color) calc(100% - var(--side-width)) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow-x: hidden;
  position: relative;
}

/* Falls dein Theme #container mit gelbem Hintergrund setzt (in deiner Datei vorhanden),
   wird die body-Grafik verdeckt. Überschreibe hier kurz: */
#container {
  background-color: transparent !important;
}

/* Stelle sicher, dass der eigentliche Content über den Deko-Elementen liegt */
#content, #maincontent, .site-content {
  position: relative;
  z-index: 10;
  background-color: #fff; /* falls du weißen Contentbereich willst */
}

/* Pseudo-Elemente erzeugen die Icons auf den Seiten */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--side-width);
  pointer-events: none;
  z-index: 5; /* unter dem Content (z-index 10) */
  background-repeat: no-repeat;
  /* Beispiel: keine Wiederholung. Wenn du einzelne Icons öfter wiederholen willst,
     setze repeat oder multiple-w- / h-werte */
  opacity: 0.95;
}

/* LINKER RAND */
body::before {
  left: 0;
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  width: clamp(20px, 6%, 120px); /* Min: 20px, max: 120px, flexibel dazwischen */
  pointer-events: none;
  overflow: hidden;

  /* Hintergrundbild */
  background-image: url('/wp-content/uploads/2025/09/rand1.png');
  background-color: #ffde13;
  background-size: auto 100%;  /* Höhe passt sich an, Breite proportional */
  background-position: center;
  background-repeat: no-repeat;
}

/* RECHTER RAND */
body::after {
  right: 0;
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  width: clamp(20px, 6%, 120px); /* Gleiche responsive Logik */
  pointer-events: none;
  overflow: hidden;

  /* Hintergrundbild */
  background-image: url('/wp-content/uploads/2025/09/rand2.png');
  background-color: #ffde13;
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Mobile: alles ausblenden (hier <= 1000px) */
@media only screen and (max-width: 1000px) {
  body {
    background-image: none;
    background-color: #ffffff;
  }
  body::before,
  body::after {
    display: none;
    background-image: none;
  }
  /* #container wieder sicher weiß machen */
  #container { background-color: #fff !important; }
}
/*  Rechter und Linker Rand Ende */

/*HEADER LOGO START*/


.custom-logo-link {
	width: 300px;
}

/* ✅ DGB Logo Auf Smartphones ausblenden */
@media (max-width: 1350px) {
  .dgblogo img {
    display: none;
  }
}

.wp-block-site-logo img.custom-logo { 
	display: block; 
	background-color: #ffde13; 
	width: 100%; /* nimmt 100% der Bildschirmbreite ein */ 
	max-width: 300px; /* nicht größer als 300px */ 
	min-width: 60px; /* nicht kleiner als 60px */ 
	height: auto; 
	margin-top: 1.2em; 
	padding-right: 1em; 
	z-index: 100; } 

@media (max-width: 500px) { 
	.wp-block-site-logo img.custom-logo { 
		width: 50vw; /* fast die ganze Breite des kleinen Bildschirms */ 
		max-width: 100px; } 
}

/*HEADER LOGO ENDE*/

/*HEADER START*/
/* Header-Grundstil (überschreibt alte Höhen) */
header {
  width: 100%;
  max-width: 140em;
  position: fixed;
  top: 0;
  z-index: 10;
  margin: 0 auto;
  padding: 1em 1.1em;   /* Standard-Padding */
  text-align: left;
  background-color: #ffde13;
  border-top: 0;
  height: auto;         /* dynamische Höhe */
  min-height: 5em;      /* Mindesthöhe */
}

/* Header für kleine Bildschirme */
@media only screen and (max-width: 650px) {
  header {
    padding: 0.2em 0.5em;  /* weniger Padding oben/unten, links/rechts */
	max-height: 1em;     /* deutlich schmaler */
  }


  /* Top-Items kompakter machen */
  #top_items {
    margin-left: 0.5em;
  }

  /* Hauptinhalt nach unten verschieben, damit Header nicht überlappt */
  #maincontent {
    margin-top: 4em;
  }
}

/*HEADER ENDE*/


/* NAVIGATION ANPASSUNG START */
.wp-block-navigation ul li a {   
  font-weight: bold; 
}

/*@media (max-width: 650px) {
  /* Untermenü standardmäßig ausblenden */
  .wp-block-navigation ul ul {
    display: flex;
    flex-direction: column;
    margin-top: 0.2rem;
  }

  /* Untermenü wird sichtbar, wenn der übergeordnete li Fokus hat */
  .wp-block-navigation ul li:focus-within > ul {
    display: flex;
  }*/

  /* Untermenü-Links etwas eingerückt */
  .wp-block-navigation ul ul li a {
    padding-left: 1rem;
    font-weight: 400;
    font-size: 0.95rem;
  }
}*/



/* NAVIGATION ANPASSUNG ENDE */

/*AUFZÄHLUNGSPUNKTE EINRÜCKEN START*/
ul {
  list-style-position: inside;   /* sorgt dafür, dass die Punkte "innerhalb" des Textblocks stehen */
  padding-left: 4em;            /* verschiebt die Punkte + Text weiter nach rechts */
}
/*AUFZÄHLUNGSPUNKTE EINRÜCKEN ENDE*/


/* HOME h1 ausblenden */
.home .wp-block-post-title {
	display: none;
}

@media (min-width: 1072px) {

.home .entry-content {
margin-top: -4em;
}

}

/* HOME SEITE OVERLAY GRADIENT BILD START */
/* Banner-Grundlayout */
.figure-home {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  position: relative;
  margin: 0 0 20px 0;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.5s ease, filter 0.5s ease;
}

/* Titel Overlay mit schwarzem Verlauf */
.home-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 12px;
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 1.2;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 100%);
  box-sizing: border-box;
  border-radius: 0 0 12px 12px;
  transition: background-color 0.3s ease;
}


/* Responsive Anpassungen */
@media (max-width: 768px) {
  .figure-home { height: 160px; }
  .home-title { font-size: 1.1rem; padding: 10px; }
}

@media (max-width: 480px) {
  .figure-home { height: 120px; }
  .home-title { font-size: 1rem; padding: 8px; }
}

/* HOME SEITE OVERLAY GRADIENT BILD ENDE */



/* INFOVERANSTALTUNG START */

/* Container */
.infoboxen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;               /* kleinerer Abstand für mobile Optik */
  justify-content: center;
  margin: 1.5rem 0;
}

/* Boxen */
.infobox {
  flex: 1 1 120px;           /* flexible Breite – min 120px */
  max-width: 180px;          /* schmaler auch auf kleinen Screens */
  min-height: 60px;
  padding: 0.8rem;
  border-radius: 16px;
  font-weight: 600;
  font-size: 1.2rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.infobox:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* Farben */
.infobox:nth-child(1) { background-color: #e74c3c; }
.infobox:nth-child(2) { background-color: #f39c12; }
.infobox:nth-child(3) { background-color: #f1c40f; }
.infobox:nth-child(4) { background-color: #27ae60; }
.infobox:nth-child(5) { background-color: #2980b9; }
.infobox:nth-child(6) { background-color: #8e44ad; }

/* 📱 Mobile Geräte */
@media (max-width: 700px) {
  .infoboxen {
    flex-direction: row;         /* ✅ weiterhin nebeneinander */
    justify-content: center;
  }

  .infobox {
    flex: 1 1 100px;             /* kleinere Mindestbreite */
    max-width: 140px;            /* Boxen bleiben schmal */
    font-size: 1.1rem;           /* Schrift leicht reduziert */
  }
}

/* INFOVERANSTALTUNG ENDE */

/* ABENDVERANSTALTUNG START */
/* 🟡 PROGRAMM – Container */
.programm {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 2rem 0;
}

/* 🟢 Einzelne Programm-Box */
.programm-box {
  position: relative;
  flex: 1 1 220px;         /* flexible Breite, min. 220px */
  max-width: 280px;        /* kompakter, rechteckiger Look */
  aspect-ratio: 4 / 3;     /* rechteckig, nicht quadratisch */
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.programm-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* 🔵 Überschrift */
.programm-box h3 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.6rem 1rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
}

/* 📱 Responsive Varianten */
@media (max-width: 768px) {
  .programm {
    gap: 0.8rem;
  }

  .programm-box {
    flex: 1 1 45%;        /* zwei pro Reihe */
    max-width: none;
  }

  .programm-box h3 {
    font-size: 1.2rem;
    padding: 0.5rem;
  }
}

@media (max-width: 480px) {
  .programm-box {
    flex: 1 1 100%;       /* untereinander auf kleinen Screens */
  }

  .programm-box h3 {
    font-size: 1.1rem;
  }
}

/* ABENDVERANSTALTUNG ENDE */

/* MAHLZEITEN START */

/* 🟡 Container */
.mahlzeiten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
  margin: 2rem 0;
}

/* 🔶 Standard-Boxen */
.mahlzeit-box {
  flex: 1 1 180px;
  max-width: 230px;
  background-color: #fffef4;      /* sanftes Gelb */
  border: 2px solid #ffde13;
  border-radius: 16px;
  text-align: center;
  padding: 1.2rem 1rem 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mahlzeit-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* 🍳 Icons */
.mahlzeit-icon {
  font-size: 2rem;
  margin-bottom: 0.6rem;
}

/* Überschrift */
.mahlzeit-box h3 {
  margin: 0 0 0.4rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: #222;
}

/* Uhrzeit */
.mahlzeit-box p {
  margin: 0;
  font-size: 1.1rem;
  color: #555;
}

/* 🌙 Freundlicher blauer Stil für Mitternachtssnack */
.mahlzeit-box.mitternacht {
  background-color: #e6f3ff;   /* helles, freundliches Blau */
  border-color: #a3d1ff;       /* zartblauer Rand */
}

.mahlzeit-box.mitternacht .mahlzeit-icon {
  color: #2980b9;              /* kräftiges, aber harmonisches Blau */
}

.mahlzeit-box.mitternacht h3,
.mahlzeit-box.mitternacht p {
  color: #1a1a1a;              /* dunkle Schrift für Kontrast */
}

/* 📱 Mobile Ansicht */
@media (max-width: 700px) {
  .mahlzeiten {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .mahlzeit-box {
    flex: 1 1 45%;      /* zwei pro Zeile */
    max-width: none;
  }
}

@media (max-width: 480px) {
  .mahlzeit-box {
    flex: 1 1 100%;     /* eine pro Zeile */
  }

  .mahlzeit-icon {
    font-size: 1.6rem;
  }

  .mahlzeit-box h3 {
    font-size: 1.2rem;
  }

  .mahlzeit-box p {
    font-size: 1rem;
  }
}

/* MAHLZEITEN ENDE */


/* TAGESABLAU START */

/* 🌞 CAMP-ABLAUF BASIS */
.camp-ablauf {
  position: relative;
  margin: 2rem auto;
  max-width: 900px;
  padding: 0 1rem 0 3rem;
}

/* Vertikale Linie links */
.camp-ablauf::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0rem;
  width: 4px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    #e74c3c,   /* Rot */
    #f39c12,   /* Orange */
    #f1c40f,   /* Gelb */
    #27ae60,   /* Grün */
    #2980b9,   /* Blau */
    #6c5ce7,   /* Indigo */
    #8e44ad    /* Lila */
  );
  border-radius: 2px;
}

/* 🟢 Einzelne Tag-Karten */
.camp-tag {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  margin: 2rem 0 2rem -2rem;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.camp-tag:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

/* Überschrift */
.camp-tag h3 {
  margin: 0 0 0.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: #222;
}

/* Text */
.camp-tag p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #444;
}

/* 🌈 Zarte Regenbogen-Hintergründe */
.tag1 { background: linear-gradient(to right, #ffeaea, #fff); border-left: 5px solid #e74c3c; }  /* Rot */
.tag2 { background: linear-gradient(to right, #fff4e0, #fff); border-left: 5px solid #f39c12; }  /* Orange */
.tag3 { background: linear-gradient(to right, #fff9d6, #fff); border-left: 5px solid #f1c40f; }  /* Gelb */
.tag4 { background: linear-gradient(to right, #e8f8ec, #fff); border-left: 5px solid #27ae60; }  /* Grün */
.tag5 { background: linear-gradient(to right, #e6f3ff, #fff); border-left: 5px solid #2980b9; }  /* Blau */
.tag6 { background: linear-gradient(to right, #eee9ff, #fff); border-left: 5px solid #6c5ce7; }  /* Indigo */
.tag7 { background: linear-gradient(to right, #f4e6ff, #fff); border-left: 5px solid #8e44ad; }  /* Lila */

/* 📱 Mobile Ansicht */
@media (max-width: 700px) {
  .camp-ablauf {
    padding-left: 0rem;
  }

  .camp-ablauf::before {
    left: 0.5rem;
  }

  .camp-tag {
    margin-left: 2rem;
    padding: 1.2rem 1.4rem;
  }

  .camp-tag::before {
    left: -1.3rem;
  }

  .camp-tag h3 {
    font-size: 1.3rem;
  }

  .camp-tag p {
    font-size: 1rem;
  }
}
/* TAGESABLAU ENDE */


/* INFO-BOX KOSTEN /ANMELDUNG START */
/* 💬 Info-Box */
.info-box {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: linear-gradient(135deg, #c6e2ff 0%, #eaf4ff 100%);
  border-left: 6px solid #2980b9;       /* sanfter Blauton */
  padding: 1.2rem 1.4rem;
  border-radius: 18px;
  font-size: 1.05rem;
  color: #222;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  max-width: 700px;
  margin: 2rem 0;                       /* nur Abstand oben/unten, nicht zentriert */
  text-align: left;                     /* alles linksbündig */
}

/* 💶 Icon */
.info-icon {
  font-size: 2rem;
  flex-shrink: 0;
  color: #2980b9;
  line-height: 1;
  margin-top: 0.1rem;
}

/* Textbereich */
.info-content {
  flex: 1;
}

.info-content h3 {
  margin: 0 0 0.3rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1b4f72;
  text-align: left;
}

.info-content p {
  margin: 0;
  line-height: 1.6;
  text-align: left;
}

/* 📱 Mobilfreundlich */
@media (max-width: 600px) {
  .info-box {
    flex-direction: row;     /* bleibt nebeneinander */
    align-items: flex-start;
  }

  .info-icon {
    font-size: 1.8rem;
    margin-top: 0.2rem;
  }
}

/* 🔴 Rote Hinweis-Box */
.info-box.info-red {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: linear-gradient(135deg, #ffe0e0 0%, #fff5f5 100%);
  border-left: 6px solid #e74c3c;
  padding: 1.2rem 1.4rem;
  border-radius: 18px;
  font-size: 1.05rem;
  color: #222;
  box-shadow: 0 4px 10px rgba(231, 76, 60, 0.1);
  max-width: 700px;
  /* ⬇️ Jetzt wirklich linksbündig */
  margin: 2rem 0; 
  text-align: left;
  justify-content: flex-start;
}

/* ⚠️ Icon */
.info-box.info-red .info-icon {
  font-size: 2rem;
  flex-shrink: 0;
  color: #c0392b;
  line-height: 1;
  margin-top: 0.1rem;
}

/* Textbereich */
.info-box.info-red .info-content {
  flex: 1;
}

.info-box.info-red h3 {
  margin: 0 0 0.3rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: #7b1812;
}

.info-box.info-red p {
  margin: 0;
  line-height: 1.6;
}


/* 📱 Mobilfreundlich */
@media (max-width: 600px) {
  .info-box.info-red {
    flex-direction: row;
    align-items: flex-start;
  }

  .info-box.info-red .info-icon {
    font-size: 1.8rem;
    margin-top: 0.2rem;
  }
}
/* INFO-BOX KOSTEN/ANMELDUNG ENDE */

/* TEAM-SEITEN ANPASSUNG START */
.links {
  margin-top: 370px; /* vergrößere den Wert für mehr Abstand */
}

figure.kachel.rechts {
  transform: translate(120px, 10px) rotate(-7deg); /* leicht nach rechts gedreht */
  transition: all 0.4s ease; /* weiche Bewegung bei Hover */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* sanfter Schatten */
  border-radius: 10px; /* optional: abgerundete Ecken */
}

figure.kachel.rechts:hover {
  transform: translate(120px, 10px) rotate(0deg) scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* 📱 Für Bildschirme unter 768px (Smartphones) */
@media (max-width: 768px) {
  figure.kachel.rechts {
    transform: translate(40px, 10px) rotate(-5deg);
  }
}




/* 📱 Auf Touch-Geräten (kleine Screens) Hover-Effekt deaktivieren */
@media (hover: none) and (pointer: coarse) {
  figure.kachel.rechts:hover {
    transform: translate(40px, 10px) rotate(-5deg); /* gleich wie Normalzustand mobil */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }
}
/* TEAM-SEITEN ANPASSUNG ENDE */

.flyer-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
}

.flyer-image {
  width: 200px;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.flyer-link:hover .flyer-image {
  transform: scale(1.05);
  box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
}

/* 🟡 Flyer-Download-Box nach rechts verschoben */
.flyer-download-box {
  display: inline-block;
  background-color: #fffef4;        /* sanftes Gelb */
  border: 2px solid #ffde13;        /* goldgelber Rahmen */
  border-radius: 12px;
  text-align: center;
  padding: 0.8rem 1.2rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  margin-top: 20px;
  margin-left: 100px;                /* verschiebt Box nach rechts */
  max-width: 280px;                 /* etwas schmaler */
}

.flyer-download-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.flyer-download-link {
  color: #c40000;                   /* kräftiges Rot */
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.flyer-download-link:hover {
  text-decoration: underline;
}

/* 📱 Mobile Darstellung */
@media (max-width: 600px) {
  .flyer-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .flyer-image {
    width: 100%;
    max-width: 350px;
  }

  .flyer-download-box {
    width: 100%;
    max-width: 100%;
    margin-left: 0;                  /* auf Mobil linksbündig */
  }
}






/* === Fix: Logo-Darstellung Firefox + Safari angleichen === */
header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: fixed !important;
  top: 0;
  width: 100%;
  height: 8em;
  background-color: #ffde13;
  border-top: 1.2rem solid #fff;
  z-index: 10;
}

#logo {
  flex: 0 0 auto;
}

#logo img {
  height: 4.5em !important;  /* feste Höhe sorgt für gleiches Rendering */
  width: auto !important;
  max-width: none !important;
  margin: 0.5em 1em !important;
  display: block !important;
}

#logos {
  width: 10em !important;
  height: auto !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  position: relative !important;
}

/* ANMELDEOPTIONEN START*/

.anmeldung-kacheln {
  display: flex;
  gap: 1.5rem;
  margin: 2rem 0 3rem;
  flex-wrap: wrap;
}

/* Grundbox */
.anmeldung-kachel {
  flex: 1 1 320px;
  border-radius: 22px;
  padding: 1.8rem 2rem;
}

/* 🌼 Aktuelle Teilnehmer* – helles Gelb */
.anmeldung-kachel.aktuell {
  background: linear-gradient(135deg, #fff8d6 0%, #fffdf2 100%);
}

/* 💙 Ehemalige Teilnehmer* – helles Blau */
.anmeldung-kachel.ehemalig {
  background: linear-gradient(135deg, #eaf4ff 0%, #f7fbff 100%);
}

.anmeldung-kachel h3 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.anmeldung-kachel ul {
  margin: 0;
  padding-left: 1.2rem;
}

.anmeldung-kachel li {
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

.anmeldung-kachel a {
  color: #c0392b;
  font-weight: 600;
  text-decoration: none;
}

.anmeldung-kachel a:hover {
  text-decoration: underline;
}

/* 📱 Mobil */
@media (max-width: 700px) {
  .anmeldung-kacheln {
    flex-direction: column;
  }
}

/* ANMELDEOPTIONEN ENDE */