/* roboto-condensed-300 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/roboto-condensed-v16-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'),
       url('/fonts/roboto-condensed-v16-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-condensed-v16-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-condensed-v16-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-condensed-v16-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-condensed-v16-latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-300italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 300;
  src: url('/fonts/roboto-condensed-v16-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Light Italic'), local('RobotoCondensed-LightItalic'),
       url('/fonts/roboto-condensed-v16-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-condensed-v16-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-condensed-v16-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-condensed-v16-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-condensed-v16-latin-300italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/roboto-condensed-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
       url('/fonts/roboto-condensed-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-condensed-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-condensed-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-condensed-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-condensed-v16-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/roboto-condensed-v16-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Italic'), local('RobotoCondensed-Italic'),
       url('/fonts/roboto-condensed-v16-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-condensed-v16-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-condensed-v16-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-condensed-v16-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-condensed-v16-latin-italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/roboto-condensed-v16-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'),
       url('/fonts/roboto-condensed-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-condensed-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-condensed-v16-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-condensed-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-condensed-v16-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}



html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input,
table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;border:0;outline:0;}
:focus  {outline:0;}
ol, ul  {list-style:none;}
body {-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;}
html * {-webkit-text-size-adjust:none;}
header, hgroup, nav, section, figure, article, aside {display:block;}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
::-moz-selection    {background-color: #CCC; color: #EDAC15;}
::-webkit-selection {background-color: #CCC; color: #EDAC15;}
::selection         {background-color: #CCC; color: #EDAC15;}

/* CLEAR FIX*/
.autoclear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.autoclear       {display: inline-block;}
/* Hides from IE-mac \*/
* html .autoclear { height: 1%;}
.autoclear {display: block;}
/* End hide from IE-mac */
hr {clear:both; display:block; height:0; border:none; color:none; padding:0; margin:0; position:relative; left:-9999em;}

/* GAAANZ wichtig für waypoint animate!!! */
.hidden {visibility: hidden;}
.hidden.animated {visibility: visible;}
svg {display:block; margin:0 auto; padding:0;}


/* ********************************************************************************
   Button Style
/* ****************************************************************************** */
.button {
  display: inline-block;
  padding: 0.85em 3em;
  margin-top:2em;
  background: #EDAC15;
  letter-spacing: 0.20em;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1em;
  color: #FFF;
  -webkit-transition:all 0.35s;
     -moz-transition:all 0.35s;
          transition:all 0.35s;
}

.button:before {
  display: inline-block;
  background: #666;
  margin-right: 1em;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  text-align: center;
  color: #FFF;
  }

