@charset "utf-8";

/* ------- Farbcodes -------- *//*
sehr hellgraue Linien (Fuss)    #cecece;
helle Goldfarben (Button-Rand)  #bcb1a6;  #bcb7b3;
dunkere Foldfarbe (Logo unten)  #a9a6a1;

   
/* --- Schriftarten lokal einbinden --- */

/* montserrat-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../Fonts/montserrat-v31-latin-300.woff2') format('woff2'),
       url('../Fonts/montserrat-v31-latin-300.ttf') format('truetype');
}

/* montserrat-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../Fonts/montserrat-v31-latin-regular.woff2') format('woff2'),
       url('../Fonts/montserrat-v31-latin-regular.ttf') format('truetype');
}

/* montserrat-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../Fonts/montserrat-v31-latin-500.woff2') format('woff2'),
       url('../Fonts/montserrat-v31-latin-500.ttf') format('truetype');
}

/* montserrat-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../Fonts/montserrat-v31-latin-600.woff2') format('woff2'),
       url('../Fonts/montserrat-v31-latin-600.ttf') format('truetype');
}

/* montserrat-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../Fonts/montserrat-v31-latin-700.woff2') format('woff2'),
       url('../Fonts/montserrat-v31-latin-700.ttf') format('truetype');
}

/* montserrat-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('../Fonts/montserrat-v31-latin-800.woff2') format('woff2'),
       url('../Fonts/montserrat-v31-latin-800.ttf') format('truetype');
}


/* --- alle Abstaende und Raender auschalten --- */
* { margin:0px; padding:0px; border:0px none; }

/* --- bei Links die Hervorhebung durch den Browser auschalten --- */
a:active, a:focus { outline-width:0; outline-style:none; outline-color:currentcolor; }

/* --- wichtige Styles, um Fehler in der default-style von TYPO3 zu verhindern --- */
div.csc-textpic { position:relative; top:0px; overflow:hidden; }
div.csc-textpic .csc-textpic-imagewrap img { border:none; display:block; }
div.csc-textpic div.csc-textpic-imagewrap .csc-textpic-image { margin:0; padding:0; border:none; }

/* --- Die oft verwendeten Styles position:relative, position:absolute und overflow:hidden in Klasse packen --- */
.rehi { position:relative; overflow:hidden;  }
.abhi { position:absolute; overflow:hidden;  }
.fihi { position:fixed;    overflow:hidden;  }
.revi { position:relative; overflow:visible; }
.abvi { position:absolute; overflow:visible; }
.fivi { position:fixed;    overflow:visible; }

/* --- Die oft verwendeten Styles für background-colour, display:none und clear:both in Klasse packen --- */
.vishid { visibility:hidden; }
.hide   { display:none; }
.clear  { clear:both; }
.fade   { opacity:0; }
.nobr   { white-space:nowrap; }


  
/* ======================================================================================================================================= */
/* ===========================================       Gemeinsame Styles für alle Viewports      =========================================== */
/* ======================================================================================================================================= */
 
/* ------------------------------------------------- Styles fuer mehrfach verwendete Systemklassen ------------------------- */
.inner     { width:100%; box-sizing:border-box; }
.innerHead { width:100%; box-sizing:border-box; transition:height 0.4 ease-in-out; }
.innerBody { width:100%; box-sizing:border-box; margin:0 auto 0; max-width:800px; }

@media screen and (min-width:1280px)                        { .inner { max-width:1200px; margin:0 auto 0; } }
@media screen and (min-width:1000px) and (max-width:1280px) { .inner { padding:0 40px 0; } }
@media screen and (min-width:700px) and (max-width:999px)   { .inner { padding:0 30px 0; } }
@media screen and (min-width:470px) and (max-width:699px)   { .inner { padding:0 20px 0; } }
@media screen and (max-width:469px)                         { .inner { padding:0 10px 0; } }
  
@media screen and (min-width:1640px)                        { .innerHead { padding:0 100px 0; } }
@media screen and (min-width:1260px) and (max-width:1639px) { .innerHead { padding:0 70px 0; } }
@media screen and (min-width:1000px) and (max-width:1259px) { .innerHead { padding:0 40px 0; } }
@media screen and (min-width:700px) and (max-width:999px)   { .innerHead { padding:0 30px 0; } }
@media screen and (min-width:470px) and (max-width:699px)   { .innerHead { padding:0 20px 0; } }
@media screen and (max-width:469px)                         { .innerHead { padding:0 10px 0; } }

@media screen and (min-width:1260px)                        {  .desktophide { display:none; } }
@media screen and (min-width:1000px) and (max-width:1259px) {     .landhide { display:none; } }
@media screen and (min-width:700px)  and (max-width:999px)  { .portraithide { display:none; } }
@media screen and (max-width:699px)                         {   .mobilehide { display:none; } }


