html {background-color: #ccc; font: normal 100% Arial, Helvetica, sans-serif; }
body{ margin:0;  max-width:1160px; background: #fff;}
h1, h2, h3, h4 {color: #006; line-height:1.2;}
h1 {font-weight:normal; font-size:1.5rem; line-height:1.2; margin-top:0;}
a {color: #000066; }
/*a:hover {color: #ff6633; }*/
img {max-width:100%;}
figure{margin:0; }

/*#site-header >* { border: 1px solid blue;} */
#site-header {display:-webkit-box;display:-ms-flexbox;display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -webkit-box-align:center; -ms-flex-align:center; align-items:center;  border-bottom:1px solid #ddd; padding: 4px 8px 4px 12px; margin-bottom:.25rem; }
#site-header figure {line-height:0;}
#site-header #logo  {-webkit-box-flex:0;-ms-flex:0 200px;flex:0 200px; }
#site-header #logo img {}
#site-header form { }
#site-header form input[type=text] {min-width: 200px; margin: 0 2px;}
#site-header a.spc {color:red; font-size:.8rem; font-weight:normal;}
#site-header a { font-size:.8rem; font-weight:normal;}


/*nav neu mit checkboxen */
nav { background:#ffeedd;}
nav ul, #sitemap ul   {list-style-type: none; margin: 0; padding: 0;}
nav ul#navl a { color: #ff3300; text-decoration: none; display: block; padding: 4px 12px; border-bottom: 1px solid #fff;}
nav input[type="checkbox"]+label {display:block; border-bottom: 1px solid #fff; background-color: #ffcc88; padding: 4px 12px;}

.navpfad {margin-top: .25rem;}

footer {margin-top: auto;}
.footer{ background: #ffcc88; color:red; padding:.5rem 0; text-align: center; }
footer a {text-decoration:none; color:red;}
footer a:hover {text-decoration:underline;}

aside { margin: 0 .5rem;   -webkit-box-flex:1;   -ms-flex:1;   flex:1;}
aside section, aside div {background: #fff; padding-bottom:.5rem;}
.card1 { color:#006;   }
.card1 h4 {font: bold .875rem Verdana, sans-serif; color: #fff; background:#66aadd; padding: .875rem 1.5rem; margin:0;}
.card1 p {margin-top:.25rem; font-size:.875rem;}

main {font-size: .9375rem; line-height:1.4; padding:0 1rem;} 
main table {max-width:100%; }
main h2, main h3 {font-size:17px;} /* h2,h3 außerhalb von article */
main article {font-size:.875rem; padding-bottom:.5rem; }
main article h2 { font-size:19.5px; font-weight:normal; margin: .5rem 0;}
main article h3 {font-size:inherit; margin-bottom: .5rem;}
main article p {margin-top:0; margin-bottom: .5rem;}
main article p +h2 {margin-top:1rem;}


#main.ktl article h2 {font-size:17px; margin-bottom: 0;}
#main.ktl article h2 +p {color:#006;font-size:12px;}
#main.ktl article strong , #main.ktl article a.spc {color:red; font-weight:normal;}
#main.ktl section, #main.ktl section article {font-size:14px; }
#main section h2 {font-size:1rem; margin-top: 1rem;}
#main section article h3 {font-size:16px; font-weight:normal; margin:0 0 .5rem;}

article a:last-of-type {white-space:nowrap;}
article h3 a img{display:block; width:100%;} /* Vorsicht */
article p +h4 {margin:0; line-height:1.5; font-weight:500;}
.page-links {color:#006; line-height:1.7;}
.page-links a + a{padding-left: 1.5rem; }

figure.sm {border:1px solid #06c; font-size:13px; border-radius:2px;}
figure.sm h4 {display:flex; justify-content:space-between; border-bottom: 1px solid #06c; padding:.25rem; margin-bottom:.5rem; margin:0; font-size:13px;}
figure.sm h4 img {flex: 0 0 33px; width:33px; margin:0; align-self:center; }
figure.sm a {display:block;  margin: .75rem .5rem;}

.thumbs img {height:93px; padding:1px;}
.fliesstext, .linx6 {font-size:small; padding-bottom: .5rem;}
.tipp {color: red; letter-spacing: 1px; text-transform: uppercase;}

strong.spc {color:red;font-size:small;}
.lsp {letter-spacing:1px;}
hr {background: #999; height: 1px; border: none; margin-bottom:1.5rem;}
.bc {display:block; font-family: verdana, sans-serif;}


/* altes css */
#main.cp header h1 { margin-top:1rem;}
#main.cp header h1 span {  white-space: nowrap; }
#main.cp header strong {font-size:.8125rem; padding-bottom:5px; color: #185e93;}
#main.cp header + img { display:block; padding-bottom:1rem;}
#main.cp .bes {font-size:inherit; color:#006; font-weight: normal;}
#main.cp section h2 {font-size:17px; font-weight: 300; margin-top: 2rem; line-height:1.3; }
#main.cp section h3 {margin-bottom: 0; }
#main.cp section article small {color:#006; }
#main.cp section article small b {font-size:10px; }

div#main article {display:block; border-bottom: 1px solid #999; margin: 12px 0; overflow: hidden;}
div#main article p {margin:0 0 .5rem;}

div#main article h2 a, div#main article h3 a {text-decoration: none;}
.clear {clear:both;}

#main.ktl article h2 {font-size:17px; margin-bottom: 0; }
#main.ktl article h2 +h3 {font-size:12px; font-weight:normal; margin: 5px 0; }
#main.ktl article h3, #main.ktl article h3 a {font-size:17px; margin-bottom: 0; font-weight:normal;}
#main.ktl article h3+p {color:#006;font-size:12px; margin-top: 0; }
#main.ktl article > a {text-decoration:none;}
#main.ktl article a h3:hover {color:red;}


div#main article, div#main article .galerie { position:relative;}
div#main article .galerie img{ position:absolute; left: 0; opacity: 0; -webkit-transition: 1s opacity; -o-transition: 1s opacity; transition: 1s opacity; }
div#main article .galerie img.show{ opacity: 1; -webkit-transition: 1s opacity; -o-transition: 1s opacity; transition: 1s opacity; position: static;}
div#main article .galerie .prev, div#main article .galerie .next {position:absolute; bottom:0; color:#fff; background-color: rgba(0,0,0,.5); padding:3px; cursor:pointer; }
div#main article .galerie .next { right:0;  }
div#main article .galerie .prev { left:0;  }
div#main article .galerie .prev:hover, div#main article .galerie .next:hover {background-color: rgba(0,0,0,.9);}
div#main article .galerie { width:100%; height:220px;}
div#main article .galerie img{width:100%;height:220px;}

.more { display: none; }
#toggle+label::before { content: '\2193\a0mehr'; }
#toggle {position: absolute; clip: rect(0,0,0,0); }
#toggle:checked ~ .more { display: block; }
#toggle:checked +label::before { content: '\2191\a0weniger'; }
label.link {color:blue; cursor:pointer;}

#main .inline ul { list-style-type: none; margin-top:.5rem; padding: 0; }
#main .inline li { padding:0 4.5rem 0 0; margin-top:.4rem; }
#main .inlinemo ul { list-style-type: none; margin-top:0.5rem; padding: 0; }
#main .inlinemo li a { display: inline-block; padding:0 ; margin-top:.8rem; margin-bottom: 0.1rem }
.flex-container { display: -webkit-box; display: -ms-flexbox; display: flex; }
.flex-container ul { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.flex-container, .flex-container h3 { font-size: 13px; }
/* ende altes css */

#main.cp .header { margin:1rem 0; }
#main.cp .header strong {display:inline-block; font-size:.8125rem; padding-bottom:5px; color: #185e93;}
#main.cp .header h1 span { white-space: nowrap;}
aside.cp .info {font-size:13px; }
aside.cp .info strong {color:#185e93;}
aside.cp  {background:#fff;}
aside.cp .fotos img {max-width:160px;}

p.rechts {text-align:right; letter-spacing:1px; margin-bottom:2.5rem;}
p.rechts:last-of-type{margin-bottom:1rem;}
u.titel {font-weight:600;}
.bullets em {font-style:normal; color:#006; display:block;}
.bullets em::before { content: "\22c4\00A0";  color:#006; }

main section h2 { font-size:19.5px; font-weight:normal; margin: 1.5rem 0 .5rem;}
main .flex ul {margin-bottom:1rem;}
.small {font-size:small;}
.flex ul {list-style-type: none; margin: 0; padding: 0;}
figcaption { font-size: small; color: #006;}
.polaroid {background-color: #bdf;  margin-bottom:1rem;}
.polaroid img {width: 100%;} 
.polaroid figcaption { padding: 2px; letter-spacing:2px; text-align:center;}
.linx {margin-bottom:1rem;}
.linx a {display:block; border-bottom: 1px dotted #006; padding:.5rem 0; text-decoration:none; font-size:14px;}
.linx h4 {font-weight:normal; font-size:17.5px; margin:0 0 .5rem; }


@media screen and (min-width: 500px) and (max-width: 768px) {
  aside .flex {display:flex;  justify-content:space-between; }
  aside .flex *{flex:1; margin-right:1rem;}
  aside .flex figure {align-self:flex-start;}
  aside section, aside div { padding:.5rem 0 0; }
  .linx h4 {margin:-.75rem 0 1rem;}
}
@media screen and (min-width: 600px) {  
  main .flex {display:flex;  justify-content:space-between; line-height:1.5;}
  main .flex ul {flex:1; margin-right:.25rem;}
}

@media screen and (max-width: 768px) {
  #site-header form {display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-flex:1; -ms-flex:1; flex:1; margin-top:.5rem;}
  #site-header form input[type=text] { -webkit-box-flex:1; -ms-flex:1; flex:1;}
  nav { background: -webkit-gradient(linear, left top, left bottom, from(#fc8), to(#fed)); background: -o-linear-gradient(#fc8, #fed); background: linear-gradient(#fc8, #fed); }
  nav ul {display:none;}
  nav input[type="checkbox"] { position: absolute; clip: rect(0,0,0,0); }
  nav input[type="checkbox"]:checked ~ ul {display:block;}
  nav input[type="checkbox"]+label {cursor:pointer; }
  nav #menu+label::before {content: '\2630\a0 Menu'; }
  nav ul#navl a, nav input[type="checkbox"]+label  {padding: .875rem 2rem;}
  aside { margin-bottom:.5rem; }  
  main { padding:1rem 2rem;}
  #main.cp header h1 {margin-bottom:0;}
  #main.cp header + img {padding-top:1rem;}
  #main.cp header strong {display:inline-block; padding-left:.25rem;}
  
  /* Campingplatz-Seiten neu */
  #main.cp .header h1 {margin-bottom:0;}
  #main.cp .header strong {padding-left:.2rem;}
  #main.cp .header img {padding-top:.5rem;}
  aside.cp  .fotos, aside.cp  .info {display:flex; flex-wrap:wrap;}
  aside.cp  .fotos {justify-content:space-around; }
  aside.cp  .info >* {flex:1 80px; padding:.5rem; margin: .25rem;}
  aside.cp .info p {border-left: 1px dotted #185e93; }
  aside.cp .info strong {display:block;}
  aside.cp .fotos p {margin:0; padding-bottom:.5rem;  }
  aside.cp  .info{background:#bdf; margin-bottom:.5rem;}
  
  .headerfig  { display:none; }
  .card {display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
  .card h3 {-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1; text-align:center;}  
  .bc {margin: -.5rem 0 1.5rem;}
  
}
@media screen and (min-width: 769px) {
  body {-webkit-box-shadow: 7px 0px 3px -3px #888;box-shadow: 7px 0px 3px -3px #888; padding-left:.25rem;}
  nav #menu +label, nav input[type="checkbox"] {display:none;}
  nav{ -webkit-box-flex:0; -ms-flex:0 200px; flex:0 200px;}
  nav ul  {font: 13px Verdana, Arial, Helvetica, sans-serif;}
  nav #navl input[type="checkbox"]+label { border-bottom: 2px solid #fff;}
  nav #navl >li  { border-top: 1px solid #fff;}
  nav #navl >li:first-of-type { border-top: 0;}
  nav ul#navl a:hover { background: #ffeedd url(/images/pfeil1.gif) 0 center no-repeat; }
  .wrapper {display:-webkit-box;display:-ms-flexbox;display:flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom:4px;}
  /*aside {margin-left: .5rem 0 .5rem ;}*/
  main {-webkit-box-flex:2;-ms-flex:2;flex:2; border-right:1px solid #ddd; }  
  #main.cp header {max-width:500px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:end; -ms-flex-align:end; align-items:flex-end; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
  #main.cp header + img { padding-bottom:1rem;}
  .bc { padding-bottom:.75rem; padding-top:.25rem; }
  aside.cp .info {padding: .5rem 1rem; }
  aside.cp .fotos p {text-align:center; line-height:0;}
  .polaroid figcaption {padding: .25rem 0 .75rem;  text-align: center; }
  
}
@media screen and (min-width: 769px) and (max-width: 949px){
  .wrapper {}
  aside {margin: .5rem 0; }
}

@media screen and (max-width: 949px) {
  .card1 p {padding: 0 .125rem;}
  aside.all {display:-webkit-box;display:-ms-flexbox;display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap;  -ms-flex-line-pack:start; align-content:flex-start;}
  aside.all >* { -webkit-box-flex:1; -ms-flex:1; flex:1; max-width:200px; margin-right:.5rem;  -webkit-box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);  box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);} 

}
@media screen and (min-width: 950px) {
  aside {-webkit-box-flex:1;-ms-flex:1;flex:1; max-width:300px; background:#bdf; }
  #site-header #logo img {padding-left:30px;}
}
@media screen and (max-width: 499px) {
  div.small-pics {margin: 0 -1rem;}
  div.small-pics article img{ float:left; margin: 0 .5rem .5rem 0; width: 45%;}
  div.small-pics article img.rechts {float:right; margin: 0 0 .5rem .5rem; }
  figure.sm {width: 80%; margin: 0  auto 1rem;}
  #main.cp article img {padding-bottom:.5rem;}
  p.rechts {text-align:center; }

}
@media screen and (min-width: 500px) {  
  div#main article img, main article img { float:left; margin: 0 .75rem .5rem 0; width: 45%; }
  div#main article img.rechts, main article img.rechts {float:right; margin: 0 0 .5rem .75rem; }
  figure.sm {width:25%; float: right; margin-left:1rem;}
  
  div#main article .galerie {float:left; margin: 0 .5rem .5rem 0; width:45%; height:162px;}
  div#main article .galerie img{width:100%;height:162px;}
  
  #main.cp .header { width:100%; display:flex; flex-flow: row-reverse;}
  #main.cp .header figcaption {width:28%; text-align:center; flex:1;}
  #main.cp .header h1 {line-height:1.5;}
  #main.cp .header h1 span { display:block; font-size: 2.5rem;}  
  #main.cp .header img {width:70%; flex:2; padding-right:.5rem; }
}