.button:hover, .button.small:hover, .button.action:hover, .button.action.small:hover    {background:#252725;}
.box .button  {margin-top:2em;}/* .flexo .button sagt:4em */

.button.small     {padding:0.5em 2em;}/* z.B. in boxes */
.button.xsmall    {padding:0.4em 1.5em; letter-spacing:0.08em; font-size:0.95em;}/* z.B. in boxes */
.button.xxsmall   {padding:0.3em 1em; letter-spacing:0.05em; font-size:0.9em;}/* z.B. in boxes */
.button.no-margin {margin:0;}

.button.action {background:#EDAC15;}
.button.hell {background:#FFF; color:#444; border:3px double #EFB810;}

/* Gelbe Schrift */
span.highlight {color:#EDAC15;}


/* ********************************************************************************
   Back to top Button
/* ****************************************************************************** */
.cd-top {
  display:inline-block;
  height:50px; width:50px; border-radius:25px;
  position:fixed; bottom:5%; right:2%; overflow:hidden;
/*  white-space:nowrap;*/
  background: rgba(240,185,16, 0.9);
  border:3px double #FFF;
  text-align:center; /*line-height:50px;*/
  visibility:hidden;
  opacity:0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}

.cd-top     {color:#FFF; text-decoration:none; }
.cd-top svg {width:40px; height:40px; line-height:40px; margin:7px 0 0 8px;}

.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
     -moz-transition: opacity .3s 0s, visibility 0s 0s;
          transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {visibility:visible; opacity:0.75;}
.cd-top.cd-fade-out   {opacity: .5;}
.cd-top:hover         {opacity:1; color:#FFF; text-decoration:none;}

body      {background:#444; font-family:'Roboto Condensed', sans-serif; font-size:15px; line-height:150%; font-weight:400; color:#555;}
h2, h3    {font-weight:400; color:#777;}

p, ol, ul {margin:0 0 15px 0;}
ol, ul    {padding: 0; list-style: none;}
p         {}
a         {color: #000;}
a:hover   {text-decoration: none;}





/* ********************************************************************************
 Container für die Struktur
******************************************************************************** */
.w100         {width:100%; padding:6em 0; position:relative;  background:#FFF;}
.w100:after   {content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow:auto;}
.inner        {width:90%; max-width:1200px; margin:0 auto; text-align:center;}


/* ********************************************************************************
  Abstände und Hintergrundfarben
******************************************************************************** */
.topbar       {padding:0.5em 0; background:#FFF; border-bottom:1px dotted #CCC;}/* Ganz oberste Bar für Telefon oder so... */
.header       {padding:1.5em 0; background:rgba(255,255,255,0.75);}
.header.fix   {position:fixed; z-index:1000;}/* header .fix geben und JS für .shade aktivieren ACHTUNG bei fix und Topbar */
.header.fix+section {padding-top:0;}

/* Einzelnes Hintergrundbild */
.banner     {background-color:transparent;}
.hero       {padding:5em 0;}
.intro      {padding:6em 0 6em 0;}
.section2   {}
.section3   {padding:6em 0;}
.section4   {padding:6em 0;}
.section5   {padding:6em 0;}
.section6   {padding:6em 0;}
.section10  {}
.footer     {padding:6em 0em; background:#404040;}
.map        {padding:0;}
.copyright  {padding:2em 0em;}


.gelb   {background-color:#EDAC15;}
.hell   {background-color:#F9F9F9;}
.hell2  {background-color:#F5F5F5;}
.grau   {background-color:#404040;}


.grau h2 {color:#DDD;}
.grau .title .byline {color:#CCC;}
.grau.termine .title .byline {color:#CCC;}

/* Hier weitere Bereiche hinzu die nicht .flexo sind */
.flexo, .button, .logos {margin-top:4em;}
.text {margin-top:4em;}
.title .byline  {display:block; margin-top:0.5em;}



/* ********************************************************************************
  Button Abweichungen
******************************************************************************** */
.hero .button       {margin-top:2em;}/* Hero ist anders */
.section2 .button   {}
.section3 .button   {background: #FFF; color:#444;}
.section4 .button   {}

.contactblock .button {background-color:#EDAC15;}
.contactblock .button:hover {background-color:#999;}


/* ********************************************************************************
  Hauptüberschriften
******************************************************************************** */
.title          {}
.title h2       {font-size:2.25em; line-height:100%; text-transform: uppercase;}
.title .byline  {font-size: 1.35em; color: #7F7F7F;}

.banner .title          {text-transform: uppercase !important;}
.banner .title h2       {color: rgba(255,255,255,.7); font-size:3.5em;}
.banner .title .byline  {color: rgba(255,255,255,.9); font-size:2.0em;}

.gelb .title h2 {color:#FFF;}
.gelb .byline   {color:#FFF;}

.box h3         {font-size:1.425em; margin:0 0 0.5em 0; }
.intro .box h3  {}

.mit-linie .title:after,
.section2 .title:after,
.section3 .title:after,
.section4 .title:after,
.section6 .title:after,
.section9 .title:after,
.section10 .title:after,
.section20 .title:after,
.fruehlingstag .title:after,
.downloads .title:after    {content:""; display:block; width:40%; margin:1.5em auto 0 auto; background:url('data:image/svg+xml;charset=utf-8,<svg width="200" height="4" viewbox="0 0 200 4" xmlns="http://www.w3.org/2000/svg"><rect fill="%23EDAC15" stroke="none" x="0" y="0" width="100" height="4"/><rect fill="%23666666" stroke="none" x="100" y="0" width="100" height="4"/></svg>') no-repeat center center; height:4px;}

.title.force-border:after {content:""; display:block; width:40%; margin:1.5em auto 0 auto; background:url('data:image/svg+xml;charset=utf-8,<svg width="200" height="4" viewbox="0 0 200 4" xmlns="http://www.w3.org/2000/svg"><rect fill="%23EDAC15" stroke="none" x="0" y="0" width="100" height="4"/><rect fill="%23666666" stroke="none" x="100" y="0" width="100" height="4"/></svg>') no-repeat center center; height:4px;}

/* Nur das Intro */
.intro-text h2:after    {content:""; display:block; width:60%; margin:0.5em 0 1em 0; background:url('data:image/svg+xml;charset=utf-8,<svg width="200" height="4" viewbox="0 0 200 4" xmlns="http://www.w3.org/2000/svg"><rect fill="%23EDAC15" stroke="none" x="0" y="0" width="100" height="4"/><rect fill="%23666666" stroke="none" x="100" y="0" width="100" height="4"/></svg>') no-repeat center left; height:4px;}

.gelb.radbg {background:#EDAC15 url(../images/rad1.svg) no-repeat 0 0; background-size:100%;}
.grau.radbg {background:#404040 url(../images/rad2.svg) no-repeat 0 10%; background-size:120%;}
.gruen.radbg {background:#6CA754 url(../images/rad-gruen.svg) no-repeat 50% 7%; background-size:120%;}
/*.weiss.radbg {background:#FFF url(../images/rad3.svg) no-repeat 0 0%; background-size:100%;}*/


section .bordo-top {border-top:1px solid #CCC;}
section .bordo-bot {border-bottom:1px solid #CCC;}


/* ********************************************************************************
  Überschriften Abweichungen
******************************************************************************** */
.header h2    {}
.banner h2    {}
.hero h2      {color:#666;}
.section1 h2  {}
.section2 h2  {}

.section3 h2      {}
.section3 .byline {}
.section3 .box h3 {font-size:1.825em;}

.section4 h2  {}

.termine h2, .termine .byline      {color:#EDAC15;}

.section1 h2, .section5 h2  {line-height:150%; color:#FFF;}/* Termin gefällig */
.section1 .byline, .section5 .byline {color: rgba(255,255,255,.85);}

/* Infoleiste oben */
.w100.info  {padding:0;}
.info .inner {padding:0.75em 0;text-align:right; font-weight:700; border-bottom:1px dotted #999;}

/* .inner.logo-oben */
.logo-oben .logo  {display:block; margin:0.75em 0 1.0em 0;}

/* .inner.logo-neben */
.logo-neben .logo {float:left; margin:0.75em 0 1.0em 0;}
.logo-neben #menu {float:right; width:70%;}

.logo h1       {font-size:2.0em; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin:0;}
.logo h1 span  {color:#FFBF00;}
.logo a        {text-decoration:none;color:#999;}
.shade .logo a {color:#666;}

/* Intro */
.intro .box       {text-align:left; padding:0; border:none;}
.box.intro-text   {padding:0.5em 0;}
.intro h2         {font-size:1.85em; margin:0 0 0.7em 0;}
.intro h2:after   {}
.intro .box p     {margin:0 0 1.5em 0;}
.intro-image img  {display:block; max-width:100%; height:auto; padding:0;}


/* Vordermann */
.section3 h3    {}
.section3       {}
.section3 a     {}

/* Über 20 Jahre Erfahrung */
.section4 p     {margin-top:10px;}



/* *******************************************************************************
  Topbar
******************************************************************************** */
.tel {float:right;}
.tel {line-height:30px; color:#999; font-size:0.9em; font-weight:700;}




/* *******************************************************************************
  Flexbox Layout mit Fallback - Required modernizr: .no-flexbox
******************************************************************************** */
/* Flex-Container */
.flexo {
  width:100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display:flex;

  -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;
  -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;

 -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
         align-content: stretch;

   -webkit-align-items: stretch;
        -ms-flex-align: stretch;
           align-items: stretch;

/* Mit Nowrap kommt IE Trident nicht klar */
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
  }

.flexo.verto        {-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;}
.flexo.flexo-start  {-webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start;}
.flexo.flexo-end    {-webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;}
.flexo.flexo-center {-webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;}

.intro .box       {float:left !important;}
.intro .box:first-child       {margin-left:0;}

/* Flex-Items */
.one-box .box               {width:50%; margin:0 auto !important;}

.two-boxes .box               {width:48%; margin-left:4%;}
.no-flexbox .two-boxes .box   {float:left;}

.three-boxes .box             {width:31.666%; margin-left:2.5%;}
.no-flexbox .three-boxes .box {float:left;}

.four-boxes .box              {width:23.5%;  margin-left:2%;}
.no-flexbox .four-boxes .box  {float:left;}

/* 2 oben 2 unten */
.twobytwo-boxes .box          {width:48%; margin-left:4%; margin-bottom:3em;}
.flexo.twobytwo-boxes         {flex-wrap: wrap;}
.flexo.twobytwo-boxes .box:nth-of-type(3) {margin-left:0;}

.twobythree-boxes .box          {width:48%; margin-left:4%; margin-bottom:3em;}
.flexo.twobythree-boxes         {flex-wrap: wrap;}
.flexo.twobythree-boxes .box:nth-of-type(3) {margin-left:0;}
.flexo.twobythree-boxes .box:nth-of-type(5) {margin-left:0;}

.no-flexbox .twobytwo-boxes .box   {float:left;}
.no-flexbox .flexo.twobytwo-boxes .box:nth-of-type(3) {clear:left;}

.flexo .box:first-child       {margin-left:0;}
.no-flexbox .box:first-child  {margin-left:0;}


.box.w-1-3 {width:30%;}
.box.w-2-3 {width:60%;}





/* Flex-Item Styles */
.box  {
  padding: 3em 2em;
  border:3px solid #DDD; border-left-width:1px; border-top-width:1px;
  }
.footer .box {padding-left:0; padding-right:0;}
/* Abweichungen */
.section3 .box {}

.box.no-border {border:none; padding:0;}


.lefto          {text-align:left;}
.weisso         {background-color:#FFF;}
.fcolor-green   {color:#73B531;}
.fcolor-orange  {color:#EDAC15;}
span.radlight   {font-weight:700; color:#EDAC15;}
.kleintext {font-size:smaller;}


.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	width:100%;
	float:left;
	margin:4em 0 0 0;
}
.embed-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.box img {max-width:100%; height:auto;}



.termine .box {text-align:left; padding:1rem 4rem; margin-top:2rem; border:none; background-color:rgba(91,91,91,0.3);}


/* ********************************************************************************
   Bild-Cards mit Hover
******************************************************************************** */
.intro-image {position:relative;}
.intro-image:before {
    display: block;
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border: 12px solid rgba(255, 255, 255, 0.3);
  }



/* ********************************************************************************
   Anderes Zeug
******************************************************************************** */
#map {height:300px;}


/* ********************************************************************************
   reine Textblöcke
******************************************************************************** */
.text.two-cols p {
  -webkit-column-count:2; -moz-column-count:2; column-count:2;
  padding:0; margin:0;
  text-align:left;
  -webkit-column-gap:100px;
     -moz-column-gap:100px;
          column-gap:100px;
  }

.text.three-cols p {
  -webkit-column-count:3; -moz-column-count:3; column-count:3;
  padding:0; margin:0;
  text-align:left;
  -webkit-column-gap:100px;
     -moz-column-gap:100px;
          column-gap:100px;
  }


/* ********************************************************************************
   Footer
******************************************************************************** */
.footer         {padding:1em 0;}
.footer .flexo  {margin:0;}
.footer .box    {border:none;}
.footer p       {margin:0; text-align:center; font-size:1em; color: rgba(255,255,255,0.5);}
.footer a       {text-decoration: none; color: rgba(255,255,255,0.8);}



/* ********************************************************************************
   Slider
/* ****************************************************************************** */
#slider .inner {position:relative; padding:0; height:100%;}
#slider .carousel-content {position:absolute; top:auto; bottom:0; left:0;  width:380px; padding:50px 20px; background-color:rgba(85,60,35,0.5); color:#FFF; text-align:center;}

#slider .carousel-content h2 > span {color:#FFBF00; margin-bottom:2em;}
.carousel-content p {font-size:1.45em; line-height:1.5em;}

h3.pseudo-titel {margin-top:25px; font-size:1.8em;}
.pseudo-sub     {margin-top:0.85rem; font-size:1.3em;}


#slider .owl-prev       {left:  35px; text-indent: 14px;}
#slider .owl-next       {right: 35px; text-indent: -14px;}
#slider .owl-prev:hover,
#slider .owl-next:hover {background-color: #252525;}






/* Marken */
.brandslider .owl-item p {padding:0 10%;}
.brand-logo {position:relative; margin:0 0 1em 0;}
.brand-logo img {margin:0 auto;}

.brandslider .owl-prev,
.brandslider .owl-next        {background-color: transparent; height:90px; width:30px; line-height:90px; border-radius:15px;}
.brandslider .owl-prev svg,
.brandslider .owl-next svg    {background-color: transparent; width:30px; height:100px;}

.brandslider .owl-prev        {left: -30px; top:15%; text-indent: 14px;}
.brandslider .owl-next        {right: -30px; top:15%; text-indent: -14px;}
.brandslider .owl-prev:hover,
.brandslider .owl-next:hover  {background-color: transparent;}

.brandslider .owl-pagination .owl-page        {width:20px; height:20px; margin:0 10px; border-radius:0; background:rgba(60,100,160,0.2); text-indent:-999em;}
.brandslider .owl-pagination .owl-page.active {background:rgba(250,200,36,0.5);}
.brandslider .owl-pagination .owl-page:hover  {background:rgba(250,200,36,0.99);}




/* ********************************************************************************
   Icons
******************************************************************************** */
.li .ico              {float:right;}
.li .box-text         {margin:0 110px 0 0;}

.re .ico              {float:left;}
.re .box-text         {margin:0 0 0 110px;}

.box.li               {text-align:right; padding:0; border:none;}
.box.re               {text-align:left; padding:0; border:none;}

.box.li p, .box.re p {margin-bottom:10px;}

.ico svg          {width:80px; height:80px;}
.ico.socials svg  {width:40px; height:40px; display:inline-block; margin:0.5em; fill:#FFF;}

.li .ico svg .svg-bg {}
.li .ico svg:hover .svg-bg {}

.ico.small        {float:left; margin:0 0.5em 0 0;}
.ico.small svg    {width:30px; height:30px;}

.zoom             {position:absolute; bottom:10px; right:10px; opacity:0.5;}
.zoom .ico        {margin:0;}
.zoom .ico svg    {width:48px; height:48px;}


/* ********************************************************************************
   Kontakt + Formular
******************************************************************************** */
.contactblock, .contactblock p, footer form {text-align:left;}
.contantblock {}
.contactblock h3 {margin:1em 0 0.35em 0; color:#CD9F34; font-weight:300;}
.contactblock h3:first-child {margin-top:0;}


input[type="text"], input[type="email"], textarea, select {border:none; width:100%; padding:8px 5px; margin:0 0 0.5em 0; background:#EEE;}

textarea {height:80px; font-family:'Roboto', sans-serif;}
footer .box .button {margin:0; border:none;}

#form-messages {padding:5px; font-size:0.85em;  font-weight:400;}
.success  {background-color:#B4F0B3; color:#444; margin-bottom:1.5em;}
.error    {background-color:#FEC7C7; color:#444; margin-bottom:1.5em;}
#website  {display:none;}

/* Ganz unten */
.copyright      {color:#444;}
.copyright a    {color:#444;}


/* Ajax loaded Zeugs */
#datenschutz, #impressum      {width:70%; margin:0 auto; text-align:left; height:auto;}
#datenschutz h2, #impressum h2,
#datenschutz h3, #impressum h3,
#datenschutz p, #impressum p, #impressum address  {text-align:left; color:#EEE; margin-top:1em;}
#datenschutz p, #impressum p  {color:#DDD; margin-top:0.25em;}





ul.deko1 li, ul.deko2 li, ul.deko3 li, ul.deko-termine li {background-repeat:no-repeat;}
ul.deko1 li       {
  display:block; background-image:url('data:image/svg+xml;charset=utf-8,<svg stroke="%23FFBF00" stroke-width="2" fill="none" width="15" height="15" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 L 10 10 L 0 20 M 10 0 L 20 10 L 10 20"/></svg>');
  background-position: 0 3px;
  padding-left:25px; margin:0.25em 0;
}
ul.deko1 a        {text-decoration:none; color:#666;}
ul.deko1 a:hover  {text-decoration:underline; color:#111;}

/* z.B. Termine */
ul.deko2 li       {
  color:#CCC; font-size:1.15em; display:block;
  background-image:url('data:image/svg+xml;charset=utf-8,<svg stroke="%23FFBF00" stroke-width="2" fill="none" width="15" height="15" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 L 10 10 L 0 20 M 10 0 L 20 10 L 10 20"/></svg>');
  background-position: top left;
  padding-left:25px; margin:0.5em 0;
  }
ul.deko2 li span  {display:block; font-weight:300;}

ul.deko2 a        {text-decoration:none; color:#CCC;}
ul.deko2 a:hover  {text-decoration:underline; color:#999;}


ul.deko-termine li       {
  color:#CCC; font-size:1.15em; display:block;
  background-image:url('data:image/svg+xml;charset=utf-8,<svg stroke="%23FFBF00" stroke-width="2" fill="none" width="15" height="15" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 L 10 10 L 0 20 M 10 0 L 20 10 L 10 20"/></svg>');
  background-position: 0 3px;
  padding-left:25px; margin:0.5em 0;
  }
ul.deko-termine li span  {display:block; font-weight:300;}

ul.deko-termine a        {text-decoration:none; color:#CCC;}
ul.deko-termine a:hover  {text-decoration:underline; color:#999;}


ul.deko1.deko3 li       {
  background-image:url(../images/icons/flower-3.svg);
  background-position:0 0;
  padding-left:33px; margin:0.5em 0;
  }

/* schwarze Doppelquotes */
ul.deko4 li       {
  background-repeat:no-repeat;
  display:block; background-image:url('data:image/svg+xml;charset=utf-8,<svg stroke="%23000" stroke-width="2" fill="none" width="10" height="10" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 L 10 10 L 0 20 M 10 0 L 20 10 L 10 20"/></svg>');
  background-position: 0 5px;
  padding-left:20px; margin:0.2em 0;
}






/* ********************************************************************************
   Menu
******************************************************************************** */
#menucontrol  {display:none;}
#menu     {display:table; width:80%; margin:0 auto !important;}
#menu ul  {display: table-row;}
#menu li  {display:table-cell; text-align: center; vertical-align:middle;}
#menu a   {display:inline-block;}

#menu li a {
  padding: 1em 1.5em;
  letter-spacing: 1px;
  font-size: 0.95em;  text-align:center; white-space:nowrap;
  text-decoration: none; text-transform: uppercase;
  color: #333; font-weight:400; letter-spacing:0.1em;
}

#menu li a      {border-bottom:3px solid transparent;}
#menu a:hover   {border-color:#EDAC15;}
#menu .active a {border-color:#EDAC15;}

.header.shade {box-shadow:0 4px 8px rgba(0,0,0,0.4); padding:0.5em 0 0.15em 0; position:fixed; z-index:1000; background:rgba(255,255,255,1)}
.header, .shade, .header.shade h1, .logo a   {
  -webkit-transition: all 0.4s linear;
     -moz-transition: all 0.4s linear;
          transition: all 0.6s linear;
}
.header, .header h1, #datenschutz, #impressum  {
  -webkit-transition: all 0.2s linear;
     -moz-transition: all 0.2s linear;
          transition: all 0.4s linear;
}



/* ********************************************************************************
   Transitions
******************************************************************************** */
.w100.topbar, .tel,
.flexo,
.two-boxes .box,
.three-boxes .box,
.four-boxes .box  {
  -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
         transition: all 0.4s linear;
  }
#menu li a {
  -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
         transition: all 0.2s linear;
  }
.header.shade #menu li a {color:#333;}


/* ********************************************************************************
   Responsive Styles
******************************************************************************** */
@media only screen and (max-width: 1260px) {
.embed-container {width:100%;	float:none;	margin:4em 0 0 0;}
}

@media only screen and (max-width: 1080px) {
  #menu li a {padding: 1em 0.5em;}
}

@media only screen and (max-width: 960px) {
  .flexo.four-boxes {flex-wrap: wrap;}
  .four-boxes .box  {width:50%; margin:0;}
}

@media only screen and (max-width: 900px) {
  #menu     {width:100%; }
  #menu a   {padding: 0.75em 0.5em; letter-spacing:0;}
}


 .slicknav_menu {display:none; z-index:9999;}
@media only screen and (max-width: 768px) {
  .js #menu ul       {display:none;}
  .js .slicknav_menu  {display:block; width:100%; margin:0 auto; /*position:fixed; top:0;*/ position:relative; z-index:1001;}
  .flexo {margin-top:1em;}
  .flexo {-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;}
  .one-box .box, .two-boxes .box, .twobytwo-boxes .box, .three-boxes .box, .four-boxes .box {width:100%; margin:1em 0; flex-wrap: wrap;}
  .no-flexbox .two-boxes .box, .no-flexbox .twobytwo-boxes .box, .no-flexbox .three-boxes .box, .no-flexbox .four-boxes .box {float:none; display:block; width:100%;}
  .footer .box {padding:0;}
  .button {margin-top:2em;}

  .w100.header.fix   {position:static; padding:0;}/* Mobile immer static */
  .header.fix+section {padding:0;}
  /* .inner.logo-neben */
  .logo-neben .logo {float:none; display:block; position:absolute; z-index:1001; top:10px; margin:0.75em 0 1.0em 0;}
  .logo-neben #menu {float:none; width:100%;}

  .w100.topbar  {padding:0.5em 0;}
  .topbar       {text-align:left; position:absolute; top:9px; left:0; width:60%; border:none;}
  .tel          {float:left; text-align:left; font-size:1.0em;}

  .text.two-cols p {-webkit-column-gap:30px; -moz-column-gap:30px; column-gap:30px;}

  .li .ico, .box.re     {float:left;}
  .li .box-text, .re .box-text {margin:0 0 0 110px;}
  .box.li, .box.re             {text-align:left; padding:0; border:none;}
  #suche {width:130px;}
  #suche img {max-width:100%; height:auto;}

}

@media only screen and (max-width: 640px) {
/*.embed-container iframe {width:280px; height:157px;}*/
.termine .box {padding:1rem; margin-top:2rem;}
  #slider .carousel-content {width:280px; padding:30px 20px;}
  #slider .inner h2         {font-size:24px;}
  .carousel-content p       {font-size:1.1rem;}
  #slider .inner .button    {margin-top:0;}

}


@media only screen and (max-width: 480px) {
  .w100         {padding:2.5em 0;}
  .w100.header  {padding:0.5em 0;}
  .inner        {width:95%;}
  .flexo {margin-top:0.5em;}
  .button, .logos, .text {margin-top:1em;}
  .title h2       {font-size:1.7em; }
  .title .byline  {font-size: 1.1em;}

  .text.two-cols p {
  -webkit-column-count:1; -moz-column-count:1; column-count:1;
  -webkit-column-gap:0px;
     -moz-column-gap:0px;
          column-gap:0px;
  }
}

@media only screen and (max-width: 360px) {
  .li .ico, .re .ico     {float:none; display:block;}
  .li .box-text, .re .box-text {margin:1em 0 0 0;}
  .box.li, .box.re             {text-align:center; padding:0; border:none;}
}

/* Nur OWL-Slider */
@media only screen and (max-width: 768px) {
  .imgslider .owl-pagination            {margin:1.0em 0 0 0;}
  .imgslider .owl-pagination .owl-page  {margin:0 4px;}

  .brandslider .owl-prev {left: 0px;}
  .brandslider .owl-next {right: 0px;}
  .brandslider .owl-pagination            {margin:1.0em 0 0 0;}
  .brandslider .owl-pagination .owl-page  {margin:0 4px;}
    #slider .carousel-content {/*top:0;*/}

}

@media only screen and (max-width: 600px) {
.box {padding:1rem;}
}

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

/* Zur Zeit keine Förderung */
.xx40 {background:#EA5211; color:#FFF; border-radius:10px; padding:15px; text-align:center; font-size:1.1em; line-height:120%; box-shadow:0 0 8px rgba(0,0,0,0.3);}


.cc-window{opacity:1;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{transition:transform 1s ease}.cc-animate.cc-revoke.cc-top{transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-bottom,.cc-animate.cc-revoke.cc-active.cc-top,.cc-revoke:hover{transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;transition:max-height 1s}
.cc-link,.cc-revoke:hover{text-decoration:underline}.cc-revoke,.cc-window{position:fixed;overflow:hidden;box-sizing:border-box;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:14px;line-height:1.5em;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}.cc-window.cc-static{position:static}.cc-window.cc-floating{padding:1.5em;max-width:24em;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner{padding:1em 1.8em;width:100%;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-header{font-size:18px;font-weight:700}.cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}.cc-link{opacity:.8;display:inline-block;padding:.2em}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-banner .cc-btn:last-child{min-width:140px}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;position:absolute;top:.5em;right:.5em;font-size:1.6em;opacity:.9;line-height:.75}.cc-close:focus,.cc-close:hover{opacity:1}
.cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}.cc-floating .cc-message{display:block;margin-bottom:1em}.cc-window.cc-floating .cc-compliance{-ms-flex:1;flex:1}.cc-window.cc-banner{-ms-flex-align:center;align-items:center}.cc-banner.cc-top{left:0;right:0;top:0}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{-ms-flex:1;flex:1}.cc-compliance{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-compliance>.cc-btn{-ms-flex:1;flex:1}.cc-btn+.cc-btn{margin-left:.5em}
@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-ms-flex:1;flex:1}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-ms-flex-align:unset;align-items:unset}}
.cc-floating.cc-theme-classic{padding:1.2em;border-radius:5px}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;-ms-flex:none;flex:none}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block}
.cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em 2em 1.5em}.cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}


#weihnacht .w100 {background-color:#b91a1a;}
#weihnacht .w100 * { color:#FFF;}
#weihnacht .box {width:80%; background-color:rgba(207,30,30,0.6); padding:2rem; border:1px solid #F2A8A8;}
#weihnacht .w100 {background-image:url('images/flocke.svg'); background-size:8%;}
@media only screen and (max-width: 768px) {
#weihnacht .box {width:100%;}
}


.angebote .card       {padding:0 0 1.5rem 0;}
.angebote .card img   {display:block; margin-bottom:2rem;}
.angebote .card h3    {color:#444; margin:0 0 1.5rem 0; font-size:24px;}
.angebote .card > a   {display:block; position:relative;}
.angebote .zoom       {bottom:0; right:0; opacity:0.5;}

.angebote .preis      {font-weight:700; color:#BA441D; font-size:22px;}
.angebote .preis del  {font-weight:700; color:#777; font-size:18px;}

.ladenslider img {width:100%; height:auto; border:1px solid #FFF;}


#radtouren                  {border-top:2px solid #DDD;}
.tourbox                    {border:1px solid #DDD; padding:15px; margin:0 0 15px 0;}
.tourbox .button            {margin-top:8px;}
.tourbox .button.versteckt  {display:none;}




/* +++++++++++++++++++++++++++++++++++
   Card Allgemein
+++++++++++++++++++++++++++++++++++ */
.card                 {position:relative; box-shadow:0 0 5px rgba(0,0,0,0.2); transition:width 0.2s;}
.card * {text-align:left;}
.card-image           {padding:0; }
.card-image img       {display:block; max-width:100%; height:auto;}
.card-title           {margin:0; font-size:1.5em; font-weight:700;}
.card-texto           {padding:0;}
.card-footer          {padding:0;}
.card p               {margin:0;}

.flexo.cards-2                      {margin:60px 0 0 0;}
.cards-2                            {}
.cards-2 .card                      {width:32.5%; margin:0; background:#FFF; border-bottom:2px solid #999;}
.cards-2 .card-image                {}
.cards-2 .card-title                {padding:20px; font-size:1.3em;}
.cards-2 .card-texto                {padding:0 20px 10px 20px; text-align:justify;}

.cards-2 .card-footer               {padding:20px 20px 30px 20px; margin-top:auto; text-align:center;}
.cards-2 .card-footer .button       {margin:0 auto;}

.card-quelle  {padding:10px 20px; background:#555; color:#FFF;}

@media only screen and (max-width: 1000px) {
.cards-2 .card-texto  {font-size:0.9em; line-height:135%;}
}

@media only screen and (max-width: 850px) {
.cards-2 .card  {width:48% !important; margin-bottom:4%;}
}

@media only screen and (max-width: 768px) {
.flexo.cards-2 {  -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;}
}

@media only screen and (max-width: 580px) {
.cards-2 .card  {width:100% !important; margin-bottom:8%;}
}


.border-top {border-top: 2px solid #DDD;}
h3.termin-art {font-size:1.75em;}
.flexo.one-cal {margin-top:2rem;}

.button.rot {background-color:#DD7171;}
.button.werkstatt {background-color:#7d7d7d;}

.socialsbar        {margin:-15px 0 10px 0; padding:0;}
.socialsbar .flexo {margin:0; padding:0;}
.socialsbar a      {width:35px; height:35px;}
.socialsbar a svg  {display:block; width:35px; height:35px; background-color:#58AD14;}

footer .socialsbar        {margin:0 0 10px 0; padding:0;}


hr.trenner-1 {margin-bottom:20px;}

@media only screen and (max-width: 580px) {
  .ha-ul {display:block !important; float:none !important; margin:0 0 20px 0 !important;}
}



#suche {
  position:absolute; z-index:+1;
  right:5%; top:120px;
}
@media only screen and (max-width: 768px) {
#suche {
  right:1%; top:57px;
}

}



#praem {
  background-color:#EC4211; color:#FFF; font-weight:bold; padding:10px;
  position:absolute;
  top:0; right:-25px;
  transform:rotate(22deg);
  box-shadow:2px 5px 8px rgba(0,0,0,0.4);
  }
  
  
#zum-shop {
  position:absolute; z-index:1000;
  right:0; top:-220px;
}
@media only screen and (max-width: 500px) {
  #zum-shop {width:150px; height:150px;}
  #zum-shop img {max-width:100%; height:auto;}
}


ol.numliste {list-style:decimal; margin:0 0 8px 15px;}

















.griddo     {display:grid;}

.team-grid  {grid-template-columns: repeat(4, 1fr); grid-gap:2rem;}
@media only screen and (max-width: 1000px) {
  .team-grid {grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (max-width: 700px) {
  .team-grid {grid-template-columns: repeat(2, 1fr); grid-gap:1rem;}
}
@media only screen and (max-width: 430px) {
  .team-grid {grid-template-columns: repeat(1, 1fr); }
}


.team-card        {padding:0 0 10px 0; position:relative;}
.team-bild        {display:block;}
.team-bild img    {display:block; max-width:100%; height:auto;}
.team-text        {padding:10px; padding-bottom:0;}
.team-text *      {text-align:center;}
.team-text h3     {margin:0 0 8px 0; color:#444; font-weight:bold;}

.team-text p      {margin:0; color:#444;}
.team-text .team-kurz-text   {color:#444;}

.mfp-bg         {background:#2f240a; opacity:0.9;}/* Overlay */

.team-bild      {position:relative;}
/*
.opener         {position:absolute; bottom:0; right:0; width:36px; height:36px; background:#EEE; border-top-left-radius:5px; opacity:0.7; transition:all 0.2s;}
.opener:hover   {opacity:0.85;}
.opener svg     {width:36px; height:36px;}
*/
.modal-opener         {display:block; margin-top:10px;}
.modal-opener a       {display:inline-block; color:#333; font-weight:normal; text-decoration:none; border:1px solid #FFBF00; border-radius:3px; background-color:#FFBF00; padding:5px 18px;}
.modal-opener a:hover {background-color:#FFD966; border-color:#FFD966;}

/* Modal Details */
.team-details   {width:auto; max-width:800px; margin:0 auto; position:relative; background:#FFF; box-shadow:0 0 10px 10px rgba(0,0,0,0.5); padding:0; }
.mfp-close-btn-in .mfp-close      {z-index:11; opacity:1; color:#333; background-color:#EDAC15; padding:0; border-radius:0; height:60px; width:60px; line-height:60px; top:0px; right:0;}
.mfp-close-btn-in .mfp-close:hover{cursor:pointer; color:#FFF !important;}

.modal-titel        {width:100%; background:#EDAC15; border-left:8px solid #666; color:#FFF; font-size:22px; font-weight:bold; height:45px; line-height:45px; padding-left:13px; margin-bottom:15px;}
.modal-content      {padding:20px; font-size:17px;}
.modal-images       {width:100%; margin:0 0 0 0; text-align:center;}
.modal-images img   {display:block; max-width:100%; height:auto; margin:0 auto;}
.modal-text {
    width: 100%;
    padding: 0 0 0 20px;
    background: #FFF;
  }
.modal-text h3      {font-size:24px; color:#edac15; margin:0 0 10px 0;}
.modal-text h4      {margin:0 0 3px 0; color:#444; font-weight:bold;}
.perso {padding: 0 0 0 20px; border-left: 5px solid #888;}
/*
.flexo.mfp-team-links {width:85%; margin:2.5em auto 0 auto;}
.mfp-team-links li  {margin:0 2px 0 0;}
.mfp-team-links a   {display:block; text-decoration:none; color:#000; background:#CCC; padding:5px 15px; transition:all 0.2s;}
.mfp-team-links a:hover   {color:#000; background:#999;}
*/



@media only screen and (max-width: 600px) {
.team-details   {max-width:96%;}
.modal-titel    {padding-left:20px;}
.modal-content  {font-size:15px;}
.modal-text     {margin: 0 auto;}
}



table.angebote2 {border-collapse:collapse; margin:0 0 10px 0;}
table.angebote2 td {border:1px solid #CCC; padding:5px; vertical-align:top;}
table.angebote2 td  {width:70%;}
table.angebote2 td.preis2 {width:30%; font-weight:bold;}
table.angebote2 td.td1 {width:35%;}

@media only screen and (max-width: 400px) {
table.angebote2 td        {width:60%;}
table.angebote2 td.preis2 {width:40%;}

}


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   Social-Icons rechts fixed
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.social-container{
    padding:0; margin:0;
    position:fixed;
    right:-170px;/* Anpaqssen width-SVG-Breite = 210px-40px=170px */
    width:210px;/* Anpaqssen */
    top:280px;
    z-index: 1034;
}

.social li{
    list-style-type:none;
    background-color:#444; color:#FFF;
    height:40px;
    padding:0;
    margin:0 0 1px 0;
    -webkit-transition:all 0.35s ease-in-out;
    -moz-transition:all 0.35s ease-in-out;
    -o-transition:all 0.35s ease-in-out;
    transition:all 0.35s ease-in-out;
    cursor:pointer;
}


.social li svg {cursor:default;}

.social li svg {
  float:left;
  width: 40px;
  height: 40px;
  background: #FFF; border:1px solid #CCC;
  margin:0 4px 0 0;
}
.social li:hover svg {background-color:#FFBF0A; cursor:pointer;}



@media only screen and (max-width: 600px) {
  .social-container{
      position:fixed;
      right:-170px;/* Anpaqssen width-SVG-Breite = 210px-40px=170px */
      width:210px;/* Anpaqssen */
      top:66px;
  }
  
  .social-container {right:-180px;}
  .social li     {width:30px; height:30px;}
  .social li svg {width: 30px; height: 30px;}

  }



.centerme-vertical {    
  display: flex; 
  justify-content: center; /* Horizontal */
  align-items: center;     /* Stretch Vertikal */
}


#lagerraeumung .title {position:relative;}
.badge-sale {
  position:absolute; left:0; top:0;
  display:inline-block;
  padding:10px 20px;
  background-color:#DB3C33; color:#FFF;
  font-size:24px; font-weight:bold;
  border: 2px solid #333;
  transform:rotate(-10deg);
  }
.badge-sale2 {
  right:0; left:auto;
  transform:rotate(10deg);
}
@media only screen and (max-width: 860px) {
  .badge-sale2 {display:none;}
  .badge-sale  {top:-40px;}
}



/* ==============================================================
   SALE Räder aus service
============================================================== */
/* ==============================================================
   SALE Räder aus service
============================================================== */
#menu li.nav-angebote a {font-weight:700;}

#jubilaeums-angebote .inner {max-width:1600px;}
#sonder-angebote .inner     {max-width:1600px;}



/* die Cards */
.cards-3.griddo   {grid-template-columns:1fr 1fr; grid-gap:2rem;}
/* in der Card Bild li. Text re. */
.card-wrap.griddo {grid-template-columns:45% 1fr; grid-gap:1rem; }


.cards-3 .card-title {position:relative; background-color:#DDD; padding:0.75rem; text-align:left;}
/* Badge sitzt im title rechts */
.card-badge {
  position:absolute; top:0; bottom:0;right:0;
  display:inline-block;
  padding:0.75rem;
  background-color:#CD4841; color:#FFF;
  font-size:23px; font-weight:bold;
  /*transform:rotate(-10deg);*/
  }


.rad-reserviert {
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  overflow: hidden;/* Wichtig, damit abgeschnítten wird */
  width: 150px; height: 150px;
  text-align: right;
}
.rad-reserviert span {
  position: absolute;
  top: 26px; /* top muss je nach line-height usw... angepasst werden*/
  left: -33px;
  width: 150px;
  display: block;
  font-size: 18px; font-weight: bold; color: #FFF; text-transform: uppercase; text-align: center; line-height: 32px;
          transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  background: #79A70A;
  box-shadow: 0 3px 6px -5px rgba(0, 0, 0, 0.6);
}

/* Ribbon-Überstand links unten */
.rad-reserviert span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
}
/* Ribbon-Überstand oben rechts */
.rad-reserviert span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
}
/* VERKAUFT */
.rad-reserviert.rad-verkauft span {background:#D66738;}
.button.isdisabled        {pointer:none; background-color:#CCC; border:1px solid #CCC; outline:none;}
.button.isdisabled:hover  {pointer:none; background-color:#CCC; border:1px solid #CCC; outline:none;}


.cards-3 .card-texto {padding:1rem;}
.card-footer         {text-align:center; padding-bottom:1rem;}
.card-footer .button {margin-top:1rem; padding-left:5%; padding-right:5%; text-align:center;}

.card-image {position:relative; padding-top:20px;}
.card-preis {
  position:absolute;
  bottom:1.75rem;
  left:0; right:0;
  text-align:center;
  font-size:23px; font-weight:700;

  border:1px solid #edac15;
  display:inline-block;
  left:20px; right:auto;
  border: 1px solid #edac15;
  padding: 0.4rem 0.7rem;
  transform: rotate(-6deg);
}
.preis-alt {color:#EA4717;}
.preis-neu {color:#3FCA37;}

.ratattr table            {width:100%}
.ratattr td               {padding:0; border:none; vertical-align:top;}
.ratattr td:nth-child(2)  {padding-left:10px;}
.rad-data {margin-top:15px;}

.card-texto ul {list-style:square;}



@media only screen and (max-width: 1100px) {
  .cards-3.griddo   {grid-template-columns:1fr; grid-gap:2rem;}
}


@media only screen and (max-width: 500px) {
.card-wrap.griddo {grid-template-columns:1fr; grid-gap:1rem; }

.card-preis {
  background-color:rgba(255,255,255,0.5);
  bottom:-20px;
  right:20px;
  transform: rotate(0);
  }
}


.text-left {text-align:left;}
.box.text-center {text-align:center;}

.p-top-0 {padding-top:0;}
.p-top-1 {padding-top:1rem;}
.p-top-2 {padding-top:2rem;}
.p-top-3 {padding-top:3rem;}
.p-top-4 {padding-top:4rem;}
.p-top-6 {padding-top:6rem;}

.p-bot-0 {padding-bottom:0;}
.p-bot-1 {padding-bottom:1rem;}
.p-bot-2 {padding-bottom:2rem;}
.p-bot-3 {padding-bottom:3rem;}
.p-bot-4 {padding-bottom:4rem;}
.p-bot-6 {padding-bottom:6rem;}

.m-top-0 {margin-top:0 !important;}
.m-top-05 {margin-top:0.5rem !important;}
.m-top-1 {margin-top:1rem !important;}
.m-top-2 {margin-top:2rem !important;}
.m-top-3 {margin-top:3rem !important;}
.m-top-4 {margin-top:4rem !important;}
.m-top-6 {margin-top:6rem !important;}

.m-bot-0 {margin-bottom:0 !important;}
.m-bot-05 {margin-bottom:0.5rem !important;}
.m-bot-1 {margin-bottom:1rem !important;}
.m-bot-2 {margin-bottom:2rem !important;}
.m-bot-3 {margin-bottom:3rem !important;}
.m-bot-4 {margin-bottom:4rem !important;}
.m-bot-6 {margin-bottom:6rem !important;}


/* Alten Wert von oben überschreiben */
h3, h4, h5 {color:#000;}
.box {text-align:left;}/* Früher immer center */

.title a {color:#FFF;}

.embed-container                {position: relative;	height: 0; overflow:hidden; border:1px solid #CCC;}
.embed-container.ratio-65       {padding-bottom:65.25%;}
video                           {width:100%; height:auto; margin:0;}
.video-caption                  {background:#414138; color:#FFF; padding:7px 5px 4px 8px; font-weight:bold; font-size:18px;}

.embed-container.instafuck      {
  padding-bottom:53.00%;
  float:none;
  width:30%;
  margin:0 auto 2rem auto;
  }
@media only screen and (max-width: 500px) {
.embed-container.instafuck      {
  padding-bottom:175.00%;
  width:100%;
  }
}

.flexo-verto-zentro {align-items: center;      /* Vertikal zentriert */}


.section5.grau h2 a {color:white;}

.bildleiste {
  width:100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display:flex;

  -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;
  -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;

 -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
         align-content: stretch;

   -webkit-align-items: stretch;
        -ms-flex-align: stretch;
           align-items: stretch;

  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;

 margin:5px 0 0 0;
}

.bildleiste img {max-width:100%; height:auto; padding-right:1px;}

.card-texto ul {margin-left:18px;}
.bildleiste img {max-width:100%; height:auto; padding-right:2px;}

#gebrauchtmarkt .card-preis {
    position:static;
    display:block;
    text-align:left;
    font-size: 23px;
    font-weight: 700;
    border: none;
    padding: 0.5rem 0 0 0;
    transform: rotate(0);
}


#gebrauchtmarkt .card-texto {padding-right:2rem; padding-left:0.5rem;}
#gebrauchtmarkt .card-image {padding:1rem 0 0 1rem;}


.ribbon {
  position: absolute;
  right: 0; top: 0;
  z-index: 1;
  overflow: hidden;/* Wichtig, damit abgeschnítten wird */
  width: 120px; height: 120px;
  text-align: right;
}
.ribbon span {
  position: absolute;
  top: 35px; /* top muss je nach line-height usw... angepasst werden*/
  right: -35px;
  width: 165px;
  display: block;
  font-size: 16px; font-weight: bold; color: #444; text-transform: none; text-align: center; line-height: 28px;
          transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  /*background: linear-gradient(#818181 0%, #676767 100%);*/
  background: #FFBF0A;
  box-shadow: none;
}

/* Ribbon-Überstand links unten */
.ribbon span::before {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
}
/* Ribbon-Überstand oben rechts */
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
}

@media only screen and (max-width: 600px) {
  #gebrauchtmarkt .cards-3 .card-title {padding-right:115px;}
}


.zeitenbanner .title h2 {margin-bottom:15px;}