/* ------------------------------------------------- Styles fuer Positionierung der Grundbloecke ------------------------- */
html, body { background-color:#fff; }

#frameSite { width:100%; z-index:1; background:url(../Images/structur-paper.jpg) repeat 0 0; }

/*header*/
#frameSite .headerHeight { height:156px; transition:height 0.4 ease-in-out; }

#frameHeader  { width:100%; left:0; top:0; background-color:#fff; box-sizing:border-box; border-bottom:2px solid #fff; z-index:94; }
#header       { height:100%; z-index:94; }
#headerTag    { width:100%; height:100%; z-index:94; }
#logoTop      { left:50%; top:50%; height:128px; width:auto; transform:translate(-50%, -50%); z-index:94; }
#logoTop a    { display:block; height:100%; width:auto; margin:0; padding:0; outline-width:0; outline-style:none; outline-color:currentcolor; }
#logoTop img  { height:100%; width:auto; }
#navIconHead  { right:0; top:50%; height:40px; width:auto; transform:translate(0, -50%); z-index:95; }
#burger       { left:0; top:50%; height:40px; width:40px; transform:translate(0, -50%); cursor:pointer; z-index:96; }
#burger .b    { right:5px; width:30px; height:2px; background-color:#000; }
#burger .top  { top:13px; }
#burger .cen  { top:20px; }
#burger .bot  { top:27px; }
  
#maskGrey        { right:0; top:0; width:0; height:100%; cursor:pointer; background-color:rgba(0,0,0,0); transition:background-color 0.3s ease-out; z-index:97; }				   
#maskGrey.active { width:100%; }	
#maskGrey.grey   { background-color:rgba(0,0,0,0.5); transition: background-color 0.3s ease-out; }

#mainNavDrawer            { left:0px; top:0px; width:360px; height:100%; background-color:#fff; transform:translate(-361px, 0); transition:all 0.3s ease-in; z-index:98; }
#mainNavDrawer.active     { transform:translate(0px, 0); transition: all 0.4s 0.2s ease-out; }
#mainNavDrawer.low.active { overflow-x:hidden; overflow-x:no-display; overflow-y:auto; }
#mainNavFrame             {  }
#mainNav                  {  }

#accountLink        { cursor:pointer; z-index:99; }
#mainNavClose       { right:10px; top:10px; height:40px; width:40px; cursor:pointer; z-index:99; }
#mainNavClose .c    { right:5px; top:20px; width:30px; height:2px; background-color:#000; }
#mainNavClose .down { transform:rotate(45deg); }
#mainNavClose .up   { transform:rotate(-45deg); }

#frameSite.scroll #frameHeader      { border-bottom:2px solid #cecece; }
#frameSite.headSteps .headerHeight  { transition:none; }
#frameSite.headShrink .headerHeight { transition:height 0.4 ease-in-out; height:86px; }
#frameSite.headShrink #logoTop      { height:42px; }
/*
@media screen and (min-width:1000px) {
  #site.headShrink .headerHigh { height:86px; }
  #site.headShrink #logoTop    { height:42px; }
}
@media screen and (max-width:999px) {
  #site.headShrink .headerHigh { height:70px; }
  #site.headShrink #logoTop    { height:62px; }
}

@media screen and (min-width:1260px)                        {   }
@media screen and (min-width:1000px) and (max-width:1259px) {   }
@media screen and (min-width:700px) and (max-width:999px)   {   }
@media screen and (min-width:440px) and (max-width:699px)   {   }
@media screen and (max-width:439px)                         {   }
*/


/*content*/ /*
@media screen and (min-width:1000px) {
#contentSpacer { width:100%; height:200px; transition:height 0.4 ease-in-out; }
}
@media screen and (max-width:999px) {
#contentSpacer { width:100%; height:140px; transition:height 0.4 ease-in-out; }
}
#frameFullContent { width:100%; z-index:1; }
#articleTag       {  }

/*footer*/
#frameFooter         { width:100%; z-index:1; }
#footer              { width:100%; }
#footerTag           { display:block; position:relative; width:auto; height:auto; overflow:hidden; }
#footerLogo          { width:100%; padding:1em 0 3em; }
#footerLogoInner     { width:150px; height:128px; margin:0 auto 0; }
#footerLogoInner img { width:100%; height:auto; }
#footerBlocks        { width:100%; margin-top:20px; padding:40px 0 40px; z-index:1; border-top:2px solid #cecece; }

#footerLeft        { float:left; width:23%; }
.footerLeftItem    { width:100%; }
.footerLeftAddress { width:100%; padding-top:6px; }
.footerLeftNumbers { width:100%; padding-top:16px; }
.footerLeftPhone   { width:100%; }
.footerLeftMobile  { width:100%; }
.footerLeftDevice  { float:left; width:60px; font-weight:600; }
.footerLeftNumber  { float:left; }

.footerLeftItem:first-child { min-height:220px; }
.footerLeftItem:last-child { padding-top:5px; }

#navSocial { width:100%; padding-bottom:20px; transform:translate(-6px,0); }
#navLinks  { width:100%; transform:translate(-10px,0); }

#footerRight     { float:left; width:77%; }
.footerRightItem { float:left; width:25%; min-height:220px; }

.footerBlockTitle     { padding:5px 0 8px; font-size:13px; line-height:20px; font-weight:600; text-transform:uppercase; color:#000;  }
.footerBlockText      { font-size:13px; line-height:32px; color:#000;  }
.footerBlockText a    { text-decoration:none; color:#000;  }
.footerBlockText.left { line-height:22px; color:#000;  }

#footerLine      { width:100%; padding:20px 0 20px; z-index:1; border-top:2px solid #cecece; }
#footerLineLeft  { float:left; width:33%; font-size:14px; line-height:28px; color:#000; }
#footerLineRight { float:right; width:66%; }

@media screen and (min-width:1260px)                        {
  .footerRightItem:nth-child(1), .footerRightItem:nth-child(5) { width:30%; }
  .footerRightItem:nth-child(2), .footerRightItem:nth-child(6) { width:28%; }
  .footerRightItem:nth-child(3), .footerRightItem:nth-child(7) { width:26%; }
  .footerRightItem:nth-child(4)                                { width:16%; }
	
  .footerRightItem:nth-child(5) { min-height:160px; }
  .footerRightItem:nth-child(6) { min-height:160px; }
  .footerRightItem:nth-child(7) { min-height:160px; }  
}
@media screen and (min-width:1000px) and (max-width:1259px) {   }
@media screen and (min-width:700px) and (max-width:999px)   {   }
@media screen and (min-width:440px) and (max-width:699px)   {   }
@media screen and (max-width:439px)                         {   }

  
 
/* ------------------------------------------------- Styles fuer die Top-Navigation  ------------------------------------------------ */ /*

@media screen and (min-width:1000px) {
  #navHead ul.firstul        { display:block; position:relative; width:100%; height:40px; list-style:none; overflow:visible; vertical-align:top; }
  #navHead li.first          { display:block; float:left; position:relative; height:40px; overflow:visible; }
  #navHead li.first a.f,
  #navHead li.first button.f { display:block; width:100%; height:40px; margin:0; padding:0; border:none; border-radius:0; background-color:transparent; cursor:pointer; overflow:hidden;
							   font-family: 'Montserrat', 'Times New Roman', Times, serif; font-size:30px; line-height:40px; font-weight:300; text-transform:uppercase; text-decoration:none;
							   border-radius:10px; transition: all 0.2s ease-in-out; }
  #navHead li.first .foMask  { display:block; position:absolute; top:0; width:15%; height:100%; width:20px; background-color:transparent; overflow:hidden; display:none; z-index:96;
							   transition: all 0.2s ease-in-out; }

  #navHead li.first.no a.f,
  #navHead li.first.no button.f        { color:#000; }
  #navHead li.first.act a.f,
  #navHead li.first.act button.f       { color:#000; }
  
  #navHead li.first.no a.f:hover,
  #navHead li.first.no button.f:hover,
  #navHead li.first.act a.f:hover,
  #navHead li.first.act button.f:hover  { color:#000; }
  
  #navHead li.first.no a.f:focus,
  #navHead li.first.no button.f:focus,
  #navHead li.first.act a.f:focus,
  #navHead li.first.act button.f:focus  { color:#fff; background-color:#000; outline-width:0; outline-style:none; outline-color:currentcolor; }
  #navHead li.first a.f:focus .foMask,
  #navHead li.first button.f:focus .foMask{ background-color:#000; }
  
  #navHead li.first.no a.f.blockFocus:focus,
  #navHead li.first.no button.f.blockFocus:focus    { color:#000; background-color:transparent; }
  #navHead li.first.act a.f.blockFocus:focus,
  #navHead li.first.act button.f.blockFocus:focus   { color:#000; background-color:transparent; }
  #navHead li.first a.f.blockFocus:focus .foMask,
  #navHead li.first button.f.blockFocus:focus .foMask{ background-color:transparent; }
  
  #navHead ul.secondul       { display:block; position:absolute; top:43px; padding:0; left:50%; transform:translate(-50%, 0); list-style:none; overflow:hidden; border-radius:10px; }
  #navHead li.second         { display:block; text-align:center; background-color:#000; overflow:hidden; color:#000; }
  #navHead li.second a.s     { display:block; padding:0 15px 0; margin:5px 5px; font-size:20px; line-height:30px; border-radius:10px; background-color:transparent;
						       text-transform:none; white-space:nowrap; color:#000; }
							   
  #navHead li.first:nth-child(7) ul.secondul { left:55%; transition: all 0.2s ease-in-out; }
							   
  #navHead li.second.no a.s  { text-decoration:none; color:#000; }
  #navHead li.second.act a.s { text-decoration:underline; color:#000; } 
  
  #navHead li.second:first-child { padding-top:10px; }
  #navHead li.second:last-child  { padding-bottom:10px; }
  
  #navHead li.second.no:hover a.s,
  #navHead li.second.act:hover a.s { text-decoration:underline; color:#000; }
  
  #navHead li.second a.s:focus { background-color:#fff; color:#000; outline-width:0; outline-style:none; outline-color:currentcolor; }
  #navHead li.second.no a.s:focus { text-decoration:none; color:#000; }
  #navHead li.second.act a.s:focus { text-decoration:underline; color:#000; }

  #navHead li.second a.s.blockFocus:focus { background-color:#000; color:#000; }
  #navHead li.second.no a.s.blockFocus:focus { text-decoration:none; color:#000; }
  #navHead li.second.act a.s.blockFocus:focus { text-decoration:underline; color:#000; }
  
  #navHead li.first ul.secondul       { max-height:0px; transition: all 0.3s ease-in-out; }
  #navHead li.first:hover ul.secondul { max-height:400px; transition: all 0.5s ease-in-out; }
  #navHead li.first.drop ul.secondul  { max-height:400px; transition: all 0.5s ease-in-out; }
  
  #navHead li.first button.f:focus+ul.secondul { max-height:500px; transition: all 0.5s ease-in-out; }
  #navHead li.first button.f.active+ul.secondul { max-height:500px; transition: all 0.5s ease-in-out; }
}
@media screen and (min-width:1080px) (max-width:1299px) {
  #navHead li.first:nth-child(7) ul.secondul { left:50%; }
}
@media screen and (min-width:1080px) and (max-width:1199px) {
  #navHead li.first a.f,
  #navHead li.first button.f { font-size:27px; }
  #navHead li.second a.s     { padding:0 18px 0; font-size:19px; line-height:38px; }  
}
@media screen and (min-width:1000px) and (max-width:1099px) {
  #navHead li.first a.f,
  #navHead li.first button.f { font-size:25px; }
  #navHead li.second a.s     { padding:0 15px 0; font-size:18px; line-height:36px; }
  
}
@media screen and (max-width:999px) {
  #navHead ul                  { display:block; position:relative; list-style:none; width:100%; text-align:left; overflow:hidden; }
  #navHead ul.firstul          { list-style:none; }
  #navHead li.first            { display:block; position:relative; overflow:hidden; }
  #navHead li.first a.f,
  #navHead li.first button.f   { display:block; margin:0; width:100%; box-sizing:border-box; background-color:transparent; text-align:center; cursor:pointer; overflow:hidden;
                                 font-family: 'Montserrat', 'Times New Roman', Times, serif; font-size:30px; line-height:60px; font-weight:300; text-transform:uppercase; text-decoration:none; }

  #navHead li.first.no a.f,
  #navHead li.first.no button.f        { color:#000; }
  #navHead li.first.act a.f,
  #navHead li.first.act button.f       { color:#000; }
  
  #navHead li.first.no a.f:focus,
  #navHead li.first.no button.f:focus,
  #navHead li.first.act a.f:focus,
  #navHead li.first.act button.f:focus  { color:#fff; color:#000; background-color:#000; }
  
  #navHead li.first.no a.f.blockFocus:focus,
  #navHead li.first.no button.f.blockFocus:focus    { color:#000; background-color:transparent; }
  #navHead li.first.act a.f.blockFocus:focus,
  #navHead li.first.act button.f.blockFocus:focus   { color:#000; background-color:transparent; }
  
  
  #navHead ul.secondul          { display:block; position:relative; list-style:none; overflow:hidden; }
  #navHead li.second            { display:block; position:relative; overflow:hidden; }
  #navHead li.second:last-child { margin-bottom:30px; }
  #navHead li.second a          { display:block; width:100%; background-color:transparent;
                                  font-size:21px; line-height:50px; text-transform:none; text-decoration:none; text-align:center; white-space:nowrap; }
 
  #navHead li.second.no a.s        { color:#000; }
  #navHead li.second.act a.s       { color:#000; }
  
  #navHead li.second.no a.s:focus       { color:#fff; background-color:#000; }
  #navHead li.second.act a.s:focus      { color:#fff; background-color:#000; }  
  
  #navHead li.second.no a.s.blockFocus:focus       { color:#000; background-color:transparent; }
  #navHead li.second.act a.s.blockFocus:focus      { color:#000; background-color:transparent; }
    
  #navHead li.first ul.secondul            { max-height:0;     transition: max-height 0.6s ease-out; }
  #navHead li.first.drop ul.secondul       { max-height:400px; transition: all 0.5s ease-in-out; }
  #navHead .toggelfirst.active+ul.secondul { max-height:400px; transition: max-height 0.8s ease-in-out; }
  #navHead .toggelfirst:focus+ul.secondul  { max-height:400px; transition: max-height 0.8s ease-in-out; }
}

@media screen and (min-width:1260px)                        {   }
@media screen and (min-width:1000px) and (max-width:1259px) {   }
@media screen and (min-width:700px) and (max-width:999px)   {   }
@media screen and (min-width:440px) and (max-width:699px)   {   }
@media screen and (max-width:439px)                         {   }


/* ---------------------------------------------------- Styles fuer die Fussnavigation --------------------------------------------------- */
#navFoot ul   { display:block; position:relative; float:right; width:auto; list-style:none; overflow:hidden; }
#navFoot li   { display:block; position:relative; float:left; width:auto; padding-left:20px;
                font-size:14px; line-height:28px; text-decoration:none; color:#000; }
#navFoot li a { text-decoration:none; color:#000; }

#navFoot li:first-child { padding-left:0; }

@media screen and (min-width:1260px)                        {   }
@media screen and (min-width:1000px) and (max-width:1259px) {   }
@media screen and (min-width:700px) and (max-width:999px)   {   }
@media screen and (min-width:440px) and (max-width:699px)   {   }
@media screen and (max-width:439px)                         {   }


/* ---------------------------------------------------- Styles fuer die Breadcrump-Navigation --------------------------------------------------- */
#rootline                { width:100%;  }
#rootlineInner           {  }
#rootlineInner nav       { display:block; position:relative; width:auto; overflow:hidden; }
ul.breadcrumb            { display:block; position:relative; width:auto; margin:20px 0 25px; padding:0; line-height:0; text-align:center; overflow:hidden; } 
li.breadcrumbItem        { display:inline-block; width:auto; margin:0; padding:0 4px 0; font-size:14px; line-height:24px; color:#000; overflow:hidden; } 
li.breadcrumbItem a      { text-decoration:none; color:#000;  }
li.breadcrumbItem.slash  { color:#cecece;  } 
li.breadcrumbItem.active {  }

@media screen and (min-width:1000px)                      { ul.breadcrumb {  } }
@media screen and (min-width:700px) and (max-width:999px) { ul.breadcrumb {  } }
@media screen and (max-width:699px)                       { ul.breadcrumb {  } }
 

/* ------------------------------------------------- Styles fuer die Icon-Navigation im Kopf  ------------------------------------------------ */
#navIconHead ul             { float:left; width:auto; }
#navIconHead li             { display:block; list-style:none; float:left; padding:0 0 0 20px; width:40px; height:40px; }
#navIconHead li:first-child { margin:0; }
#navIconHead li img         { width:100%; height:auto; }

#navIconHead .ico-Warenkorb span.i { background-image:url(../Images/head_cart-24.svg); }
#navIconHead .ico-Kontakt span.i { background-image:url(../Images/head_contact-24.svg); }

#navIconHead span.i { display:block; position:relative; width:40px; height:40px; background-repeat:no-repeat; background-position:8px 8px; background-size:24px 24px; overflow:hidden; }
#navIconHead span.t { display:none; }

@media screen and (min-width:1260px)                        {   }
@media screen and (min-width:1000px) and (max-width:1259px) {   }
@media screen and (min-width:700px) and (max-width:999px)   {   }
@media screen and (min-width:440px) and (max-width:699px)   {   }
@media screen and (max-width:439px)                         {   }


/* ------------------------------------------------- Styles fuer die Social-Navigation im Fuss ------------------------------------------------ */
#navSocial ul     { float:left; width:auto; }
#navSocial li     { display:block; list-style:none; float:left; width:37px; height:37px; }
#navSocial li img { width:100%; height:auto; }

#navSocial .ico-facebook span.i  { background-image:url(../Images/sm_facebook.svg); }
#navSocial .ico-pinterest span.i { background-image:url(../Images/sm_pinterest.svg); }
#navSocial .ico-instagram span.i { background-image:url(../Images/sm_instagram.svg); }
#navSocial .ico-linkedin span.i  { background-image:url(../Images/sm_linkedin.svg); }
#navSocial .ico-youtube span.i   { background-image:url(../Images/sm_youtube.svg); }
#navSocial .ico-tiktok span.i    { background-image:url(../Images/sm_tiktok.svg); }
#navSocial .ico-whatsapp span.i  { background-image:url(../Images/sm_whatsapp.svg); }

#navSocial span.i { display:block; position:relative; width:37px; height:37px; background-repeat:no-repeat; background-position:4px 4px; background-size:29px 29px; overflow:hidden; }
#navSocial span.t { display:none; }

@media screen and (min-width:1260px)                        {   }
@media screen and (min-width:1000px) and (max-width:1259px) {   }
@media screen and (min-width:700px) and (max-width:999px)   {   }
@media screen and (min-width:440px) and (max-width:699px)   {   }
@media screen and (max-width:439px)                         {   }

  
/* ------------------------------------------------- Styles Bilder im Text ------------------------------------------------ *//*
.ce-textpic { margin:0; padding:0; border:none; width:100%; }

.ce-above .ce-textpic { padding-bottom:10px; }
.ce-below .ce-textpic { padding-top:10px; }

.ce-image,
.ce-gallery { margin:0; padding:0; border:none; }

.ce-row,
.ce-outer,
.ce-inner,
.ce-column,
.ce-media,
.image                       { margin:0; padding:0; border:none; width:100%; }
.image-spacer                { width:100%; height:0; } 
.image img                   { width:100%; height:auto; }
.image-caption-spacer        { width:100%; height:0; }
.image-caption-spacer.top    { padding-bottom:0.8%; }
.image-caption-spacer.bottom {  }
.image-caption               { width:100%; box-sizing:border-box; }

.video                       { margin:0; padding:0; border:none; width:100%; }
.video-embed                 { position:relative; margin:0; padding:0; border:none; width:100%; height:auto; overflow:hidden; }
.video-embed video           { margin:0; padding:0; border:none; width:100%; }
.video-caption-spacer        { width:100%; height:0; }
.video-caption-spacer.top    { padding-bottom:0.8%; }
.video-caption-spacer.bottom {  }
.video-caption               { width:100%; box-sizing:border-box; }

.video-embed-youtube                         { background-color:#333; position:relative; width:100%; height:0; padding-bottom:52.75%; overflow:hidden; }
.video-embed-youtube iframe.video-embed-item { background-color:#333; position:absolute; top:0; left:0; width:100%; height:100%; }

.video-embed-youtube-box             { width:100%; height:auto; }
.video-embed-youtube-placeholder     { width:100%; height:auto; }
.video-embed-youtube-placeholder img { width:100%; height:auto; cursor:pointer; }

.video-embed-youtube-box .youtube-button       { top:50%; left:50%; width:79px; height:56px; cursor:pointer; z-index:2;
                                                 -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
                                                 background:url(../Images/youtube_play.png) 0 0 no-repeat; background-size:100%; }
.video-embed-youtube-box:hover .youtube-button { background:url(../Images/youtube_play_hover.png) 0 0 no-repeat; background-size:100%; }


/* ---------------------------------------------------------- Styles fuer die Schriften -------------------------------------------------------------- */
html { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight:400; line-height:1.5em; color:#000; }

.text p   { padding-bottom:0.8em; }

.text p a,
.text li a          { text-decoration:none; color:#000; padding-right:18px; font-weight:500;
                      background:url(../Images/arrow-top-right-24.svg) no-repeat right top; background-size:20px 20px; }

.text p a:hover,
.text li a:hover { text-decoration:underline; }

.text p a.a-button,
.text li a.a-button { display:inline-block; position:relative; width:auto; padding:10px 35px 10px 15px; margin:11px 1px 25px;
                      text-decoration:none; font-weight:500; color:#000;
                      background:url(../Images/arrow-top-right-24.svg) no-repeat right top; background-size:20px 20px;
                      border:1px solid #bcb1a6; background-position: right 10px top 13px; }
.text p a.a-button:hover,
.text li a.a-button:hover { margin:10px 0px 24px; border:2px solid #bcb1a6; text-decoration:none; } 
					  
.text .linkRingButton a { display:inline-block; position:relative; width:auto; padding:5px 30px 5px 10px; margin:1px;
                          font-size:0.9em; font-weight:500; text-decoration:none; color:#000;
                          background:url(../Images/arrow-top-right-24.svg) no-repeat right top; background-size:20px 20px;
                          border:1px solid #bcb1a6; background-position: right 10px top 10px; }
.text .linkRingButton a:hover { margin:0; border:2px solid #bcb1a6; }

.text .textflowRight { text-align:right; }

.text b,
.text strong { font-weight:600; }

.text .p-claim {  }
.text .p-quote {  }

.image-caption,
.video-caption { font-weight:400; }

.text h1            { font-family: 'Montserrat', 'Times New Roman', Times, serif; margin:0; padding:0; font-weight:600; letter-spacing:-1px; }
.text h1.h1-smaller { font-family: 'Montserrat', 'Times New Roman', Times, serif; margin:0; padding:0; font-weight:600; }
.text h2.h2-bigger  { font-family: 'Montserrat', 'Times New Roman', Times, serif; margin:0; padding:0; font-weight:600; letter-spacing:-1px; }
.text h2            { font-family: 'Montserrat', 'Times New Roman', Times, serif; margin:0; padding:0; font-weight:600; }
.text h2.h2-smaller { font-family: 'Montserrat', 'Times New Roman', Times, serif; margin:0; padding:0; font-weight:600; }
.text h3            { font-family: 'Montserrat', 'Times New Roman', Times, serif; margin:0; padding:0; font-weight:600; }

.text h1, .text h2   { text-align:center; }
.text h3             { text-align:left; }
.text h3.text-center { text-align:center; }

.text h1 a, .text h2.h2-bigger a, .text h2 a, .text h2.h2-smaller a, .text h3 a, .text h4 a { text-decoration:none; }

.text .headerPosition-center { text-align:center; }
.text .headerPosition-left   { text-align:left; }
.text .headerPosition-right  { text-align:right; }

@media screen and (min-width:1260px) {
.text h1, .text h2.h2-bigger  { font-size:40px; line-height:50px; }
.text h2, .text h1.h1-smaller { font-size:32px; line-height:40px; }
.text h3, .text h2.h2-smaller { font-size:24px; line-height:30px; }
.text h3.h3-smaller           { font-size:20px; line-height:26px; }
html                          { font-size:18px; line-height:1.7em; }
}
@media screen and (min-width:1000px) and (max-width:1259px) {
.text h1, .text h2.h2-bigger  { font-size:36px; line-height:46px; }
.text h2, .text h1.h1-smaller { font-size:30px; line-height:38px; }
.text h3, .text h2.h2-smaller { font-size:24px; line-height:30px; }
.text h3.h3-smaller           { font-size:20px; line-height:26px; }
html                          { font-size:18px; line-height:1.6em; }
}
@media screen and (min-width:700px) and (max-width:999px) {
.text h1, .text h2.h2-bigger  { font-size:32px; line-height:40px; }
.text h2, .text h1.h1-smaller { font-size:28px; line-height:36px; }
.text h3, .text h2.h2-smaller { font-size:22px; line-height:28px; }
.text h3.h3-smaller           { font-size:19px; line-height:25px; }
html                          { font-size:17px; line-height:1.5em; }
}
@media screen and (max-width:699px) {
.text h1, .text h2.h2-bigger  { font-size:28px; line-height:36px; }
.text h2, .text h1.h1-smaller { font-size:24px; line-height:32px; }
.text h3, .text h2.h2-smaller { font-size:20px; line-height:26px; }
.text h3.h3-smaller           { font-size:18px; line-height:24px; }
html                          { font-size:16px; line-height:1.4em; }
}

.text-left   { text-align:left; } 
.text-center { text-align:center; } 
.text-right,
.text-end    { text-align:right; } 

.text ul    { list-style-position:outside; margin-bottom:1em; }
.text ul li { font-weight:400; margin-left:36px; margin-bottom:0.3em; }
.text ul li.li-bold::marker { font-weight:600; }
							 
.text ul li ul    { margin:0 0 10px; }
.text ul li ul li { margin-left:0; }

.text ol    { list-style-position:outside; margin-bottom:1em; }
.text ol li { font-weight:400; margin-left:36px; margin-bottom:0.3em; }
.text ol li.li-bold::marker { font-weight:600; }

.text ol li ol    { margin:0 0 10px; }
.text ol li ol li { margin-left:0; }

@media screen and (min-width:1260px) and (max-width:1419px) { .text .element ul { margin-bottom:9px; } .text .element ul li { margin-left:22px; } }
@media screen and (min-width:1000px) and (max-width:1259px) { .text .element ul { margin-bottom:8px; } .text .element ul li { margin-left:20px; } }
@media screen and (min-width:700px) and (max-width:999px)   { .text .element ul { margin-bottom:7px; } .text .element ul li { margin-left:18px; } }
@media screen and (min-width:480px) and (max-width:699px)   { .text .element ul { margin-bottom:6px; } .text .element ul li { margin-left:17px; } }
@media screen and (max-width:479px)                         { .text .element ul { margin-bottom:5px; } .text .element ul li { margin-left:16px; } }
  
 
/* ------------------------------------------------- Styles fuer Buttons  ------------------------------------------------ */ /*
.button              { width:100%; height:auto; }
.button.buttonLeft   { text-align:left;   }
.button.buttonCenter { text-align:center; }
.button.buttonRight  { text-align:right;  }

.button.smoothButton a span       { padding:0 20px 1px; font-size:20px; line-height:31px; font-weight:500; vertical-align:top; }
.button.smoothButton a span.small { padding:0 10px 1px; font-size:20px; line-height:23px; font-weight:500; vertical-align:top; }

.button.buttonSpacerTop0 { margin-top:0; }
.button.buttonSpacerTop1 { margin-top:5px; }
.button.buttonSpacerTop2 { margin-top:10px; }
.button.buttonSpacerTop3 { margin-top:15px; }
.button.buttonSpacerTop4 { margin-top:20px; }
 

/* ----------------------------------------------- Styles fuer Linkbox über gesamtes Element ---------------------------------------------- */ /*
.linkCoverAll     { left:0; bottom:0; width:100%; height:100%; z-index:19; }
.linkCoverAll a   { display:block; position:absolute; left:0; top:0; width:100%; height:100%; border:0 none; outline:0 none; overflow:hidden; z-index:19;
                    text-decoration:none; color:transparent !important; }
.linkCoverAllSpan { display:block; position:relative; width:100%; height:100%; border:2px solid transparent; box-sizing:border-box; border-radius:10px; overflow:hidden;
                    text-decoration:none; color:transparent !important; }
 
.linkCoverAll a:focus .linkCoverAllSpan            { border:2px solid #000; }
.linkCoverAll a.blockFocus:focus .linkCoverAllSpan { border:2px solid transparent; }

 
/* ------------------------------------------------- Styles fuer Inhaltsblöcke ------------------------------------------------ */
.element      { width:100%; }
.elementInner {  }

.elementSpacer { width:100%; }

.elementSpaceBefore0  { margin-bottom:0; }
.elementSpaceBefore1  { margin-bottom:5px; }
.elementSpaceBefore2  { margin-bottom:10px; }
.elementSpaceBefore3  { margin-bottom:15px; }
.elementSpaceBefore4  { margin-bottom:20px; }
.elementSpaceBefore5  { margin-bottom:25px; }
.elementSpaceBefore6  { margin-bottom:30px; }
.elementSpaceBefore7  { margin-bottom:35px; }
.elementSpaceBefore8  { margin-bottom:40px; }
.elementSpaceBefore9  { margin-bottom:45px; }
.elementSpaceBefore10 { margin-bottom:50px; }
.elementSpaceBefore11 { margin-bottom:55px; }
.elementSpaceBefore12 { margin-bottom:60px; }
.elementSpaceBefore13 { margin-bottom:65px; }
.elementSpaceBefore14 { margin-bottom:70px; }
.elementSpaceBefore15 { margin-bottom:75px; }
.elementSpaceBefore16 { margin-bottom:80px; }
.elementSpaceBefore17 { margin-bottom:85px; }
.elementSpaceBefore18 { margin-bottom:90px; }
.elementSpaceBefore19 { margin-bottom:95px; }
.elementSpaceBefore20 { margin-bottom:100px; }

.elementSpaceAfter0  { margin-top:0; }
.elementSpaceAfter1  { margin-top:5px; }
.elementSpaceAfter2  { margin-top:10px; }
.elementSpaceAfter3  { margin-top:15px; }
.elementSpaceAfter4  { margin-top:20px; }
.elementSpaceAfter5  { margin-top:25px; }
.elementSpaceAfter6  { margin-top:30px; }
.elementSpaceAfter7  { margin-top:35px; }
.elementSpaceAfter8  { margin-top:40px; }
.elementSpaceAfter9  { margin-top:45px; }
.elementSpaceAfter10 { margin-top:50px; }
.elementSpaceAfter11 { margin-top:55px; }
.elementSpaceAfter12 { margin-top:60px; }
.elementSpaceAfter13 { margin-top:65px; }
.elementSpaceAfter14 { margin-top:70px; }
.elementSpaceAfter15 { margin-top:75px; }
.elementSpaceAfter16 { margin-top:80px; }
.elementSpaceAfter17 { margin-top:85px; }
.elementSpaceAfter18 { margin-top:90px; }
.elementSpaceAfter19 { margin-top:95px; }
.elementSpaceAfter20 { margin-top:100px; }
			
header        { display:block; position:relative; width:100%; margin:0; padding:0; overflow:hidden; }
.headerSpacer { width:100%; }

.headerSpaceBottom0  { padding-bottom:0.8em; }
.headerSpaceBottom1  { padding-bottom:0; }
.headerSpaceBottom2  { padding-bottom:0.1em; }
.headerSpaceBottom3  { padding-bottom:0.2em; }
.headerSpaceBottom4  { padding-bottom:0.3em; }
.headerSpaceBottom5  { padding-bottom:0.4em; }
.headerSpaceBottom6  { padding-bottom:0.5em; }
.headerSpaceBottom7  { padding-bottom:0.6em; }
.headerSpaceBottom8  { padding-bottom:0.7em; }
.headerSpaceBottom9  { padding-bottom:0.8emx; }
.headerSpaceBottom10 { padding-bottom:0.9em; }
.headerSpaceBottom11 { padding-bottom:1em; }
.headerSpaceBottom12 { padding-bottom:1.1em; }
.headerSpaceBottom13 { padding-bottom:1.2em; }
.headerSpaceBottom14 { padding-bottom:1.3em; }
.headerSpaceBottom15 { padding-bottom:1.4em; }
.headerSpaceBottom16 { padding-bottom:1.5em; }
.headerSpaceBottom17 { padding-bottom:1.6em; }
.headerSpaceBottom18 { padding-bottom:1.7em; }
.headerSpaceBottom19 { padding-bottom:1.8em; }
.headerSpaceBottom20 { padding-bottom:1.9em; }
.headerSpaceBottom21 { padding-bottom:2em; }

.additionalSpaceH0 h1,
.additionalSpaceH0 h2,
.additionalSpaceH0 h3  { margin-bottom:0.6em; }
.additionalSpaceH1 h1,
.additionalSpaceH1 h2,
.additionalSpaceH1 h3  { margin-bottom:0; }
.additionalSpaceH2 h1,
.additionalSpaceH2 h2,
.additionalSpaceH2 h3  { margin-bottom:0.2em; }
.additionalSpaceH3 h1,
.additionalSpaceH3 h2,
.additionalSpaceH3 h3  { margin-bottom:0.4em; }
.additionalSpaceH4 h1,
.additionalSpaceH4 h2,
.additionalSpaceH4 h3  { margin-bottom:0.6em; }
.additionalSpaceH5 h1,
.additionalSpaceH5 h2,
.additionalSpaceH5 h3  { margin-bottom:0.8em; }
.additionalSpaceH6 h1,
.additionalSpaceH6 h2,
.additionalSpaceH6 h3  { margin-bottom:1em; }
.additionalSpaceH7 h1,
.additionalSpaceH7 h2,
.additionalSpaceH7 h3  { margin-bottom:1.2em; }
.additionalSpaceH8 h1,
.additionalSpaceH8 h2,
.additionalSpaceH8 h3  { margin-bottom:1.4em; }
.additionalSpaceH9 h1,
.additionalSpaceH9 h2,
.additionalSpaceH9 h3  { margin-bottom:1.6em; }
.additionalSpaceH10 h1,
.additionalSpaceH10 h2,
.additionalSpaceH10 h3 { margin-bottom:1.8em; }
.additionalSpaceH11 h1,
.additionalSpaceH11 h2,
.additionalSpaceH11 h3 { margin-bottom:2em; }

.additionalTopSpaceH0 p+h1,
.additionalTopSpaceH0 p+h2,
.additionalTopSpaceH0 p+h3  { margin-top:1em; }
.additionalTopSpaceH1 p+h1,
.additionalTopSpaceH1 p+h2,
.additionalTopSpaceH1 p+h3  { margin-top:0; }
.additionalTopSpaceH2 p+h1,
.additionalTopSpaceH2 p+h2,
.additionalTopSpaceH2 p+h3  { margin-top:0.2em; }
.additionalTopSpaceH3 p+h1,
.additionalTopSpaceH3 p+h2,
.additionalTopSpaceH3 p+h3  { margin-top:0.4em; }
.additionalTopSpaceH4 p+h1,
.additionalTopSpaceH4 p+h2,
.additionalTopSpaceH4 p+h3  { margin-top:0.6em; }
.additionalTopSpaceH5 p+h1,
.additionalTopSpaceH5 p+h2,
.additionalTopSpaceH5 p+h3  { margin-top:0.8em; }
.additionalTopSpaceH6 p+h1,
.additionalTopSpaceH6 p+h2,
.additionalTopSpaceH6 p+h3  { margin-top:1em; }
.additionalTopSpaceH7 p+h1,
.additionalTopSpaceH7 p+h2,
.additionalTopSpaceH7 p+h3  { margin-top:1.2em; }
.additionalTopSpaceH8 p+h1,
.additionalTopSpaceH8 p+h2,
.additionalTopSpaceH8 p+h3  { margin-top:1.4em; }
.additionalTopSpaceH9 p+h1,
.additionalTopSpaceH9 p+h2,
.additionalTopSpaceH9 p+h3  { margin-top:1.6em; }
.additionalTopSpaceH10 p+h1,
.additionalTopSpaceH10 p+h2,
.additionalTopSpaceH10 p+h3 { margin-top:1.8em; }
.additionalTopSpaceH11 p+h1,
.additionalTopSpaceH11 p+h2,
.additionalTopSpaceH11 p+h3 { margin-top:2em; }

.additionalTopSpaceH0 ol+h1, .additionalTopSpaceH0 ul+h1,
.additionalTopSpaceH0 ol+h2, .additionalTopSpaceH0 ul+h2,
.additionalTopSpaceH0 ol+h3, .additionalTopSpaceH0 ul+h3  { margin-top:2.0em; }
.additionalTopSpaceH1 ol+h1, .additionalTopSpaceH1 ul+h1,
.additionalTopSpaceH1 ol+h2, .additionalTopSpaceH1 ul+h2,
.additionalTopSpaceH1 ol+h3, .additionalTopSpaceH1 ul+h3  { margin-top:0; }
.additionalTopSpaceH2 ol+h1, .additionalTopSpaceH2 ul+h1,
.additionalTopSpaceH2 ol+h2, .additionalTopSpaceH2 ul+h2,
.additionalTopSpaceH2 ol+h3, .additionalTopSpaceH2 ul+h3  { margin-top:1.2em; }
.additionalTopSpaceH3 ol+h1, .additionalTopSpaceH3 ul+h1,
.additionalTopSpaceH3 ol+h2, .additionalTopSpaceH3 ul+h2,
.additionalTopSpaceH3 ol+h3, .additionalTopSpaceH3 ul+h3  { margin-top:1.4em; }
.additionalTopSpaceH4 ol+h1, .additionalTopSpaceH4 ul+h1,
.additionalTopSpaceH4 ol+h2, .additionalTopSpaceH4 ul+h2,
.additionalTopSpaceH4 ol+h3, .additionalTopSpaceH4 ul+h3  { margin-top:1.6em; }
.additionalTopSpaceH5 ol+h1, .additionalTopSpaceH5 ul+h1,
.additionalTopSpaceH5 ol+h2, .additionalTopSpaceH5 ul+h2,
.additionalTopSpaceH5 ol+h3, .additionalTopSpaceH5 ul+h3  { margin-top:1.8em; }
.additionalTopSpaceH6 ol+h1, .additionalTopSpaceH6 ul+h1,
.additionalTopSpaceH6 ol+h2, .additionalTopSpaceH6 ul+h2,
.additionalTopSpaceH6 ol+h3, .additionalTopSpaceH6 ul+h3  { margin-top:2.0em; }
.additionalTopSpaceH7 ol+h1, .additionalTopSpaceH7 ul+h1,
.additionalTopSpaceH7 ol+h2, .additionalTopSpaceH7 ul+h2,
.additionalTopSpaceH7 ol+h3, .additionalTopSpaceH7 ul+h3  { margin-top:2.2em; }
.additionalTopSpaceH8 ol+h1, .additionalTopSpaceH8 ul+h1,
.additionalTopSpaceH8 ol+h2, .additionalTopSpaceH8 ul+h2,
.additionalTopSpaceH8 ol+h3, .additionalTopSpaceH8 ul+h3  { margin-top:2.4em; }
.additionalTopSpaceH9 ol+h1, .additionalTopSpaceH9 ul+h1,
.additionalTopSpaceH9 ol+h2, .additionalTopSpaceH9 ul+h2,
.additionalTopSpaceH9 ol+h3, .additionalTopSpaceH9 ul+h3  { margin-top:2.6em; }
.additionalTopSpaceH10 ol+h1, .additionalTopSpaceH10 ul+h1,
.additionalTopSpaceH10 ol+h2, .additionalTopSpaceH10 ul+h2,
.additionalTopSpaceH10 ol+h3, .additionalTopSpaceH10 ul+h3 { margin-top:2.8em; }
.additionalTopSpaceH11 ol+h1, .additionalTopSpaceH11 ul+h1,
.additionalTopSpaceH11 ol+h2, .additionalTopSpaceH11 ul+h2,
.additionalTopSpaceH11 ol+h3, .additionalTopSpaceH11 ul+h3 { margin-top:3.0em; }

/* ______________________________________________________  */ 
/* elementBreak [ break // Trennlinie } */

.elementBreak     {  }
.elementBreakLine { width:100%; height:3px; background-color:#bcb7b3; }
 
  
/* ______________________________________________________  */ 
/* elementText [ text // Text (und Überschrift) } */

.elementText {  }

.headerCenter { display:block; position:relative; overflow:hidden; }
.textBodytext { width:100%; }

.textBodytextContainer { display:flex; align-items:flex-end; width:100%; }
.textBodytextLeft      { flex: 1; }
.textBodytextRight     { width:326px; height:auto; flex-shrink:0; }

.ringSingleMaterial    { font-size:0.9em; font-weight:500; color:#bcb1a6; }
.ringSingleLinkFrame   { margin-top:15px; }
 
 
/* ______________________________________ */
/* elementImage ( image // Bild )  */

.elementImage { width:100%; }

.imageFrame { width:100%; }
.imageInner { width:100%; }

.imageInner.imageWidth0 { max-width:800px; margin: 0 auto 0; }
.imageInner.imageWidth1 { max-width:1200px; }

figure.image            { width:100%; }
figure.image img,
figure.image picture    { width:100%; height:auto; }

figcaption.imageCaption { margin:0; padding:0 0 5px; font-size:0.9em; line-height:1.2 em }

@media screen and (min-width:470px) { .elementImage figure.image+figure.image { margin-top:20px; } }
@media screen and (max-width:469px) { .elementImage figure.image+figure.image { margin-top:10px; } }


/* _____________________________ */
/* elementIcon ( icon // Icon )  */  /*
.elementIcon { width:100%; }

.iconArea      { width:100%; }
.iconAreaInner { width:auto; transition:scale 0.4s ease-in-out; }

.iconAreaInner.iconHover:hover { scale:1.15; transition:all 0.4s ease-in-out; }

.text .iconAreaInner,
.text .iconAreaInner a,
.text .iconAreaInner a figcaption.iconCaption { text-decoration:none; font-weight:400; color:#000; }

.iconAreaInner.iconMinWidth figure.iconText     { width:auto; }
.iconAreaInner.iconMinWidth figure.iconText a   { display:block; position:relative; width:100%; height:auto; overflow:hidden; }
.iconAreaInner.iconMinWidth figure.iconText img { display:block; position:relative; width:100%; height:auto; margin:0 auto 0; overflow:hidden; }

.iconAreaInner.iconMinWidth0 figure.iconText img { width:60px; }
.iconAreaInner.iconMinWidth1 figure.iconText img { width:80px; }
.iconAreaInner.iconMinWidth2 figure.iconText img { width:100px; }
.iconAreaInner.iconMinWidth3 figure.iconText img { width:120px; }
.iconAreaInner.iconMinWidth4 figure.iconText img { width:140px; }
.iconAreaInner.iconMinWidth5 figure.iconText img { width:160px; }
.iconAreaInner.iconMinWidth6 figure.iconText img { width:180px; }
.iconAreaInner.iconMinWidth7 figure.iconText img { width:200px; }

.iconAreaInner.iconMinWidth .iconCaption            { width:100%; }
.iconAreaInner.iconMinWidth.iconLeft .iconCaption   { text-align:left; }
.iconAreaInner.iconMinWidth.iconCenter .iconCaption { text-align:center; }
.iconAreaInner.iconMinWidth.iconRight .iconCaption  { text-align:right; }

.iconAreaInner.iconMaxWidth figure.iconText     { width:auto; max-width:100%; }
.iconAreaInner.iconMaxWidth figure.iconText a   { display:block; position:relative; width:100%; height:100%; overflow:hidden; }
.iconAreaInner.iconMaxWidth figure.iconText img { width:auto; max-width:100%; height:auto; }

.iconLine      { width:100%; }
.iconLineInner { width:100%; }
.iconLineItem  {  }

.iconLineInner.toHigh               { text-align:center;  }
.iconLineInner.toHigh .iconLineItem { display:inline-block; }

.iconLineInner.toWidth               { display:flex; justify-content: center; }
.iconLineInner.toWidth .iconLineItem {  }

.iconLineInner.toHigh img  { height:100%; width:auto; }
.iconLineInner.toWidth img { width:100%; height:auto; }

.iconLineInner.iconLineSpace0 .iconLineItem { margin:0; }
.iconLineInner.iconLineSpace1 .iconLineItem { margin:0 5px 0; }
.iconLineInner.iconLineSpace2 .iconLineItem { margin:0 10px 0; }
.iconLineInner.iconLineSpace3 .iconLineItem { margin:0 15px 0; }
.iconLineInner.iconLineSpace4 .iconLineItem { margin:0 20px 0; }
.iconLineInner.iconLineSpace5 .iconLineItem { margin:0 25px 0; }
.iconLineInner.iconLineSpace6 .iconLineItem { margin:0 30px 0; }

.iconImage      { width:100%; }
.iconImageInner { border-radius:10px; }

.iconImageBackground0 { background-color:transparent; }
.iconImageBackground1 { background-color:#fff; }
.iconImageBackground2 { background-color:#000; } 

.iconImageWidth0 { width:100%; }
.iconImageWidth1 { width:100%; max-width:1000px }
.iconImageWidth2 { width:100%; max-width:800px; }
.iconImageWidth3 { width:100%; max-width:600px; }
.iconImageWidth4 { width:100%; max-width:400px; }

.iconImageAlign0 { margin:0 auto 0; }
.iconImageAlign1 { float:left; } 
.iconImageAlign2 { float:right; }  

.iconLeft   { float:left; }
.iconCenter { margin-left:auto; margin-right:auto; }
.iconRight  { float:right; }

.iconMaxWidth0 { max-width:100px; }
.iconMaxWidth1 { max-width:133px; }
.iconMaxWidth2 { max-width:166px; }
.iconMaxWidth3 { max-width:200px; }
.iconMaxWidth4 { max-width:233px; }
.iconMaxWidth5 { max-width:266px; }
.iconMaxWidth6 { max-width:300px; }
.iconMaxWidth7 { max-width:333px; }
.iconMaxWidth8 { max-width:366px; }
.iconMaxWidth9 { max-width:400px; }

.iconMinWidth0 { min-width:60px; }
.iconMinWidth1 { min-width:80px; }
.iconMinWidth2 { min-width:100px; }
.iconMinWidth3 { min-width:120px; }
.iconMinWidth4 { min-width:140px; }
.iconMinWidth5 { min-width:160px; }
.iconMinWidth6 { min-width:180px; }
.iconMinWidth7 { min-width:200px; }
.iconMinWidth8 { min-width:220px; }
.iconMinWidth9 { min-width:240px; }

.iconTop0 { margin-top:0; }
.iconTop1 { margin-top:5px; }
.iconTop2 { margin-top:10px; }
.iconTop3 { margin-top:15px; }
.iconTop4 { margin-top:20px; }
.iconTop5 { margin-top:25px; }
.iconTop6 { margin-top:30px; }
.iconTop7 { margin-top:35px; }
.iconTop8 { margin-top:40px; }

.iconCaptionSpace0 { padding-top:0; }
.iconCaptionSpace1 { padding-top:5px; }
.iconCaptionSpace2 { padding-top:10px; }
.iconCaptionSpace3 { padding-top:15px; }
.iconCaptionSpace4 { padding-top:20px; }


/* _________________________*/
/*  ( video // Video )  */

.elementVideo {   }

.videoCenter {  }

.videoAccordionFrame           { width:100%; border-top:2px solid #cecece; border-bottom:2px solid #cecece; }
.videoAccordionHeader          { width:100%; padding:1em 0 1em; cursor:pointer; }
.videoAccordionHeaderInner     { width:100%; box-sizing:border-box; padding-right:30px; }
.videoAccordionHeaderPlus      { right:10px; top:1.3em; width:22px; height:22px; cursor:pointer; z-index:2; }
.videoAccordionHeaderPlus .one { left:9px; top:0; width:3px; height:21px; background-color:#999; }
.videoAccordionHeaderPlus .two { left:0; top:9px; width:21px; height:3px; background-color:#999; }
.videoAccordionAnswer          { display:grid; grid-template-rows:0fr; position:relative; width:100%; overflow:hidden;
                                 transition: grid-template-rows 0.6s /*ease-in*/ ease-in-out; }
.videoAccordionAnswer.out      { grid-template-rows:1fr;
           
		                         transition: grid-template-rows 0.6s /*ease-out*/ ease-in-out; }
.videoAccordionAnswerAnimated  { min-height:0;
                                 transition: min-height 0.6s /*ease-out*/ ease-in-out; }
.videoAccordionAnswerInner     { padding:0 30px 0 20px; border-left:3px solid #cecece; margin:0 0 30px 20px; opacity:0; transition:opacity 0.4s ease-in-out 0s; }

.videoAccordionAnswer.out .faqAnswerInner { opacity:1; transition:opacity 0.6s ease-in-out 0.4s; }

.videoYoutubeBox             { margin:0 0 24px; width:100%; height:auto; }
.videoYoutubePlaceholder     { width:100%; height:auto; }
.videoYoutubePlaceholder img { width:100%; height:auto; cursor:pointer; }
.videoYoutubeClick           { left:0; top:0; width:100%; height:100%; z-index:8; cursor:pointer; }
.videoYoutubeButton          { left:50%; top:50%; width:79px; height:56px; z-index:9; transform: translate(-50%,-50%);
                               background:url(../Images/youtube_play.png) 0 0 no-repeat; background-size:100% 100%; }

.videoYoutubeClick:hover .videoYoutubeButton { background:url(../Images/youtube_play_hover.png) 0 0 no-repeat; background-size:100% 100%; }


/* _________________________*/
/*  ( faq // FAQ Element )  */

.elementFAQ {   }

.faqFrame           { width:100%; border-top:2px solid #fff; }
.faqHeader          { width:100%; padding:1em 0 1em; cursor:pointer; }
.faqHeaderInner     { width:100%; box-sizing:border-box; padding-right:40px; }
.faqHeaderPlus      { right:10px; top:1.1em; width:22px; height:22px; cursor:pointer; z-index:2; }
.faqHeaderPlus .one { left:9px; top:0; width:3px; height:21px; background-color:#999; }
.faqHeaderPlus .two { left:0; top:9px; width:21px; height:3px; background-color:#999; }
.faqAnswer          { display:grid; grid-template-rows:0fr; position:relative; width:100%; overflow:hidden;
                      transition: grid-template-rows 0.6s /*ease-in*/ ease-in-out; }
.faqAnswer.out      { grid-template-rows:1fr;
                      transition: grid-template-rows 0.6s /*ease-out*/ ease-in-out; }
.faqAnswerAnimated  { min-height:0;
                      transition: min-height 0.6s /*ease-out*/ ease-in-out; }
.faqAnswerInner     { padding:0 30px 0 20px; border-left:3px solid #cecece; margin:0 0 30px 20px; opacity:0; transition:opacity 0.4s ease-in-out 0s;
                      font-size:0.9em; }
					  
.faqAnswer.out .faqAnswerInner { opacity:1; transition:opacity 0.6s ease-in-out 0.4s; }

.faqAnswer p:last-child { padding-bottom:0; }

.elementFAQ+.elementFAQ .faqFrame { border-top:2px solid #cecece; }

.faqHeader .faqHeaderPlus          { transform:translate(10px,0) rotate(0deg);  transition: all 0.6s /*ease-in*/ ease-in-out; }
.faqHeader.out .faqHeaderPlus      { transform:translate(10px,0) rotate(90deg); transition: all 0.6s /*ease-out*/ ease-in-out; }
.faqHeader .faqHeaderPlus .two     { opacity:1;  transition: all 0.4s ease-in 0.2s; }
.faqHeader.out .faqHeaderPlus .two { opacity:0;  transition: all 0.4s ease-out; }

.faqImagesFrame   { margin:0; }
.faqImage         { width:100%; margin-bottom:12px; }
.faqImage img     { width:100%; height:auto; }
.faqImageCaption  { width:100%; padding:4px 0 2px; font-size:0.9 em; font-weight:400; line-height:1.4em; }

.faqYoutubeBox             { width:100%; height:auto; margin:0 0 24px; }
.faqYoutubePlaceholder     { width:100%; height:auto; }
.faqYoutubePlaceholder img { width:100%; height:auto; cursor:pointer; }
.faqYoutubeClick           { left:0; top:0; width:100%; height:100%; z-index:8; cursor:pointer; }
.faqYoutubeButton          { left:50%; top:50%; width:79px; height:56px; z-index:9; transform: translate(-50%,-50%);
                             background:url(../Images/youtube_play.png) 0 0 no-repeat; background-size:100%; }
										 
.faqYoutubeClick:hover .faqYoutubeButton { background:url(../Images/youtube_play_hover.png) 0 0 no-repeat; background-size:100%; }

/* Sytyles für Youtube-Einbindung */
figure.video                 { margin:0; padding:0; border:none; width:100%; }
.videoEmbedded               { position:relative; margin:0; padding:0; border:none; width:100%; height:auto; overflow:hidden;  }
.videoEmbeddedYoutube        { position:relative; width:100%; height:0; padding-bottom:52.75%; overflow:hidden; }
.videoEmbeddedYoutube iframe { position:absolute; top:0; left:0; width:100%; height:100%; }


/* ___________________*/
/*  ( team // Team )  */

.elementTeam {  }

.teamItemFrame         { width:100%; }
.teamItemFrameInner    {  }
.teamItemContainer     { width:104%; margin-left:-2%; margin-top:-2%; }
.teamItem              { float:left; width:50%; box-sizing:border-box; padding:2%; }
.teamItemInner         {  }
.teamItemImage         { width:100%; }
.teamItemImage figure  { width:100%; display:block; margin:0; padding:0; }
.teamItemImage img     { width:100%; height:auto; display:block; margin:0; padding:0; }
.teamItemTitel         { width:100%; margin-top:20px; line-height:1.2em; font-weight:600; }
.teamItemClaim         { width:100%; font-size:0.9em; text-transform:uppercase; letter-spacing:1px; font-weight:600; color:#bcb1a6; }
.teamItemText          { width:100%; margin-top:15px; }
.teamItemLines         { width:100%; margin-top:15px; transition:all 0.7s ease-in-out; }
.teamItemLineFrame     { width:100%; min-height:48px; box-sizing:border-box; padding-left:65px; }
.teamItemLineText      { width:100%; display:none; opacity:0; transition:opacity 0.7s ease-in-out; }
.teamItemLineText.fade { opacity:1; transition:opacity 0.7s ease-in-out; }
.teamItemLineText.act  { display:block; }
.teamItemLineIcon      { left:0; top:0; width:48px; height:48px; z-index:2; }
.teamItemLineIconInner { left:50%; top:50%; transform:translate(-50%,-50%) rotate(0deg); width:100%; height:100%; cursor:pointer; z-index:3;
                         background:url(../Images/circle_arrow_232.png) no-repeat 0 0; background-size:100% 100%; }

.teamItemLineIconInner.spin { transform:translate(-50%,-50%) rotate(360deg); transition:all 1.5s ease-in-out; }

.teamItem:nth-child(3) { clear:both; float:left; }

@media screen and  (max-width:700px) {
 .teamItemContainer   { width:100%; margin-left:0; margin-top:0; }
 .teamItem            { float:none; width:100%; padding:0 0 60px; }
 .teamItem:last-child { padding:0; }
}












/* ______________________________________ */
/*  ( home_service // Home: Service-Icons ) *****    *//*
#navLinks ul                 { float:left; width:auto; }
#navLinks li                 { display:block; list-style:none; float:left; width:90px; height:117px; }
#navLinks li:nth-child(2n+2) { margin:0 0 0 20px; }
#navLinks li img             { width:100%; height:auto; }

#navLinks span.pic { display:block; position:relative; width:80px; height:80px; margin:0 5px 0;
                     background-repeat:no-repeat; background-position:0 0; background-size:80px 80px; overflow:hidden; }

#navLinks .ico-Laser- span.pic       { background-image:url(../Images/link_free_engraving.png); }
#navLinks .ico-Lebenslanger span.pic { background-image:url(../Images/link_lifetime_service.png); }
#navLinks .ico-Recycling span.pic    { background-image:url(../Images/link_recycling_gold.png); }
#navLinks .ico-Handmade span.pic     { background-image:url(../Images/link_handmade_in_germany.png); }

#navLinks span.text { display:block; position:relative; width:90px; height:37px; box-sizing:border-box; text-align:center;
                      font-size:12px; line-height:16px; font-weight:300px; color:#000; }
					  
#navLinks .ico-Laser- span.text       { padding:0 15px 0; }
#navLinks .ico-Lebenslanger span.text { padding:0; }
#navLinks .ico-Recycling span.text    { padding:0 5px 0; }
#navLinks .ico-Handmade span.text     { padding:0; }

#navLinks a,
#navLinks a span.text { text-decoration:none; color:#000; }


 
  
 
/* ---------------------------------------------------------- Styles fuer powermail ---------------------------------------------- *//*
.tx-powermail { width:100%; overflow:hidden; padding:32px 0 42px; }

.tx-powermail fieldset { border:0 none; }
.tx-powermail legend,
.tx-powermail .powermail_form>h3 { display:none; }

span.mandatory { display:none; }

.powermail_fieldset_1 { display:block; position:relative; width:100%; overflow:hidden; }
.powermail_fieldset_2 { position:relative; float:left; width:31.3333%; overflow:hidden; display:none; }
.powermail_fieldset_3 { position:relative; float:right; width:64.6666%; overflow:hidden; display:none; }
.powermail_fieldset_4 { position:relative; width:100%; overflow:hidden; display:none; }
.powermail_fieldset_5 { display:block; position:relative; width:100%; overflow:hidden; }

.powermail_fieldwrap_type_input                  { position:relative; width:100%; overflow:hidden; margin-bottom:10px; }
.powermail_fieldwrap_type_input .powermail_label { display:block; position:relative; width:100%; margin-top:2px; padding:0 0 4px; color:#000;
                                                   font-size:18px; line-height:22px; font-weight:400; overflow:hidden; } 
.powermail_fieldwrap_type_input .powermail_field { width:100%; float:right; box-shadow:none; outline:none; }
.powermail_fieldwrap_type_input .powermail_input { box-sizing:border-box; position:relative; float:right; width:100%; padding:2px 5px 2px 10px;
                                                   border:1px solid #999; border-radius:5px; box-shadow:none; outline:none;
                                                   font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size:18px; font-weight:400; line-height:40px; color:#000; } 

.powermail_fieldset_1 .powermail_fieldwrap_type_input { width:48%; float:left; }
.powermail_fieldset_1 .powermail_fieldwrap_type_input.powermail_fieldwrap_nachname { float:right; }
.powermail_fieldset_1 .powermail_fieldwrap_type_input.powermail_fieldwrap_plz { width:11%; margin-left:4%; }
.powermail_fieldset_1 .powermail_fieldwrap_type_input.powermail_fieldwrap_ort { width:35%; margin-left:2%; }
.powermail_fieldset_1 .powermail_fieldwrap_type_input.powermail_fieldwrap_telefon { float:right; }

.powermail_fieldwrap_type_textarea                     { position:relative; width:100%; overflow:hidden; margin-bottom:10px; }
.powermail_fieldwrap_type_textarea .powermail_label    { display:block; position:relative; width:100%; margin-top:2px; padding:0 0 4px;
                                                         font-size:18px; line-height:22px; font-weight:400; overflow:hidden; } 
.powermail_fieldwrap_type_textarea .powermail_field    { position:relative; width:100%; height:auto; float:right; box-shadow:none; outline:none; }
.powermail_fieldwrap_type_textarea .powermail_textarea { box-sizing:border-box; position:relative; width:100%; height:85px; padding:2px 5px 2px 10px; float:right;
                                                         border:1px solid #999; border-radius:5px; box-shadow:none; outline:none;
                                                         font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size:18px; font-weight:400; line-height:24px; color:#000; }

.powermail_fieldset_1 .powermail_fieldwrap_type_textarea { clear:both; float:left; }
.powermail_fieldset_1 .powermail_fieldwrap_type_textarea .powermail_textarea  { height:100px; }
.powermail_fieldset_2 .powermail_fieldwrap_type_textarea .powermail_textarea  { height:124px; }

.formularGreenLine { width:100%; height:20px; border-bottom:2px dotted #000; margin-bottom:20px; }

.powermail_fieldwrap_type_check                  { position:relative; width:100%; overflow:hidden; margin-bottom:20px; }
.powermail_fieldwrap_type_check .powermail_field { width:100%; float:right; box-shadow:none; outline:none; }
.powermail_fieldwrap_type_check .checkbox        {  } 
.powermail_fieldwrap_type_check .checkbox label  {  }
.powermail_fieldwrap_type_check .checkbox input  {  } 

.powermail_fieldwrap_type_check .checkLabel { display:inline-block;
                                              padding-left:10px; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size:18px; font-weight:400; line-height:40px; color:#000; } 

.powermail_fieldwrap_type_text                  { position:relative; width:100%; height:auto; overflow:hidden; }
.powermail_fieldwrap_type_text .powermail_field { position:relative; width:100%; margin-top:2px; padding:0 0 4px;
                                                  font-size:18px; line-height:22px; font-weight:400; overflow:hidden; } 

.powermail_fieldwrap_type_file                  { position:relative; width:100%; overflow:hidden; margin:0 0 10px; }
.powermail_fieldwrap_type_file .powermail_label { display:block; position:relative; float:left; width:100%; padding:7px 0 4px; color:#000;
                                                  font-size:18px; line-height:22px; font-weight:400; overflow:hidden; }
.powermail_fieldwrap_type_file .powermail_field { width:100%; float:right; box-shadow:none; outline:none; }
.powermail_fieldwrap_type_file input            { box-sizing:border-box; position:relative; float:right; width:100%; padding:5px;
                                                  border:1px solid #999; border-radius:5px; box-shadow:none; outline:none;
                                                  font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size:18px; font-weight:400; line-height:40px; color:#000; }

input[type="file" i] { appearance:none; background-color:initial; cursor:default; align-items:baseline; color:inherit; text-overflow:ellipsis;
                       text-align:start !important; padding:initial; border:initial; white-space:pre; }
 
.powermail_fieldwrap_type_submit       { position:relative; clear:both; width:100%; overflow:visible;}
.powermail_fieldwrap_type_submit div   { position:relative; width:100%; float:right; border-top:10px solid transparent; padding:0; overflow:visible;  }
.powermail_fieldwrap_type_submit input { box-sizing:border-box; -webkit-appearance:none; appearance:none; margin:0 0 10px;
                                         padding:0 30px 1px; border:2px solid transparent; overflow:hidden;
                                         text-align:center; line-height:1em; text-decoration:none; color:#000; transition:scale 0.3s ease-in-out;
										 background-color:transparent; background:url(../Images/background_button_green.svg) no-repeat 0 0; background-size:100% 100%;
										 font-size:20px; line-height:45px; font-weight:500; }
														  
.powermail_fieldwrap_type_submit input:hover            { scale:1.15; }
.powermail_fieldwrap_type_submit input:focus            { border:2px solid #000; background-color:#000;
                                                          background:url(../Images/background_button_white.svg) no-repeat 0 0; background-size:100% 100%; }
.powermail_fieldwrap_type_submit input.blockFocus:focus { border:2px solid transparent; background-color:transparent;
                                                          background:url(../Images/background_button_green.svg) no-repeat 0 0; background-size:100% 100%; }

@media screen and (min-width:700px) and (max-width:999px) {

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

}

/* Fehler */ /*
ul.powermail-errors-list,
ul.powermail-errors-list li { list-style:none !important; }

ul.powermail-errors-list { list-style-position: outside; list-style:none !important; }
 
ul.powermail-errors-list    { font-weight:500; color:#f00; }
ul.powermail-errors-list li { font-weight:500; color:#f00; }