@charset "utf-8";

/* ------- Farbcodes -------- *//*

 Rand bei Buttons normal #dbcaba;
 Rand bei Buttons aktiv #333;
 Hinntergrund Button normal #fff;
 Hintergrund Button aktiv #fff7f0;
 
   
/* --- Schriftarten lokal einbinden --- */

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

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

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

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

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

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

/* barlow-condensed-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../Fonts/barlow-condensed-v13-latin-regular.woff2') format('woff2'),
       url('../Fonts/barlow-condensed-v13-latin-regular.ttf') format('truetype');
}

/* barlow-condensed-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  src: url('../Fonts/barlow-condensed-v13-latin-500.woff2') format('woff2'),
       url('../Fonts/barlow-condensed-v13-latin-500.ttf') format('truetype');
}

/* barlow-condensed-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('../Fonts/barlow-condensed-v13-latin-600.woff2') format('woff2'),
       url('../Fonts/barlow-condensed-v13-latin-600.ttf') format('truetype');
}

/* barlow-condensed-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../Fonts/barlow-condensed-v13-latin-700.woff2') format('woff2'),
       url('../Fonts/barlow-condensed-v13-latin-700.ttf') format('truetype');
}

/* barlow-condensed-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  src: url('../Fonts/barlow-condensed-v13-latin-800.woff2') format('woff2'),
       url('../Fonts/barlow-condensed-v13-latin-800.ttf') format('truetype');
}


/* --- alle Abstaende und Raender auschalten --- */
* { margin:0; padding:0; 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; }
.crunch { height:0; }
.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; margin:0 auto 0; max-width:1300px; transition:height 0.4s ease-in-out; }

@media screen and (max-width:699px)                       { .inner { padding:0 20px 0; } .inner.full { padding:0; } }
@media screen and (min-width:700px) and (max-width:999px) { .inner { padding:0 30px 0; } .inner.full { padding:0; } }
@media screen and (min-width:1000px)                      { .inner { padding:0 40px 0; } .inner.full { padding:0; } }

.oneHalfLine    { width:100%; height:10px; }
.oneLine        { width:100%; height:20px; }
.threeHalfLine  { width:100%; height:30px; }
.twoLines       { width:100%; height:40px; }
.fiveHalfLine   { width:100%; height:50px; }
.threeLine      { width:100%; height:60px; }
.sevenHalfLine  { width:100%; height:70px; }
.fourLine       { width:100%; height:80px; }
.nineHalfLine   { width:100%; height:90px; }
.fiveLine       { width:100%; height:100px; }
.twelveHalfLine { width:100%; height:110px; }
.sixLine        { width:100%; height:120px; }

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


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

.skip-link        { display:block; position:absolute; left:50%; top:0; transform:translate(-140%, -120px); width:1px; height:1px; padding:0 20px 4px; overflow:hidden; z-index:92;
                    font-size:20px; font-weight:500; line-height:30px; color:#8cbe21; text-decoration:none; }
.skip-link:focus,
.skip-link:active { width:auto; height:auto; background-color:#8cbe21; color:#fff; border-radius:10px; transform:translate(-140%, 20px); }


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

@media screen and (max-width:999px) {
  #headerTag                    {  }
  #site .headerHigh             { height:90px;  }
  #site .headerRipHigh          { padding-bottom:3.174129%; }
  #site.headSteps .headerHigh   { transition:none; }
  #site.headShrink .headerHigh  { transition:height 0.4s ease-in-out; }
  
  #site.recipesList .headerRipHigh { padding-bottom:0; }
  #site.home .headerRipHigh        { padding-bottom:0; }
  
  #frameGroundHeader  { left:0; top:0; width:100%; z-index:91; }
  #groundHeader       { width:100%; background-color:#fff; z-index:91; }
  #groundHeaderInner  { z-index:91; }
  #groundHeaderHigh   { z-index:91; }
  #logoTop            { left:50%; top:53%; height:90%; width:auto; transform:translate(-50%, -50%); z-index:93; }
  #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; border:2px solid transparent; box-sizing:border-box; border-radius:15px; }
  #burger             { left:1px; top:53%; transform:translate(0,-40%); width:40px; height:40px; cursor:pointer; z-index:92;
                        background:url(../Images/Tofu/menu.svg) 8px 8px no-repeat; background-size:25px auto; transition:left 0.6s ease-in-out; }
  #burger.active      { left:-50px; transition:left 0.8s ease-in-out; }
  #search             { right:0; top:53%; transform:translate(0,-40%); width:40px; height:40px; cursor:pointer; transition:all 0.6s ease-in-out; z-index:92; }
  #searchOpen         { left:0; top:0; width:40px; height:40px; cursor:pointer; transition:all 0.6s ease-in-out; z-index:92;
                        background:#fff url(../Images/Tofu/search.svg) no-repeat 6px 7px; background-size:26px auto; }
  #searchClose        { left:0; top:-41px; width:40px; height:40px; cursor:pointer; transition:all 0.6s ease-in-out; z-index:92; }
  #searchClose .left  { left:4px; top:20px; width:18px; height:2px; background-color:#000; transform:rotate(-45deg); z-index:92; }
  #searchClose .right { left:16px; top:20px; width:18px; height:2px; background-color:#000; transform:rotate(45deg); z-index:92; }
  #searchInput        { left:0; bottom:0; width:100%; height:0; background-color:#fff; transform:translate(0, 0); transition:all 0.6s ease-in-out; z-index:91; }
  #searchInputInner   { padding-top:15px; padding-bottom:5px; transition:all 0.6s ease-in-out; }
  #searchField        { width:100%; max-width:400px; margin:0 auto 0; height:46px; border:2px solid rgba(219,202,186,0.5); border-radius:10px; }
  #searchFieldInner   { left:-101%; top:0; width:100%; height:46px; padding:0 60px 0 15px; box-sizing:border-box; transition:all 0.6s ease-in-out; z-index:91; }
  #searchFieldInput   { display:block; width:100%; height:46px; border:1px solid transparent; box-sizing:border-box; background-color:transparent;
                        font-size:17px; line-height:44px; vertical-align:top; }
  #searchFieldMask    { left:0; top:0; width:0; height:100%; z-index:92; } 

  #searchFieldSubmit          { right:-47px; width:46px; height:46px; transition:all 0.6s ease-in-out; z-index:92; }
  #searchFieldSubmit a        { display:block; position:relative; width:100%; height:100%; margin:0; padding:0; border:0 none; overflow:hidden;
                                outline-width:0; outline-style:none; outline-color:currentcolor; }
  #searchFieldSubmitInner     { width:46px; height:46px; cursor:pointer;
                                background:url(../Images/Tofu/search.svg) no-repeat 10px 10px; background-size:26px 26px; }
  #searchFieldSubmitInnerLink { width:46px; height:46px;
                                background:url(../Images/Tofu/search.svg) no-repeat 10px 10px; background-size:26px 26px; }
  #searchFieldErase           { right:-47px; top:0; width:46px; height:46px; cursor:pointer; transition:all 0.6s ease-in-out; z-index:92;
                                background:url(../Images/Tofu/x.svg) no-repeat 10px 11px; background-size:24px 24px; }

  #logoTop a:focus img            { border:2px solid #8cbe21; }
  #logoTop a.blockFocus:focus img { border:2px solid transparent; }

  #searchFieldInput:focus            { border:1px solid #8cbe21; outline-width:0; outline-style:none; outline-color:currentcolor; background-color:transparent; }
  #searchFieldInput.blockFocus:focus { border:1px solid transparent; background-color:transparent;  }
  
  #searchField.close.ready.active                    { border:2px solid #333; background-color:#fff7f0; }
  #searchField.close.ready.active #searchFieldInner  { left:0; }
  #searchField.close.ready.active #searchFieldMask   { width:100%; }
  #searchField.close.ready.active #searchFieldSubmit { right:-47px; }
  #searchField.close.ready.active #searchFieldErase  { right:0; }
  
  #frameGroundHeader.search #searchOpen    { top:41px; }
  #frameGroundHeader.search #searchClose   { top:0; }
  #frameGroundHeader.search #searchInput   { height:70px; transform:translate(0, 70px); }
  #frameGroundHeader.search #headerRipEdge { transform: translate(0, 70px) translate(0, 58%); }

  #searchField.open #searchFieldInner  { left:0; }
  #searchField.open #searchFieldSubmit { right:-47px; }
  #searchField.open #searchFieldErase  { right:-47px; }

  #searchField.open.ready #searchFieldSubmit { right:0; }
  #searchField.open.ready #searchFieldErase  { right:-47px; }
  
  #searchField.open.ready.active                    { border:2px solid #333; background-color:#fff7f0; }
  #searchField.open.ready.active #searchFieldMask   { width:100%; } 
  #searchField.open.ready.active #searchFieldSubmit { right:-47px; }
  #searchField.open.ready.active #searchFieldErase  { right:0; }
  
  #headerRipEdge      { left:0; bottom:0; width:100%; height:0; transform: translate(0, 58%); padding-bottom:5.4726368%; transition:all 0.6s ease-in-out; z-index:90; }
  #headerRipEdgeInner { left:0; top:0; width:100%; height:100%; background:url(../Images/Tofu/damageborder2.png) 0 0 no-repeat; background-size:100% 100%; }
  
  #frameHeader     { left:0; top:0; width:100%; height:0; z-index:94; }
 
  #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:95; }
  #maskGrey.active { width:100%; }
  #maskGrey.grey   { background-color:rgba(0,0,0,0.4); transition: background-color 0.3s ease-out; }
 
  #header            { position:absolute; right:-30px; top:0px; width:100%; max-width:0; overflow:visible;
                       background-color:#fff; transition:max-width 0.3s ease-out; z-index:96; }
  #header.active,
  #header.open       { max-width:360px; height:100%; right:0; transition: all 0.6s ease-in-out; }
  #header.low        { overflow-x:hidden; overflow-x:no-display; overflow-y:auto; }
  #headerInner       { position:relative; width:100%; min-width:260px; height:auto; overflow:visible; padding-top:80px; z-index:96; }
  #close             { right:-60px; top:24px; width:40px; height:40px; cursor:pointer; z-index:96;
                       background:url(../Images/Tofu/x.svg) no-repeat 9px 9px; background-size:21px 21px; transition:right 0.8s ease-in-out; }
  #close.active      { right:20px; transition:right 0.8s ease-in-out; }
  #navHead           { position:relative; width:100%; height:auto; overflow:hidden; }
  #navHeadInner      { position:relative; width:100%; height:auto; overflow:hidden; }
  #mobileRipEdge     { left:0; top:0; width:30px; height:100%; transform:translate(-30px, 0); z-index:96;
                       background:url(../Images/Tofu/damageborderleft.png) 0 0 no-repeat; background-size:30px 100%; }

  #maskFilterGrey        { 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:95; }
  #maskFilterGrey.active { width:100%; }
  #maskFilterGrey.grey   { background-color:rgba(0,0,0,0.4); transition: background-color 0.3s ease-out; }
 
  #filter         { position:absolute; right:-30px; top:0px; width:100%; max-width:0; overflow:visible;
                    background-color:#fff; transition:max-width 0.3s ease-out; z-index:97; }
  #filter.active,
  #filter.open    { max-width:360px; height:100%; right:0; transition: all 0.6s ease-in-out; }
  #filterPart     { position:relative; width:100%; overflow:hidden; z-index:97; }
  #filterPart.low { overflow-x:hidden; overflow-x:no-display; overflow-y:auto; }
  #filterInner    { position:relative; width:100%; min-width:260px; height:auto; overflow:hidden; padding-top:80px; z-index:97; }
  #filterTitle    { left:30px; top:30px; width:80px; height:28px;
                    font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; font-size:28px; line-height:28px; }
  #filterRipEdge  { left:0; top:0; width:30px; height:100%; transform:translate(-30px, 0); z-index:97;
                    background:url(../Images/Tofu/damageborderleft.png) 0 0 no-repeat; background-size:30px 100%; }
						
  #filterClose        { right:-60px; top:24px; width:40px; height:40px; cursor:pointer; z-index:97;
                        background:url(../Images/Tofu/x.svg) no-repeat 9px 9px; background-size:21px 21px; transition:right 0.8s ease-in-out; }
  #filterClose.active { right:20px; transition:right 0.8s ease-in-out; }
  
  #filterApplyFrame     { left:0px; bottom:0; width:100%; height:0; padding:0 30px 0; box-sizing:border-box; transition:height 1s ease-in-out; z-index:99;
                          background-color:#fff; }
  #filterApplyFrame.up  { height:104px; }
  #filterApply          { width:100%; height:54px; margin-top:20px; box-sizing:border-box; text-align:center; cursor:pointer; z-index:99;
                          background-color:#000; border:2px solid #000; border-radius:10px;  }
  #filterApplyText      { display:inline-block; width:auto; height:50px;
                          font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; font-size:20px; line-height:52px; vertical-align:top; color:#fff; }
  #filterApplyTextApply { display:inline; }
  #filterApplyTextErase { display:none; }
  #filterApplyIcon      { display:inline-block; width:36px; height:50px; background:url(../Images/Tofu/arrow-rechts-weiss.svg) no-repeat 5px 12px; background-size:31px 27px; }

  #filterApplyFrame.erase #filterApplyTextApply { display:none; }
  #filterApplyFrame.erase #filterApplyTextErase { display:inline; }
 
  #site.headShrink .headerHigh { height:50px; }
}
@media screen and (min-width:1000px) {
  #headerTag                   {  }
  #site .headerHigh            { height:180px; transition:height 0.4s ease-in-out; }
  #site .headerRipHigh         { padding-bottom:1.160156; } 
  #site.headSteps .headerHigh  { transition:none; }
  #site.headShrink .headerHigh { transition:height 0.4s ease-in-out; }
  
  #site.recipesList .headerRipHigh { padding-bottom:0; }
  #site.home .headerRipHigh        { padding-bottom:0; }
  
  #frameGroundHeader { width:100%; left:0; top:0; z-index:91; }
  #groundHeader      { width:100%; background-color:#fff; z-index:91; }
  #groundHeaderInner { z-index:91; }
  #groundHeaderHigh  { width:100%; z-index:91; }
  #logoTop           { left:50%; top:8px; height:122px; width:auto; transform:translate(-52%, 0); z-index:93; }
  #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; border:2px solid transparent; border-radius:20px; box-sizing:border-box; }
  #searchInput       { left:0; bottom:0; width:100%; height:0; background-color:#fff; transform:translate(0, 0); transition:all 0.6s ease-in-out; z-index:91; }
  #searchInputInner  { padding-top:15px; padding-bottom:25px; transition:all 0.6s ease-in-out; }
  #searchField       { width:100%; max-width:400px; margin:0 auto 0; height:46px; border:2px solid rgba(219,202,186,0.5); border-radius:10px; }
  #searchFieldInner  { left:-101%; top:0; width:100%; height:46px; padding:0 60px 0 15px; box-sizing:border-box; transition:all 0.6s ease-in-out; z-index:91; }
  #searchFieldInput  { display:block; width:100%; height:46px; box-sizing:border-box; border:1px solid transparent; background-color:transparent;
                       font-size:17px; line-height:44px; vertical-align:top; }
  #searchFieldMask   { left:0; top:0; width:0; height:100%; z-index:92; }
  
  #searchFieldSubmit          { right:-47px; width:46px; height:46px; transition:all 0.6s ease-in-out; z-index:92; }
  #searchFieldSubmit a        { display:block; position:relative; width:100%; height:100%; margin:0; padding:0; border:0 none; overflow:hidden;
                                outline-width:0; outline-style:none; outline-color:currentcolor; }
  #searchFieldSubmitInner     { width:46px; height:46px; cursor:pointer;
                                background:url(../Images/Tofu/search.svg) no-repeat 10px 10px; background-size:26px 26px; }
  #searchFieldSubmitInnerLink { width:46px; height:46px;
                                background:url(../Images/Tofu/search.svg) no-repeat 10px 10px; background-size:26px 26px; }
  #searchFieldErase           { right:-47px; top:0; width:46px; height:46px; cursor:pointer; transition:all 0.6s ease-in-out; z-index:92;
                                background:url(../Images/Tofu/x.svg) no-repeat 10px 11px; background-size:24px 24px; }

  #logoTop a:focus img            { border:2px solid #8cbe21; }
  #logoTop a.blockFocus:focus img { border:2px solid transparent; }
  
  #searchFieldInput:focus            { border:1px solid #8cbe21; outline-width:0; outline-style:none; outline-color:currentcolor; background-color:transparent; }
  #searchFieldInput.blockFocus:focus { border:1px solid transparent; background-color:transparent; }

  #searchField.close.ready.active                    { border:2px solid #333; background-color:#fff7f0; }
  #searchField.close.ready.active #searchFieldInner  { left:0; }
  #searchField.close.ready.active #searchFieldMask   { width:100%; }
  #searchField.close.ready.active #searchFieldSubmit { right:-47px; }
  #searchField.close.ready.active #searchFieldErase  { right:0; }
  
  #frameGroundHeader.search #searchInput { height:90px; transform:translate(0, 90px); }
  
  #searchField.open #searchFieldInner  { left:0; }
  #searchField.open #searchFieldSubmit { right:-47px; }
  #searchField.open #searchFieldErase  { right:-47px; }

  #searchField.open.ready #searchFieldSubmit { right:0; }
  #searchField.open.ready #searchFieldErase  { right:-47px; }
  
  #searchField.open.ready.active                    { border:2px solid #333; background-color:#fff7f0; }
  #searchField.open.ready.active #searchFieldMask   { width:100%; } 
  #searchField.open.ready.active #searchFieldSubmit { right:-47px; }
  #searchField.open.ready.active #searchFieldErase  { right:0; }
  
  #headerRipEdge      { left:0; bottom:0; width:100%; height:0; transform:translate(0, 98%); padding-bottom:1.171875%; transition:all 0.6s ease-in-out; z-index:90; }
  #headerRipEdgeInner { left:0; top:0; width:100%; height:100%; background:url(../Images/damaged-border_white_end2.png) 0 0 no-repeat; background-size:100% 100%; }

  #frameGroundHeader.search #headerRipEdge { transform: translate(0, 90px) translate(0, 98%); }

  #frameHeader { right:0; top:0; width:100%; height:0; z-index:94; }
 
  #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:95; }
  #maskGrey.active { width:100%; }
  #maskGrey.grey   { background-color:rgba(0,0,0,0.4); transition: background-color 0.3s ease-out; }
  
  #header       { position:absolute; left:0; top:140px; width:100%; height:40px; transition:height 0.4s ease-in-out; overflow:visible; z-index:96; }
  #headerInner  { position:relative; width:100%; height:40px; max-width:1300px; margin:0 auto 0; overflow:visible; z-index:96; }
  #navHead      { position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; }
  #navHeadInner { position:relative; width:100%; height:100%; box-sizing:border-box; padding:0 40px 0; overflow:visible; }

  #maskFilterGrey        { 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; }
  #maskFilterGrey.active { width:100%; }
  #maskFilterGrey.grey   { background-color:rgba(0,0,0,0.4); transition: background-color 0.3s ease-out; }
 
  #filter         { position:absolute; right:-30px; top:0px; width:100%; max-width:0; overflow:visible;
                    background-color:#fff; transition:max-width 0.3s ease-out; z-index:98; }
  #filter.active,
  #filter.open    { max-width:360px; height:100%; right:0; transition: all 0.6s ease-in-out; }
  #filterPart     { position:relative; width:100%; overflow:hidden; z-index:98; }
  #filterPart.low { overflow-x:hidden; overflow-x:no-display; overflow-y:auto; }
  #filterInner    { position:relative; width:100%; min-width:260px; height:auto; overflow:hidden; padding-top:80px; z-index:98; }
  #filterTitle    { left:30px; top:30px; width:80px; height:28px;
                    font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; font-size:28px; line-height:28px; }
  #filterRipEdge  { left:0; top:0; width:30px; height:100%; transform:translate(-30px, 0); z-index:98;
                    background:url(../Images/Tofu/damageborderleft.png) 0 0 no-repeat; background-size:30px 100%; }

  #filterClose        { right:-60px; top:24px; width:40px; height:40px; cursor:pointer; z-index:97;
                        background:url(../Images/Tofu/x.svg) no-repeat 9px 9px; background-size:21px 21px; transition:right 0.8s ease-in-out; }
  #filterClose.active { right:20px; transition:right 0.8s ease-in-out; }
  
  #filterApplyFrame     { left:0px; bottom:0; width:100%; height:0; padding:0 30px 0; box-sizing:border-box; transition:height 0.3s ease-in-out; z-index:99;
                          background-color:#fff; }
  #filterApplyFrame.up  { height:94px; }
  #filterApply          { width:100%; height:54px; box-sizing:border-box; text-align:center; cursor:pointer; z-index:99;
                          background-color:#000; border:2px solid #000; border-radius:10px; }
  #filterApplyText      { display:inline-block; width:auto; height:50px;
                          font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; font-size:20px; line-height:52px; vertical-align:top; color:#fff; }
  #filterApplyTextApply { display:inline; }
  #filterApplyTextErase { display:none; }
  #filterApplyIcon      { display:inline-block; width:36px; height:50px; background:url(../Images/Tofu/arrow-rechts-weiss.svg) no-repeat 5px 12px; background-size:31px 27px; }

  #filterApplyFrame.erase #filterApplyTextApply { display:none; }
  #filterApplyFrame.erase #filterApplyTextErase { display:inline; }
  
  #site.headShrink .headerHigh { height:87px; }
  #site.headShrink #logoTop    { height:42px; top:4px }
  #site.headShrink #header     { top:47px; }
  #site.headShrink #search     { top:47px; }
}

/*banner*/
#frameBanner    { width:100%; z-index:1; }
#banner         {  }
#banner img,
#banner picture { display:block; width:100%; height:auto; margin:0; padding:0; overflow:hidden; }

/*content*/ 
#contentSpacer       { width:100%; transition:height 0.4s ease-out; }
#contentRipSpacer    { width:100%; height:0; transition:padding 0.4s ease-in-out; }
#contentSearchSpacer { width:100%; height:0; transition:height 0.6s ease-in-out; }
#frameFullContent    { width:100%; z-index:1; }
#articleTag          {  }

@media screen and (max-width:999px) {
  #contentSearchSpacer.search { height:70px; }
}
@media screen and (min-width:1000px) {
  #contentSearchSpacer.search { height:90px; }
}

/*footer*/
#frameFooter        { width:100%; margin-top:40px; z-index:1; background-color:#fff; }
#footerRipEdge      { left:0; top:0; width:100%; height:0; transform:translate(0, -100%); padding-bottom:1.171875%; z-index:2; }
#footerRipEdgeInner { left:0; top:0; width:100%; height:100%; background:url(../Images/damaged-border_white_start2.png) 0 0 no-repeat; background-size:100% 100%; }
#footer             { padding:20px 0 20px; }
#footerTag          { display:block; position:relative; width:auto; height:auto; overflow:hidden; }
#footerLeft         { float:none; width:100%; min-height:10px; }
#logoFoot           { width:100px; margin:20px auto 0; }
#logoFoot img       { width:100%; height:auto; }
#socialFoot         { width:210px; margin:20px auto 0; }
#footerCenter       { float:none; width:100%; margin-top:20px; min-height:10px; }
#navFoot            { width:100%; margin:0; }
#footerRight        { float:none; width:100%; margin-top:10px; margin-bottom:30px; min-height:10px; }
#socialFootExtra    { display:none; }
#textFoot           { width:100%; margin-top:5px; text-align:center; 
                      font-size:16px; line-height:30px; text-decoration:none; color:#000; }
@media screen and (min-width:800px) and (max-width:999px) {
  #footer          { padding:20px 0 30px; }
  #footerLeft      { float:left; width:30%; }
  #logoFoot        { width:150px; margin:10px auto 0; }
  #socialFoot      { display:none; }
  #footerCenter    { float:left; width:33%; min-height:10px; margin-top:0; }
  #navFoot         { margin-top:65px; }
  #footerRight     { float:left; width:35%; margin-left:2%; }
  #socialFootExtra { display:block; width:150px; margin-top:83px; }
  #textFoot        { text-align:left; }
}
@media screen and (min-width:1000px) {
  #footer          { padding:20px 0 30px; }
  #footerLeft      { float:left; width:30%; }
  #logoFoot        { width:180px; margin:10px auto 0; }
  #socialFoot      { display:none; } 
  #footerCenter    { float:left; width:40%; margin-top:0; }
  #navFoot         { margin-top:93px; }
  #footerRight     { float:left; width:30%; margin:0; }
  #socialFootExtra { display:block; width:150px; margin-top:111px; }
  #textFoot        { text-align:left; }
}
  
 
/* ------------------------------------------------- Styles fuer die Top-Navigation  ------------------------------------------------ */

@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:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif;
								 font-size:26px; line-height:49px; font-weight:300; text-transform:uppercase; text-decoration:none; color:#000; }
								 
  #navHead #searchli { height:0; }

  #navHead li.first.no button.f,
  #navHead li.first.act button.f { cursor:default; }    /* nur bei permanent offenen second menu */

  /* #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:#8cbe21; }    bei permanent offenen Menü keine act Kennzeichnung nötig*/
  
  #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:#000; background-color:#8cbe21; }
  
  #navHead li.first.no a.f.blockFocus:focus,
  #navHead li.first.no button.f.blockFocus:focus,
  #navHead li.first.act a.f.blockFocus:focus,
  #navHead li.first.act button.f.blockFocus:focus { 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:20px; }
  #navHead li.second a          { display:block; width:100%; background-color:transparent; text-align:center;
                                  font-size:18px; line-height:38px; text-transform:none; text-decoration:none; color:#000; white-space:nowrap; }
 
  #navHead li.second.no a.s  { font-weight:400; }
  #navHead li.second.act a.s { font-weight:700; }
  
  #navHead li.second.no a.s:focus  { background-color:#8cbe21; }
  #navHead li.second.act a.s:focus { background-color:#8cbe21; }  
  
  #navHead li.second.no a.s.blockFocus:focus  { background-color:transparent; }
  #navHead li.second.act a.s.blockFocus:focus { background-color:transparent; }
    
  #navHead li.first ul.secondul            { max-height:0;     transition: max-height 0.6s ease-out;   max-height:400px; }
  #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:1000px) {
  #navHead ul.firstul        { display:block; position:relative; width:100%; height:40px; list-style:none; overflow:visible; text-align:center; }
  #navHead li.first          { display:inline-block; position:relative; height:40px; margin:0 10px 0; vertical-align:top; overflow:visible; }
  #navHead li.first a.f,
  #navHead li.first button.f { display:block; height:40px; margin:0; padding:0 10px 0; border:none; border-radius:10px; cursor:pointer; overflow:hidden;
                               background-color:transparent; transition: all 0.2s ease-in-out;
							   font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif;
							   font-size:30px; line-height:40px; font-weight:400; text-decoration:none; text-transform:uppercase; color:#000; }
  #navHead li.first .foMask  { display:none; }
  #navHead li.first:first-child { margin:0 10px 0 0; }
  #navHead li.first:last-child { margin:0 0 0 10px; }
  
  #navHead #searchli #searchliBut       {  }
  #navHead #searchli #searchliUp        { left:0%; top:0; width:100%; height:0; background-color:#fff; opacity:0; transition:all 0.6s ease-in-out; cursor:pointer; z-index:97; }
  #navHead #searchli #searchliUp .left  { left:32px; bottom:19px; width:18px; height:2px; background-color:#000; transform:rotate(-45deg); z-index:97; }
  #navHead #searchli #searchliUp .right { left:44px; bottom:19px; width:18px; height:2px; background-color:#000; transform:rotate(45deg); z-index:97; }
  #navHead #searchli.x #searchliUp      { height:40px; opacity:1; }
  
  /* #navHead li.first.no a.f,
  #navHead li.first.no button.f {  }
  #navHead li.first.act a.f,
  #navHead li.first.act button.f {  } */
  
  #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  { scale:1.08; }
  
  #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  { background-color:#8cbe21; outline-width:0; outline-style:none; outline-color:currentcolor; }
  
  #navHead li.first.no a.f.blockFocus:focus,
  #navHead li.first.no button.f.blockFocus:focus,
  #navHead li.first.act a.f.blockFocus:focus,
  #navHead li.first.act button.f.blockFocus:focus   { 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:#8cbe21; overflow:hidden; }
  #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; text-decoration:none; white-space:nowrap; color:#000; transition:all 0.4s ease-in-out; }

  /* Rezepte -nth() anpassen*/
  #navHead li.first:nth-child(3) ul.secondul { min-width:268px; }
							   
  /* Uerber -nth() anpassen */
  #navHead li.first:nth-child(4) ul.secondul { min-width:208px; left:55%; transition: all 0.2s ease-in-out; }
							   
  #navHead li.second.no a.s  {  }
  #navHead li.second.act a.s {  }
  
  #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 { font-weight:700; }
  
  #navHead li.second a.s:focus { background-color:#fff; outline-width:0; outline-style:none; outline-color:currentcolor; }
  #navHead li.second.no a.s:focus {  }
  #navHead li.second.act a.s:focus {  }

  #navHead li.second a.s.blockFocus:focus { background-color:#8cbe21; color:#000; }
  #navHead li.second.no a.s.blockFocus:focus {  }
  #navHead li.second.act a.s.blockFocus:focus {  }
   
  #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:1000px) and (max-width:1199px) {
  #navHead li.first a.f,
  #navHead li.first button.f { font-size:25px; }
}


/* ---------------------------------------------------- Styles fuer Fussnavigationen --------------------------------------------------- */
#navFoot ul        { display:block; position:relative; width:100%; margin:0 auto 0; list-style:none; overflow:hidden; }
#navFoot li.feet   { display:block; position:relative; float:none; width:100%; text-align:center; }
#navFoot li.feet a { display:block; width:100%; text-align:center; border-radius:15px;
                     font-size:16px; line-height:30px; text-decoration:none; color:#000; }

#navFoot li.feet:nth-child(2n+2) { width:100%; }

#navFoot li.feet a:focus            { background-color:#8cbe21; }
#navFoot li.feet a.blockFocus:focus { background-color:transparent; }

@media screen and (min-width:800px) and (max-width:999px) {
  #navFoot li.feet   { float:left; width:55%; text-align:left; }
  #navFoot li.feet a { text-align:left; }
  
  #navFoot li.feet:nth-child(2n+2) { width:45%; }
}
@media screen and (min-width:1000px) {
  #navFoot ul        { width:80%; }
  #navFoot li.feet   { float:left; width:55%; text-align:left; }
  #navFoot li.feet a { text-align:left; }

  #navFoot li.feet:nth-child(2n+2) { width:45%; }
}


/* ------------------------------------------------- Styles fuer die Social-Navigation  ------------------------------------------------ */
.socialul                { float:left; width:auto; }
.socialul li             { display:block; list-style:none; float:left; width:37px; height:37px; }
.socialul li:first-child { margin:0; }
.socialul li img         { width:100%; height:auto; }

.socialul .ico-Linkedin span.i  { background-image:url(../Images/sm_linkedin.png); }
.socialul .ico-facebook span.i  { background-image:url(../Images/sm_facebook.png); }
.socialul .ico-Instagram span.i { background-image:url(../Images/sm_instagram.png); }
.socialul .ico-Pinterest span.i { background-image:url(../Images/sm_pinterest.png); }

.socialul span.i { display:block; position:relative; width:37px; height:37px; background-repeat:no-repeat; background-position:6px 6px; background-size:25px 25px; overflow:hidden; }
.socialul span.t { display:none; }

@media screen and (max-width:799px) {
.socialul li { margin:0 10px 0; }
.socialul li:first-child { margin:0 10px 0 0; }
.socialul li:last-child { margin:0 0 0 10px; }
}


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

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

.text p a,
.text li a { text-decoration:none; font-weight:500; color:#7eab1e; background-color:transparent; }

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

.text p a:focus,
.text li a:focus { color:#000; background-color:#8cbe21; }

.text p a.blockFocus:focus,
.text li a.blockFocus:focus { color:#7eab1e; background-color:transparent; }
.text p a:hover,
.text li a:hover { text-decoration:underline; }

.p-smaller,
.s-smaller { font-size:0.8em; }

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

.text h1            { font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; margin:0; text-transform:uppercase; font-weight:400; color:#000; letter-spacing:0.5px; }
.text h1.h1-smaller { font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; margin:0; text-transform:uppercase; font-weight:400; color:#000; letter-spacing:0.5px; }
.text h2.h2-bigger  { font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; margin:0; text-transform:uppercase; font-weight:400; color:#000; letter-spacing:0.5px; }
.text h2            { font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; margin:0; text-transform:uppercase; font-weight:400; color:#000; letter-spacing:0.5px; }
.text h2.h2-smaller { font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; margin:0; text-transform:uppercase; font-weight:400; color:#000; letter-spacing:0.5px; }
.text h3            { font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; margin:0; text-transform:uppercase; font-weight:400; color:#000; letter-spacing:0.5px; }
.text h3.h3-smaller { font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; margin:0; text-transform:uppercase; font-weight:400; color:#000; letter-spacing:0.5px; }

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

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

@media screen and (max-width:439px) {
  .text h1.h1-bigger             { font-size:40px; line-height:40px; }
  .text h1, .text h2.h2-bigger   { font-size:32px; line-height:32px; }
  .text h2, .text h1.h1-smaller  { font-size:24px; line-height:24px; }
  .text h3, .text h2.h2-smaller  { font-size:21px; line-height:23px; }
  .text h3.h3-smaller            { font-size:16px; line-height:17px; }
  html                           { font-size:15px; line-height:20px; }
}
@media screen and (min-width:440px) and (max-width:699px) {
  .text h1.h1-bigger             { font-size:44px; line-height:44px; }
  .text h1, .text h2.h2-bigger   { font-size:38px; line-height:38px; }
  .text h2, .text h1.h1-smaller  { font-size:28px; line-height:28px; }
  .text h3, .text h2.h2-smaller  { font-size:22px; line-height:24px; }
  .text h3.h3-smaller            { font-size:17px; line-height:18px; }
  html                           { font-size:16px; line-height:22px; }
}
@media screen and (min-width:700px) and (max-width:999px) {
  .text h1.h1-bigger             { font-size:48px; line-height:48px; }
  .text h1, .text h2.h2-bigger   { font-size:46px; line-height:46px; }
  .text h2, .text h1.h1-smaller  { font-size:30px; line-height:30px; }
  .text h3, .text h2.h2-smaller  { font-size:26px; line-height:26px; }
  .text h3.h3-smaller            { font-size:18px; line-height:20px; }
  html                           { font-size:17px; line-height:24px; }
}
@media screen and (min-width:1000px) and (max-width:1259px) {
  .text h1.h1-bigger,
  .text h1, .text h2.h2-bigger   { font-size:54px; line-height:54px; }
  .text h2, .text h1.h1-smaller  { font-size:34px; line-height:34px; }
  .text h3, .text h2.h2-smaller  { font-size:30px; line-height:30px; }
  .text h3.h3-smaller            { font-size:18px; line-height:20px; }
  html                           { font-size:17px; line-height:24px; }
}
@media screen and (min-width:1260px) {
  .text h1.h1-bigger,
  .text h1, .text h2.h2-bigger   { font-size:60px; line-height:60px; }
  .text h2, .text h1.h1-smaller  { font-size:40px; line-height:40px; }
  .text h3, .text h2.h2-smaller  { font-size:34px; line-height:34px; }
  .text h3.h3-smaller            { font-size:20px; line-height:22px; }
  html                           { font-size:17px; line-height:24px; }
}

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

.text ul    { list-style-position:outside; }
.text ul li { margin-left:24px; padding-left:0; margin-bottom:6px; }

 
/* ----------------------------------------------- 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 #8cbe21; }
.linkCoverAll a.blockFocus:focus .linkCoverAllSpan { border:2px solid transparent; }
 

/* -----------------------------------------------   ---------------------------------------------- */
.gridHightForce { width:100%; }
.gridHightInner { width:100%; }
 
 
/* ------------------------------------------------- Styles fuer Inhaltsblöcke ------------------------------------------------ */
.text header { display:block; position:relative; width:100%; margin:0; padding:0; overflow:hidden; }

.element                           { width:100%; z-index:1; } 
.elementInnerFrame                 {  }
.elementInner                      {  } /* inner */

.element.transparent .elementInnerFrame { background-color:transparent; }
.element.white       .elementInnerFrame { background-color:#fff; }
			
.text header               { display:block; position:relative; width:100%; margin:0; padding:0; overflow:hidden; }
.text .headerSpaceBottom0  { padding-bottom:0; }
.text .headerSpaceBottom1  { padding-bottom:5px; }
.text .headerSpaceBottom2  { padding-bottom:10px; }
.text .headerSpaceBottom3  { padding-bottom:15px; }
.text .headerSpaceBottom4  { padding-bottom:20px; }
.text .headerSpaceBottom5  { padding-bottom:25px; }
.text .headerSpaceBottom6  { padding-bottom:30px; }
.text .headerSpaceBottom7  { padding-bottom:35px; }
.text .headerSpaceBottom8  { padding-bottom:40px; }
.text .headerSpaceBottom9  { padding-bottom:45px; }
.text .headerSpaceBottom10 { padding-bottom:50px; }
.text .headerSpaceBottom11 { padding-bottom:55px; }
.text .headerSpaceBottom12 { padding-bottom:60px; }
.text .headerSpaceBottom13 { padding-bottom:65px; }
.text .headerSpaceBottom14 { padding-bottom:70px; }

/* Abrisskante oben*/
.elementDamageTop      { width:100%; height:0; padding-bottom:5.4726368%; z-index:1; }
.elementDamageTopInner { left:0; top:0; width:100%; height:100%; background:url(../Images/Tofu/damagebordertop2.png) 0 0 no-repeat; background-size:100% 100%; z-index:2; }

@media screen and (min-width:1000px) {
  .elementDamageTop      { padding-bottom:1.171875%; }
  .elementDamageTopInner { background:url(../Images/damaged-border_white_start2.png) 0 0 no-repeat; background-size:100% 100%; }
}

/* Abstand oben*/ 
.elementSpacerTop { width:100%; height:0; z-index:1; }

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

/* Abrisskannte unten*/
.elementDamageBottom      { width:100%; height:0; padding-bottom:5.4726368%; z-index:1; }
.elementDamageBottomInner { left:0; bottom:0; width:100%; height:100%; background:url(../Images/Tofu/damageborder2.png) 0 0 no-repeat; background-size:100% 100%; z-index:2; }

@media screen and (min-width:1000px) {
  .elementDamageBottom      { padding-bottom:1.171875%; }
  .elementDamageBottomInner { background:url(../Images/damaged-border_white_end2.png) 0 0 no-repeat; background-size:100% 100%; }
}

/* Abstand unten*/
.elementSpacerBottom { width:100%; height:0; z-index:1;}

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

/* Abstand unter Titel in bodytext */
.text .additionalSpaceHeader0 h1,
.text .additionalSpaceHeader0 h2,
.text .additionalSpaceHeader0 h3,
.text .additionalSpaceHeader0 h4 { margin-bottom:0; }
.text .additionalSpaceHeader1 h1,
.text .additionalSpaceHeader1 h2,
.text .additionalSpaceHeader1 h3,
.text .additionalSpaceHeader1 h4 { margin-bottom:5px; }
.text .additionalSpaceHeader2 h1,
.text .additionalSpaceHeader2 h2,
.text .additionalSpaceHeader2 h3,
.text .additionalSpaceHeader2 h4 { margin-bottom:10px; }
.text .additionalSpaceHeader3 h1,
.text .additionalSpaceHeader3 h2,
.text .additionalSpaceHeader3 h3,
.text .additionalSpaceHeader3 h4 { margin-bottom:15px; }
.text .additionalSpaceHeader4 h1,
.text .additionalSpaceHeader4 h2,
.text .additionalSpaceHeader4 h3,
.text .additionalSpaceHeader4 h4 { margin-bottom:20px; }
.text .additionalSpaceHeader5 h1,
.text .additionalSpaceHeader5 h2,
.text .additionalSpaceHeader5 h3,
.text .additionalSpaceHeader5 h4 { margin-bottom:25px; }
.text .additionalSpaceHeader6 h1,
.text .additionalSpaceHeader6 h2,
.text .additionalSpaceHeader6 h3,
.text .additionalSpaceHeader6 h4 { margin-bottom:30px; }
.text .additionalSpaceHeader7 h1,
.text .additionalSpaceHeader7 h2,
.text .additionalSpaceHeader7 h3,
.text .additionalSpaceHeader7 h4 { margin-bottom:35px; }
.text .additionalSpaceHeader8 h1,
.text .additionalSpaceHeader8 h2,
.text .additionalSpaceHeader8 h3,
.text .additionalSpaceHeader8 h4 { margin-bottom:40px; }


/* ___________________________________  */ 
/* elementTitleText ( ht_text // Text ) */
.elementText        {  }
.elementTextContent { width:100%; }
 
 
/* ______________________________________________________________  */
/* elementPictureText ( ht_picture_text // Ein Text und ein Bild ) */
.elementPictureText {  }
.pictureTextFrame   {  }

/* bild */
.pictureTextImageCol          { width:45%; }
.pictureTextImageCol.leftPos  { float:left; }
.pictureTextImageCol.rightPos { float:right;  }
.pictureTextImageColInner     {  }
.pictureTextImage             { width:100%; }
.pictureTextImageInner        { width:100%; border-radius:10px; }

.pictureTextImageBackground0 { background-color:transparent; }
.pictureTextImageBackground1 { background-color:#fff; }
.pictureTextImageBackground2 { background-color:#8cbe21; } 

figure.image         { display:block; position:relative; width:100%; height:auto; overflow:hidden; }
figure.image img,
figure.image picture { display:block; position:relative; width:100%; height:auto; overflow:hidden; }

figcaption.imageCaption { display:block; position:relative; width:100%; height:auto; overflow:hidden; }

/* video */
figure.video       { display:block; position:relative; width:100%; height:auto; overflow:hidden; }
figure.video video { display:block; position:relative; width:100%; height:auto; overflow:hidden; }

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

/* youtube */
.pictureTextYoutubeFrame { margin:0; padding:0; border:none; width:100%; height:auto; }

.pictureTextYoutube       { background-color:#333; width:100%; height:0; padding-bottom:52.75%; }
.pictureTextYoutubeIFrame { background-color:#333; position:absolute; top:0; left:0; width:100%; height:100%; /* overflow:hidden ? */ }

.pictureTextYoutubeChangeBox       { width:100%; height:auto; }
.pictureTextYoutubePlaceholder     { width:100%; height:auto; }
.pictureTextYoutubePlaceholder img { width:100%; height:auto; cursor:pointer; }

.pictureTextYoutubeChangeBox .pictureTextYoutubeButton       { top:50%; left:50%; width:79px; height:56px; cursor:pointer; transform: translate(-50%,-50%); z-index:2;
                                                               background:url(../Images/youtube_play.png) 0 0 no-repeat; background-size:100%; }
.pictureTextYoutubeChangeBox:hover .pictureTextYoutubeButton { background:url(../Images/youtube_play_hover.png) 0 0 no-repeat; background-size:100%; }
      
/* test */
.pictureTextContentCol          { width:45%; }
.pictureTextContentCol.rightPos { float:right; } 
.pictureTextContentCol.leftPos  { float:left; }
.pictureTextContentColInner     {  }
.pictureTextContent             { width:100%; }
.pictureTextContentInner        {  }

@media screen and  (max-width:699px) {
  .pictureTextImageCol { width:100%; margin-bottom:20px; }
  .pictureTextContentCol { width:100%; }
  .pictureTextContentCol.forcedCenter .pictureTextContentInner { text-align:center !important; }
  .pictureTextContentCol.forcedLeft .pictureTextContentInner { text-align:left !important; }
  .pictureTextContentCol.forcedRight .pictureTextContentInner { text-align:right !important; }
}


/* ___________________________________________________ */
/* elementIcon ( ht_icon // Einzelnes Bild oder Icon ) */

.elementPicture {  }

/* Image */
.pictureImage      { width:100%; }
.pictureImageInner { border-radius:10px; }

.pictureImageBackground0 { background-color:transparent; }
.pictureImageBackground1 { background-color:#fff; }
.pictureImageBackground2 { background-color:#8cbe21; } 

.pictureImageWidth0 { width:100%; }
.pictureImageWidth1 { width:80%; }
.pictureImageWidth2 { width:66%; }
.pictureImageWidth3 { width:50%; }
.pictureImageWidth4 { width:33%; }
.pictureImageWidth5 { width:20%; }

.pictureImageMaxWidth0 {  }
.pictureImageMaxWidth1 { max-width:1040px }
.pictureImageMaxWidth2 { max-width:858px; }
.pictureImageMaxWidth3 { max-width:650px; }
.pictureImageMaxWidth4 { max-width:429px; }
.pictureImageMaxWidth5 { max-width:260px; }

.pictureImageAlign0 { margin:0 auto 0; }
.pictureImageAlign1 { float:left; } 
.pictureImageAlign2 { float:right; } 

figure.image,
figure.image img,
figure.image picture { display:block; position:relative; width:100%; height:auto; overflow:hidden; }

figcaption.imageCaption { display:block; position:relative; width:100%; height:auto; overflow:hidden; }

/* picture */
.pictureIcon                { width:100%; }
.pictureIconInner           { width:auto; transition:scale 0.4s ease-in-out; }
.pictureIconInner.iconHover { scale:1.15; transition:all 0.4s ease-in-out; }

.pictureIconInner.iconMaxWidth
.pictureIconInner.iconMinWidth

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

figure.icon,
figure.icon a,
figure.icon img,
figure.icon picture { display:block; position:relative; width:100%; height:auto; overflow:hidden; }

figcaption.iconCaption { display:block; position:relative; width:100%; height:auto; overflow:hidden; }

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

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

.iconIcon.iconMinWidth figure.icon         { width:auto; }
.iconIcon.iconMinWidth figure.icon a       { display:block; position:relative; width:100%; height:auto; overflow:hidden; }
.iconIcon.iconMinWidth figure.icon img,
.iconIcon.iconMinWidth figure.icon picture { display:block; position:relative; width:100%; height:auto; margin:0 auto 0; overflow:hidden; }

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

 
/* _______________________________________________ */
/* elementButton ( ht_button // Einzelner Button ) */
.button                   { width:100%; }
.buttonFrame              { width:100%; height:auto; padding:5px 0 5px; }
.buttonFrame.buttonLeft   { text-align:left;   }
.buttonFrame.buttonCenter { text-align:center; }
.buttonFrame.buttonRight  { text-align:right;  }
.buttonInner              { display:inline-block; width:auto; height:auto;  }

.greenSmoothButton .buttonLink                  { display:block; padding:1px 30px 0; border:2px solid #8cbe21; overflow:hidden;
                                                  font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; letter-spacing:0.5px;
                                                  text-align:center; text-decoration:none; color:#000; transition:scale 0.3s ease-in-out;
                                                  background-color:#8cbe21; border-radius:10px; line-height:1em;
												  font-size:20px; line-height:44px; font-weight:500; vertical-align:top; }
.greenSmoothButton .buttonLink:hover            { scale:1.08; transition:scale 0.4s ease-in-out; }
.greenSmoothButton .buttonLink:focus            { border:2px solid #000; }
.greenSmoothButton .buttonLink.blockFocus:focus { border:2px solid #8cbe21; }
.greenSmoothButton .buttonLink .buttonChevron   { display:inline-block; width:25px; height:34px; background:url(../Images/Tofu/arrow-rechts.svg) no-repeat 5px 11px; background-size:20px auto; vertical-align:top; }

.blackSmoothButton .buttonLink                  { display:block; padding:1px 30px 0; border:2px solid #000; overflow:hidden;
                                                  font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; letter-spacing:0.5px;
                                                  text-align:center; text-decoration:none; color:#fff; transition:scale 0.3s ease-in-out;
                                                  background-color:#000; border-radius:10px; line-height:1em;
                                                  font-size:20px; line-height:44px; font-weight:500; vertical-align:top; }
.blackSmoothButton .buttonLink:hover            { scale:1.08; transition:scale 0.4s ease-in-out; }
.blackSmoothButton .buttonLink:focus            { background-color:#8cbe21; color:#000; }
.blackSmoothButton .buttonLink.blockFocus:focus { background-color:#000; color:#fff; }
.blackSmoothButton .buttonLink .buttonChevron   { display:inline-block; width:25px; height:40px; background:url(../Images/Tofu/arrow-rechts-weiss.svg) no-repeat 5px 11px; background-size:20px auto; vertical-align:top; }

.narrowButton .buttonLink { padding:0 12px 2px; font-size:18px; line-height:39px; }

 
/* ____________________________________________________________________________________________ */
/* elementPanel ( ht_panels // Schaltfläche mit Hintergrundbild oder Schaltfläche nebeneinander */
.elementPanel {  }

.elementInnerFrame          {  }
.elementInner               {  }

.element.transparent .elementInnerFrame.fullBack { background-color:rgba(0,0,0,0.55); }

/*Schaltfläche mit Hintergrund*/
.elementPanelFullBack { left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover;  }

.elementPanelBackpicFrame         {  }
.elementPanelBackpicFrame.back    { border-radius:10px; background-repeat:no-repeat; background-position:center center; background-size:cover; }
.elementPanelBackpic              {  }
.elementPanelBackpic.back         { background-color:rgba(0,0,0,0.55); }
.elementPanelBackpicSpacer        { width:100%; height:0; }
.elementPanelBackpicSpacer.top    { padding-bottom:30px; }
.elementPanelBackpicSpacer.bottom { padding-bottom:30px; }
.elementPanelBackpicInner         { margin:0 20px 0;}

.elementPanelBackpicTextLine      { width:100%; text-align:center; 
                                    font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; font-size:20px; line-height:22px;
									text-transform:uppercase; font-weight:400; color:#8cbe21; letter-spacing:0.5px; }
.elementPanelBackpicTextLineSpace { width:100%; height:0; padding-bottom:15px; }
.elementPanelBackpicText          { text-align:center; color:#fff; }
.elementPanelBackpicTextSpace     { width:100%; height:0; padding-bottom:10px; }

.elementPanelBackpicButton {  }

.text .elementPanelBackpicText h1,
.text .elementPanelBackpicText h2,
.text .elementPanelBackpicText h3,
.text .elementPanelBackpicText h4 { color:#fff; }


/* Schaltfläche Elemente nebeneinander */
.elementPanelSplitFrame { width:100%; max-width:600px; margin:0 auto 0; z-index:2; }

.elementPanelSplitLeft { left:0; top:0; width:62%; height:100%; bottom:1px solid red; box-sizing:border-box; z-index:1; }

.elementPanelSplitUp      { left:0; top:0; width:100%; height:53%; }
.elementPanelSplitUpInner { left:0; bottom:0; width:100%; height:auto;  }
.elementPanelSplitUpWidth { margin:0 20px 0; text-align:center; }

.elementPanelSplitDown      { left:0; bottom:0; width:100%; height:45%; }
.elementPanelSplitDownInner { left:0; top:0; width:100%; height:auto; text-align:center; }

.elementPanelSplitRight         { float:right; width:45%; min-height:150px; z-index:2; }
.elementPanelSplitInner         { width:100%; }
.elementPanelSplitInner img,
.elementPanelSplitInner picture { width:100%; height:auto; }

 
/* __________________________________________________________________ */
/* elementProducsLink ( ht_products // Verlinkte Elemente zu Produkte */
.productsLinkHeader      { width:100%;  }
.productsLinkHeaderInner { width:75%; margin:0 auto 0; text-align:center;  }
.productsLinkHeaderSpace { width:100%; height:0; padding-bottom:15px; }

.productsLinkFrame { width:100%; text-align:center; vertical-align:bottom; letter-spacing:0; padding:0; line-height:0; }

.productsLinkItem              { display:inline-block; width:50%; }
.productsLinkItemSpacer        { width:100%; height:0; }
.productsLinkItemSpacer.top    { padding-bottom:5px; }
.productsLinkItemSpacer.bottom { padding-bottom:10px; }
.productsLinkItemInner         { padding:0 5px 0; }
.productsLinkItemImage         { width:80%; margin:0 auto 0; }
.productsLinkItemImage img,
.productsLinkItemImage picture { display:block; margin:0; padding:0; width:100%; height:auto; overflow:hidden; }
.productsLinkItemBeriefSpacer  { width:100%; height:0; padding-bottom:3%; }
.productsLinkItemBerief        { width:100%; text-align:center; font-size:14px; line-height:18px; color:#777; }
.productsLinkItemTitleSpacer   { width:100%; height:0; padding-bottom:1.5%; }
.productsLinkItemTitle         { width:100%; min-height:36px; text-align:center; 
                                 font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; font-size:16px; line-height:18px; letter-spacing:0.5px; }

@media screen and (min-width:700px) {
  .productsLinkItem       { width:33.3333%; }
  .productsLinkItemBerief { font-size:17px; line-height:22px; }
  .productsLinkItemTitle  { font-size:24px; line-height:26px; min-height:52px;  }
}
@media screen and (min-width:1000px) {
  .productsLinkItem { width:25%; }
}


/* __________________________________________________ */
/* elementRecipes ( ht_recipes // Tofu Detail: Rezept */

.detailBanner              { width:100%;  }
.detailBannerSpacer        { width:100%; height:0; }
.detailBannerSpacer.top    { padding-bottom:20px; }
.detailBannerSpacer.bottom { padding-bottom:15px; }
.detailBannerInner         { width:auto; padding:0 20px 0; }
.detailBannerImage         {  }
.detailBannerImage img,
.detailBannerImage picture { display:block; margin:0; padding:0; width:100%; height:auto;  border-radius:10px; overflow:hidden; }

@media screen and (min-width:700px) {
  .detailBannerSpacer.top,
  .detailBannerSpacer.bottom { padding-bottom:0; }
  .detailBannerInner         { padding:0; }
  .detailBannerImage         {  }
  .detailBannerImage img,
  .detailBannerImage picture { border-radius:0; }
}

.detailBannerButtonFrame          { left:0; top:0; width:100%; height:100%; z-index:2; }
.detailBannerButtonBack           { left:20px; top:20px; width:40px; height:40px;                                                                display:none; }
.detailBannerButtonBack button    { display:block; position:relative; width:40px; height:40px; overflow:hidden;
                                    background:transparent url(../Images/Tofu/circle-weiss.svg) no-repeat 0 0; background-size:40px 40px; } /* onclick="history.back() */
.detailBannerButtonBackInner      { display:block; position:relative; width:40px; height:40px; overflow:hidden; z-index:3;
                                    background:url(../Images/Tofu/arrow-links.svg) no-repeat 9px 9px; background-size:23px 21px;  }
.detailBannerButtonNotepad        {                                                                                                             display:none; } /* abhi */
.detailBannerButtonNotepad button {  } /* onclick="detailRecipeNotepad() */
.detailBannerButtonNotepadInner   {  }

.detailRecipe      { width:100%; }
.detailRecipeInner {  } /* inner */

.detailRecipeVotesSpacer { width:100%; height:0;                                                                                                display:none; }
.detailRecipeVotes       {  }

.detailRecipeTitleSpacer  { width:100%; height:0; padding-bottom:10px; }
.detailRecipeTitle        { width:100%; text-align:center; }

.detailRecipePropetiesSpacer         { width:100%; height:0; padding-bottom:21px; }
.detailRecipePropeties               { width:100%; text-align:center; }
.detailRecipePropetiesText           { display:inline-block; height:30px; margin-bottom:2px; line-height:32px; } 
.detailRecipePropetiesCat            { display:inline-block; width:36px; height:32px; }
.detailRecipePropetiesCatInner       { margin:0 2px 0; width:32px; height:32px; }
.detailRecipePropetiesCatInner.vega  { background:url(../Images/Tofu/prop-vegan_background.svg) no-repeat 0 0; background-size:100% 100%; }
.detailRecipePropetiesCatInner.vege  { background:url(../Images/Tofu/prop-vegetarisch_dummy.png) no-repeat 0 0; background-size:100% 100%; }
.detailRecipePropetiesCatInner.glut  { background:url(../Images/Tofu/prop-glutenfrei_background.svg) no-repeat 0 0; background-size:100% 100%; }
.detailRecipePropetiesCatInner.lakt  { background:url(../Images/Tofu/prop-laktosefrei_background.svg) no-repeat 0 0; background-size:100% 100%; }

.detailRecipeTextSpacer { width:100%; height:0; padding-bottom:20px; }
.detailRecipeText       { width:100%; }
.detailRecipeTextInner  { width:100%; text-align:center; }

.detailRecipeIDSpacer { width:100%; height:0; padding-bottom:20px; }
.detailRecipeID       { width:100%; text-align:center; }
.detailRecipeIDInner  { display:inline-block; width:auto; height:auto; padding:0 20px 1px; border:2px solid transparent; text-align:center; overflow:hidden;
                        font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; font-size:21px; line-height:40px; font-weight:400; color:#000; letter-spacing:0.5px;
						background-color:transparent; background:url(../Images/background_button_green.png) no-repeat 0 0; background-size:100% 100%; }

.detailRecipeTimeSpacer { width:100%; height:0; padding-bottom:20px; }
.detailRecipeTimeFrame  { width:100%; }
.detailRecipeTime       { width:100%; max-width:500px; margin:0 auto 0; }

.detailRecipeTime33First        { float:left; width:33.3333%; border-right:1px solid #dbcaba; box-sizing:border-box; }
.detailRecipeTime33First .title { font-size:14px; line-height:20px; font-weight:700; text-align:center; }
.detailRecipeTime33First .time  { font-size:14px; line-height:20px; font-weight:400; text-align:center; }

.detailRecipeTime33Second        { float:left; width:33.3333%; border-right:1px solid #dbcaba; box-sizing:border-box; }
.detailRecipeTime33Second .title { font-size:14px; line-height:20px; font-weight:700; text-align:center; }
.detailRecipeTime33Second .time  { font-size:14px; line-height:20px; font-weight:400; text-align:center; }

.detailRecipeTime33Third        { float:left; width:33.3333%; }
.detailRecipeTime33Third .title { font-size:14px; line-height:20px; font-weight:700; text-align:center; }
.detailRecipeTime33Third .time  { font-size:14px; line-height:20px; font-weight:400; text-align:center; }

.detailRecipeTimeFull        { width:100%; }
.detailRecipeTimeFull .title { font-size:14px; line-height:20px; font-weight:700; text-align:center; }
.detailRecipeTimeFull .time  { font-size:14px; line-height:20px; font-weight:400; text-align:center; }

.detailRecipeCardswitchSpacer     { width:100%; height:0; padding-bottom:30px; }
.detailRecipeCardswitch           { width:100%; }
.detailRecipeCardswitchInner      { width:100%; max-width:400px; margin:0 auto 0; }
.detailRecipeCardswitchBack       { width:100%; background-color:#fff; border-radius:10px; }
.detailRecipeCardswitchButtons    { margin:5px; }
.detailRecipeCardswitchButton     { float:left; width:50%; height:50px; background-color:#fff; border-radius:10px; text-align:center;
                                    font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; margin:0; text-transform:uppercase;
							   	    font-size:20px; line-height:50px; font-weight:400; color:#000; letter-spacing:0.5px; cursor:pointer; }
.detailRecipeCardswitchButton.act { background-color:#000; color:#fff; cursor:default; }
#cardSwitchIngre                  {  }
#cardSwitchPrep                   {  }

.detailRecipeCardswitchFrame        { width:100%; }
.detailRecipeCardswitchShift.first  { width:200%; left:0%;  transition:left 1s ease-in-out; }
.detailRecipeCardswitchShift.second { width:200%; left:-100%; transition:left 1s ease-in-out; }

.detailRecipeCardswitchShift.first .detailRecipeCardswitchIngre  { position:relative; float:left; width:50%; overflow:hidden;  }
.detailRecipeCardswitchShift.second .detailRecipeCardswitchIngre { position:absolute; left:0; top:0; width:50%; overflow:hidden; }

.detailRecipeSwitchSpacer { width:100%; height:0; padding-bottom:30px; }
.detailRecipeSwitch       { width:100%; }
.detailRecipeSwitchInner  { width:100%; max-width:400px; margin:0 auto 0; padding:0 20px 0; box-sizing:border-box; }

.detailRecipeSwitchLeft   { float:left; width:50%;  }
.detailRecipeSwitchText   { float:left; width:100%; max-width:170px; }
.detailRecipeSwitchTitle  { width:100%; text-align:left; }
.detailRecipeSwitchLine   { width:100%; text-align:left;  }

.detailRecipeSwitchNumber {  }
.detailRecipeSwitchLable  {  }

.detailRecipeSwitchRight         { float:right; width:50%; height:50px; }
.detailRecipeSwitchButton        { float:right; width:100%; max-width:170px; height:50px; }
.detailRecipeSwitchButton span   { display:none; }
.detailRecipeSwitchButtonLower   { right:70.5882%; top:0; width:29.4117%; height:50px; border-radius:10px; background-color:#000; cursor:pointer; }
.detailRecipeSwitchButtonHigher  { right:0; top:0; width:29.4117%; height:50px; border-radius:10px; background-color:#000; cursor:pointer; }
.detailRecipeSwitchButton .bar   { left:15px; top:24px; width:20px; height:2px; background-color:#fff; z-index:3; }
.detailRecipeSwitchButton .cross { left:24px; top:15px; width:2px; height:20px; background-color:#fff; z-index:4; }
.detailRecipeSwitchNumberField   { right:35.2941%; top:0; width:29.4117%; height:50px; border:1px solid #000; box-sizing:border-box; border-radius:10px; background-color:#fff;
                                   text-align:center; font-size:20px; line-height:48px; }

.detailRecipeListsSpacer { width:100%; height:0; padding-bottom:20px; }
.detailRecipeLists       { width:100%; }
.detailRecipeListsInner  { padding:0 10px 0; }

.detailRecipeListSpacer       { width:100%; height:0; padding-bottom:10px; }
.detailRecipeList             { width:100%; }
.detailRecipeListInner        { width:100%; }
.detailRecipeListHead         { width:100%; min-height:25px; }
.detailRecipeListHeadTitle    { width:100%; padding-right:96px; box-sizing:border-box; }
.detailRecipeListHeadTitle h3 {  }
.detailRecipeListHeadClaim    { right:0; top:0; width:86px; height:24px; font-size:17px; line-height:25px; text-align:right; color:#777; z-index:2; }

.detailRecipeListIingredients      { width:100%; }
.detailRecipeListIingredientsInner { width:100%; }

.detailRecipeListIingredientsItem        { width:100%; padding:16px 0 18px; border-bottom:1px solid #dbcaba; }
.detailRecipeListIingredientsItemLine    { width:100%; padding-right:40px; box-sizing:border-box;  }
.detailRecipeListIingredientsItemValue   { font-size:16px; font-weight:700; line-height:20px; }
.detailRecipeListIingredientsItemUnit    { font-size:16px; font-weight:700; line-height:20px; }
.detailRecipeListIingredientsItemText    { font-size:16px; line-height:20px; }
.detailRecipeListIingredientsItemBox     { right:0; top:15px; width:28px; height:28px; border:1px solid #dbcaba; border-radius:10px; background-color:#fff; cursor:pointer; z-index:2; }
.detailRecipeListIingredientsItemCheck   { display:none; }
.detailRecipeListIingredientsEraseSpacer { width:100%; height:0; padding-bottom:20px; }
.detailRecipeListIingredientsErase       { width:100%; }

.detailRecipeListIingredientsItemBox.act .detailRecipeListIingredientsItemCheck { display:block; left:7px; top:7px; width:13px; height:7px; transform:rotate(-45deg);
                                                                                  border-left:3px solid #000; border-bottom:3px solid #000; z-index:3; }

.detailRecipeEraseButton     { display:block; position:relative; width:180px; height:40px; background-color:#000; border:0 none; border-radius:10px; overflow:hidden;
                               font-size:14px; line-height:40px; color:#fff; padding-left:10px; text-align:left; box-sizing:border-box; cursor:pointer; }
.detailRecipeEraseButton .one { right:13px; top:20px; width:14px; height:2px; transform:rotate(-45deg); background-color:#fff; z-index:2; }
.detailRecipeEraseButton .two { right:13px; top:20px; width:14px; height:2px; transform:rotate(45deg); background-color:#fff; z-index:3; }

.detailRecipeCardswitchShift.first .detailRecipeCardswitchPrep  { position:absolute; right:0; top:0; width:50%; overflow:hidden; }
.detailRecipeCardswitchShift.second .detailRecipeCardswitchPrep { position:relative; float:right; width:50%; overflow:hidden; }

.detailRecipePreparationLine { display:none; }

.detailRecipePreparationSpacer { width:100%; height:0; padding-bottom:30px; }
.detailRecipePreparationTitle  { display:none; }
.detailRecipePreparation       { width:100%; }
.detailRecipePreparationInner  { padding:0 10px 0; }

.detailRecipePreparationHead      { width:100%; min-height:25px; }
.detailRecipePreparationHeadClaim { right:0; top:0; width:86px; height:24px; font-size:17px; line-height:25px; text-align:right; color:#777; z-index:2; }

.detailRecipePreparationItem        { width:100%; padding:20px 0 20px; border-bottom:1px solid #dbcaba; }
.detailRecipePreparationItemInner   { width:100%; }
.detailRecipePreparationText        { width:100%; padding:0 40px 0; box-sizing:border-box; }
.detailRecipePreparationTextInner   { width:100%; font-size:16px; font-weight:400; line-height:22px; }
.detailRecipePreparationBox         { right:0; top:0; width:28px; height:28px; border:1px solid #dbcaba; border-radius:10px; background-color:#fff; cursor:pointer; z-index:2; }
.detailRecipePreparationCheck       { display:none; }
.detailRecipePreparationNumber      { left:0; top:0; width:30px; height:30px; border-radius:10px; background-color:#fff; z-index:2; }
.detailRecipePreparationNumberInner { left:0; top:0; width:30px; height:30px; font-size:17px; line-height:30px; font-weight:700; text-align:center; color:#000;  } 

.detailRecipePreparationBox.act .detailRecipePreparationCheck { display:block; left:7px; top:7px; width:13px; height:7px; transform:rotate(-45deg);
                                                                border-left:3px solid #000; border-bottom:3px solid #000; z-index:3; } 

.detailRecipePreparationListSpacer { width:100%; height:0; }
.detailRecipePreparationList       { width:100%;  }
.detailRecipePreparationListInner  { padding:0 40px 0; font-size:16px; font-weight:400; line-height:22px; }

.detailRecipePreparationListValue   { font-weight:700; color:#888; }
.detailRecipePreparationListUnit    { font-weight:700; color:#888; }
.detailRecipePreparationListText    { color:#888; }

.detailRecipePreparationEndSpacer { width:100%; height:0; padding-bottom:30px; }
.detailRecipePreparationEnd       { width:100%; text-align:center; }
.detailRecipePreparationEndClaim  { display:inline-block; }
.detailRecipePreparationEndText   { display:inline-block; width:auto; height:34px; padding-right:10px;
                                    font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; font-size:28px; line-height:34px; letter-spacing:0.5px; }
.detailRecipePreparationEndIcon   { display:inline-block; width:34px; height:34px; background:url(../Images/Tofu/party.svg) no-repeat 0 0; background-size:100% 100%; }

.detailRecipePreparationEraseSpacer { width:100%; height:0; padding-bottom:20px; }
.detailRecipePreparationErase       { width:100%; }

.detailRecipePreparationEndExtraFrameSpacer { width:100%; height:0; padding-bottom:50px; }
.detailRecipePreparationEndExtraFrame       { display:none; /*border-top:1px solid #dbcaba;*/ }
.detailRecipePreparationEndExtraSpacer      { width:100%; height:0; padding-bottom:30px; }
.detailRecipePreparationEndExtra            { width:100%; text-align:center; }

.detailRecipeNutritionsSpacer { width:100%; height:0; padding-bottom:30px; }
.detailRecipeNutritions       { width:100%; }
.detailRecipeNutritionsInner  { padding:0 10px 0; font-size:16px; color:#777; }

.detailRecipePreparationTippsSpacer { width:100%; height:0; padding-bottom:30px; }
.detailRecipePreparationTipps       { width:100%; }
.detailRecipePreparationTippsInner  { padding:0 10px 0; }
.detailRecipePreparationTippsHeader { width:100%; text-align:left; padding-bottom:10px;
                                      font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; font-size:28px; line-height:28px; letter-spacing:0.5px; }
									  
.text ul.detailRecipePreparationTippsList    { list-style-position:outside; }
.text ul li.detailRecipePreparationTippsItem { margin-left:24px; padding:0; }

/* Product */
.detailRecipeProductsTopSpacer     { width:100%; height:0; padding-bottom:70px; }
.detailRecipeProductsDamage        {  }
.detailRecipeProductsDamage.top    { width:100%; height:0; padding-bottom:5.4726%; background:url(../Images/Tofu/damagebordertop2.png) no-repeat 0 0; background-size:100% 100%; }
.detailRecipeProductsDamage.bottom { width:100%; height:0; padding-bottom:5.4726%; background:url(../Images/Tofu/damageborder2.png) no-repeat 0 0; background-size:100% 100%; }
.detailRecipeProducts              { width:100%; background-color:#fff; }
.detailRecipeProductsSpacer        { width:100%; height:0; }
.detailRecipeProductsSpacer.top    { padding-bottom:15px; }
.detailRecipeProductsSpacer.bottom { padding-bottom:10px; }
.detailRecipeProductsInner         {  } /*inner*/
.detailRecipeProductsTitle         { width:100%; max-width:300px; margin:0 auto 0; }
.detailRecipeProductsTitle h2      {  }
.detailRecipeProductsFrameSpacer   { width:100%; height:0; padding-bottom:3%; }
.detailRecipeProductsFrame         { width:100%; text-align:center; vertical-align:bottom; }

.detailRecipeProductsItem              { display:inline-block; width:50%; overflow:hidden; }
.detailRecipeProductsItemSpacer        { width:100%; height:0; }
.detailRecipeProductsItemSpacer.top    { padding-bottom:5px; }
.detailRecipeProductsItemSpacer.bottom { padding-bottom:10px; }
.detailRecipeProductsItemInner         { padding:0 5px 0; }
.detailRecipeProductsItemImage         { width:80%; margin:0 auto 0; }
.detailRecipeProductsItemImage img,
.detailRecipeProductsItemImage picture { display:block; margin:0; padding:0; width:100%; height:auto; overflow:hidden; }
.detailRecipeProductsItemBeriefSpacer  { width:100%; height:0; padding-bottom:3%; }
.detailRecipeProductsItemBerief        { width:100%; text-align:center; font-size:14px; line-height:18px; color:#777; }
.detailRecipeProductsItemTitleSpacer   { width:100%; height:0; padding-bottom:1.5%; }
.detailRecipeProductsItemTitle         { width:100%; min-height:36px; text-align:center; 
                                         font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; font-size:16px; line-height:18px; letter-spacing:0.5px; }
@media screen and (min-width:700px) {
  .detailBannerSpacer.top { display:none; }
  .detailRecipeTitleSpacer { padding-bottom:20px; }
  .detailRecipePropetiesSpacer { padding-bottom:15px; }
  .detailRecipeSwitch .detailRecipeSwitchInner { max-width:100%; margin:0; }
  .detailRecipeSwitchText { max-width:100%; }
  .detailRecipeIDInner { padding:0 25px 1px; font-size:26px; line-height:50px; letter-spacing:1px; }
  
  .detailRecipeTime33First .title { font-size:17px; line-height:24px; }
  .detailRecipeTime33First .time  { font-size:17px; line-height:24px; }
  .detailRecipeTime33Second .title { font-size:17px; line-height:24px; }
  .detailRecipeTime33Second .time  { font-size:17px; line-height:24px; }
  .detailRecipeTime33Third .title { font-size:17px; line-height:24px; }
  .detailRecipeTime33Third .time  { font-size:17px; line-height:24px; }
  .detailRecipeTimeFull .title { font-size:17px; line-height:24px; }
  .detailRecipeTimeFull .time  { font-size:17px; line-height:24px; }
  
  .detailRecipeCardswitchSpacer { padding-bottom:50px; }
  .detailRecipeCardswitch { display:none; }
  .detailRecipeCardswitchShift.first  { width:100%; left:0; }
  .detailRecipeCardswitchShift.second { width:100%; left:0; }
  .detailRecipeCardswitchShift.first .detailRecipeCardswitchIngre, 
  .detailRecipeCardswitchShift.second .detailRecipeCardswitchIngre { position:relative; float:left; width:50%; overflow:hidden; border-right:1px solid #dbcaba; box-sizing:border-box;  }
  .detailRecipeCardswitchShift.first .detailRecipeCardswitchPrep,
  .detailRecipeCardswitchShift.second .detailRecipeCardswitchPrep { position:relative; float:right; width:50%; overflow:visible; }
  .detailRecipePreparationLine { display:block; left:-1px; top:0; width:1px; height:100%; background-color:#dbcaba; z-index:2; }
  .detailRecipeSwitchSpacer { display:none; }
  .detailRecipePreparationSpacer { padding-bottom:53px; }
  .detailRecipePreparationTitle  { display:block; padding-left:40px; }
  
  .detailRecipeSwitchInner { padding:0 20px 0 0;}
  .detailRecipeListsInner { padding:0 20px 0 0; }
  .detailRecipePreparationInner { padding:0 0 0 20px; }
  .detailRecipeNutritionsInner { padding:0 0 0 20px;  }
  .detailRecipePreparationTippsInner { padding:0 0 0 20px; }
  .detailRecipeNutritionsSpacer { padding-bottom:50px; }
  .detailRecipePreparationEndSpacer,
  .detailRecipePreparationEnd { display:none; }
  .detailRecipePreparationEndExtraFrame { display:block; }
  
  .detailRecipeProductsItem       { width:33.3333%; }
  .detailRecipeProductsItemBerief { font-size:17px; line-height:22px; }
  .detailRecipeProductsItemTitle  { font-size:24px; line-height:26px; min-height:52px;  }

}
@media screen and (min-width:1000px) {
	
  .detailRecipeIDInner { padding:0 30px 1px; font-size:30px; line-height:56px; letter-spacing:1px; }
  .detailRecipeTitleSpacer  { padding-bottom:25px; }
  .detailRecipeProductsTitle { width:100%; max-width:100%; }
  .detailRecipeListIingredientsItemValue { font-size:17px; line-height:22px; }
  .detailRecipeListIingredientsItemUnit { font-size:17px; line-height:22px; }
  .detailRecipeListIingredientsItemText { font-size:17px; line-height:22px; }
  .detailRecipePreparationTextInner { font-size:17px; line-height:24px; }
  .detailRecipePreparationListInner { font-size:17px; line-height:24px; }
  
  .detailRecipeTime33First .title { font-size:17px; line-height:24px; }
  .detailRecipeTime33First .time  { font-size:17px; line-height:24px; }
  .detailRecipeTime33Second .title { font-size:17px; line-height:24px; }
  .detailRecipeTime33Second .time  { font-size:17px; line-height:24px; }
  .detailRecipeTime33Third .title { font-size:17px; line-height:24px; }
  .detailRecipeTime33Third .time  { font-size:17px; line-height:24px; }
  .detailRecipeTimeFull .title { font-size:17px; line-height:24px; }
  .detailRecipeTimeFull .time  { font-size:17px; line-height:24px; }
  
  .detailRecipeProductsItem { width:25%; }
}

 
/* _____________________________________________ */
/* elementRecipes ( sysnav // System: Navigation */

.elementNavigation {  }

.finderAllFrame { width:100%; max-width:600px; margin:0 auto 0;  }

.finderHead { width:100%; }

.finderHeadTitleBeforeSpacer { width:100%; height:0; padding-bottom:0; }

.finderHeadTitle      { width:100%;  }
.finderHeadTitleInner { text-align:center; }
.finderHeadTitleSpace { width:100%; height:0; padding-bottom:30px; }

.finderHeadBar             { width:100%; }
.finderHeadBarInner        { width:100%; }
.finderHeadBarWhite        { width:100%; height:4px; border-radius:2px; background-color:#fff; }
.finderHeadBarBlack        { left:0; top:0; height:4px; background-color:#000; transition:all 1s ease-in-out; z-index:2; }   /* #finderHeadBarBlack */
.finderHeadBarPercentFrame { margin-top:5px; width:100%; height:15px; }
.finderHeadBarPercent      { left:0; top:0; height:20px; text-align:right; transition:all 1s ease-in-out; z-index:2;
                             font-size:14px; line-height:15px; font-weight:600; }   /* #finderHeadBarPercent */
.finderHeadBarSpace        { width:100%; height:0; padding-bottom:35px; }

.finderHeadBar.f1 .finderHeadBarBlack, .finderHeadBar.f1 .finderHeadBarPercent { width:16.6666%; }
.finderHeadBar.f2 .finderHeadBarBlack, .finderHeadBar.f2 .finderHeadBarPercent { width:33.3333%; }
.finderHeadBar.f3 .finderHeadBarBlack, .finderHeadBar.f3 .finderHeadBarPercent { width:50%; }
.finderHeadBar.f4 .finderHeadBarBlack, .finderHeadBar.f4 .finderHeadBarPercent { width:66.6666%; }
.finderHeadBar.f5 .finderHeadBarBlack, .finderHeadBar.f5 .finderHeadBarPercent { width:83.3333%; }

.finderBodyFrame { width:100%;  }
.finderBody      { width:550%; height:auto; transition:all 1s ease-in-out; }
.finderBody.f1   { transform:translate(0, 0); }
.finderBody.f2   { transform:translate(-20%, 0); }
.finderBody.f3   { transform:translate(-40%, 0); }
.finderBody.f4   { transform:translate(-60%, 0); }
.finderBody.f5   { transform:translate(-80%, 0); }

.finderItem            { float:left; width:18.181818%; margin-right:1.818182%; height:auto; }
.finderItem.cut        { max-height:200px; }
.finderItemHeader      { width:100%; text-align:center; }
.finderItemHeaderSpace { width:100%; height:0; padding-bottom:10px; }

.finderItemDefaultFilterFrame  { width:100%;  }
.finderItemDefaultFilter       { width:100%;  }
.finderItemDefaultFilterSpace  { width:100%; height:0; padding-bottom:6px; }
.finderItemDefaultButton       { width:100%; }
.finderItemDefaultButtonSpacer { width:100%; height:0; padding-bottom:6px; }
.finderItemDefaultButtonInner  { display:block; width:100%; height:48px; box-sizing:border-box; background-color:#fff; border:1px solid #dbcaba; border-radius:10px; cursor:pointer;
                                 transition:all 0.3s ease-in-out; }
.finderItemDefaultButtonText   { display:block; padding:0 0 0 40px; box-sizing:border-box; text-align:center; font-size:16px; line-height:44px; }
.finderItemDefaultButtonCircle { display:block; left:9px; top:9px; width:26px; height:26px; border:1px solid #dbcaba; border-radius:15px; z-index:2; }
.finderItemDefaultButtonCheck  { display:block; left:4px; top:4px; width:18px; height:18px; background-color:#000; border-radius:9px; z-index:3; opacity:0;
                                 transition:all 0.3s ease-in-out; }
.finderItemDefaultFoot         { width:100%; }


 /* - wegen nicht vorhandenen Rezepte zu Anspruchsvoll zeitweise ausgeblendet - */
.finderItem-4 .finderItemDefaultFilter .finderItemFourButton:nth-child(4) { display:none }


.finderItemDefaultButtonInner.act                               { border:1px solid #333; background-color:#fff7f0; }
.finderItemDefaultButtonInner.act .finderItemDefaultButtonCheck { opacity:1; }

.finderItemBackButton      { display:block; float:left; width:146px; height:46px; box-sizing:border-box; text-align:center; cursor:pointer;
                             border:2px solid #000; background-color:#000; border-radius:10px; }
.finderItemBackButtonIcon  { display:inline-block; height:42px; width:22px; background:url(../Images/Tofu/arrow-links-weiss.svg) no-repeat 0 7px; background-size:100% auto; }
.finderItemBackButtonText  { display:inline-block; height:42px; width:auto; vertical-align:top;
                             font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; font-size:17px; line-height:42px; font-weight:400; color:#fff; letter-spacing:0.5px; }

.finderItemNextButtonFrame { float:right; width:146px; height:46px; }
.finderItemNextButtonLink  { display:block; width:146px; height:46px; }
.finderItemNextButton      { display:block; width:142px; height:42px; border:2px solid #b9b9b9; background-color:#b9b9b9; border-radius:10px; text-align:center; }
.finderItemNextButtonIcon  { display:inline-block; height:42px; width:22px; background:url(../Images/Tofu/arrow-rechts-weiss.svg) no-repeat 0 7px; background-size:100% auto; }
.finderItemNextButtonText  { display:inline-block; height:42px; width:auto; vertical-align:top;
                             font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; font-size:17px; line-height:42px; font-weight:400; color:#fff; letter-spacing:0.5px; }
.finderItemNextButtonMask  { left:0; top:0; width:100%; height:100%; display:block; z-index:2; }

.finderItemNextButtonFrame.act .finderItemNextButton { border:2px solid #000; background-color:#000; }
.finderItemNextButtonFrame.act .finderItemNextButtonMask { display:none; }

.finderItemOneFilterFrame   { padding-bottom:0.5%; }
.finderItemOneFilter        { left:-2.5%; width:105%; }
.finderItemOneFilterSpace   { width:100%; height:0; padding-bottom:5%; }
.finderItemOneButton        { float:left; width:50%; }
.finderItemOneButtonSpacer  { width:100%; height:0; padding-bottom:5%; }
.finderItemOneButtonInner   { margin:0 5% 0; transition:all 1s ease-in-out; }
.finderItemOneButtonBlock   { width:100%; height:0; padding-bottom:80%; }
.finderItemOneButtonFull    { display:block; left:0; top:0; width:100%; height:100%; border-radius:10px; cursor:pointer; z-index:2; transition:all 0.3s ease-in-out;
                              background-color:#fff; box-sizing:border-box; border:1px solid #dbcaba; }
.finderItemOneButtonContent { display:block; left:0; top:50%; width:100%; height:auto; transform:translate(0, -50%); z-index:3; }
.finderItemOneButtonIcon    { display:block; width:100%; height:0; padding-bottom:30%; background-repeat:no-repeat; background-position:center center; background-size:auto 100%; }
.finderItemOneButtonText    { display:block; width:100%; height:auto; padding:5px 10% 0; box-sizing:border-box; text-align:center; font-size:14px; line-height:18px; }
.finderItemOneFoot          { width:100%; } 

.finderItemOneButtonFull.act { border:1px solid #333; background-color:#fff7f0; }

@media screen and (min-width:550px) {
  .finderItemOneFilter { left:-1.666666%; width:103.333332%; }
  .finderItemOneButton { width:33.3333%; }
}

.finderItemOneButtonIcon-1 { background-image:url(../Images/Tofu/smilie-smile.svg); }
.finderItemOneButtonIcon-2 { background-image:url(../Images/Tofu/smilie-melt.svg); }
.finderItemOneButtonIcon-3 { background-image:url(../Images/Tofu/smilie-stars.svg); }
.finderItemOneButtonIcon-4 { background-image:url(../Images/Tofu/smilie-heart.svg); }
.finderItemOneButtonIcon-5 { background-image:url(../Images/Tofu/smilie-party.svg); }
.finderItemOneButtonIcon-6 { background-image:url(../Images/Tofu/smilie-relaxed.svg); }

.finderItemFiveFilterFrame  { width:100%;  }
.finderItemFiveFilter       { width:100%; text-align:center; }
.finderItemFiveFilterSpace  { width:100%; height:0; padding-bottom:28px; }
.finderItemFiveButton       { display:inline-block; height:auto; width:auto; }
.finderItemFiveButtonSpacer { width:100%; height:0; padding-bottom:6px;  }
.finderItemFiveButtonInner  { display:block; height:46px; margin:0 6px 0; padding:0 20px 0; background-color:#fff; border:1px solid #dbcaba; border-radius:10px; cursor:pointer;
                              transition:all 0.3s ease-in-out; }
.finderItemFiveButtonIcon   { display:block; display:inline-block; width:20px; height:46px; background-repeat:no-repeat; background-position:center center; background-size:100% auto; }
.finderItemFiveButtonText   { display:block; display:inline-block; height:46px; width:auto; font-size:14px; line-height:44px; vertical-align:top; }
.finderItemFiveFoot         { width:100%; }

.finderItemFiveButtonInner.act { border:1px solid #333; background-color:#fff7f0; }

.finderItemFiveButtonIcon-1 { background-image:url(../Images/Tofu/prop-vegan.svg); }
.finderItemFiveButtonIcon-2 { background-image:url(../Images/Tofu/prop-vegetarisch.svg); }
.finderItemFiveButtonIcon-3 { background-image:url(../Images/Tofu/prop-laktosefrei.svg); }
.finderItemFiveButtonIcon-4 { background-image:url(../Images/Tofu/prop-glutenfrei.svg); }
.finderItemFiveButtonIcon-5 { background-image:url(../Images/Tofu/stars.svg); }
 

/* navigation button / slider / list */
.navigationHead {  }

.navigationHeadTitle.press       { width:100%; }
.navigationHeadTitle.slide       { width:100%; }
.navigationHeadTitle.list        { width:100%; }
.navigationHeadTitleInner.press  { width:100%; text-align:left; }
.navigationHeadTitleInner.slide  { width:100%; text-align:left; }
.navigationHeadTitleInner.list   { width:100%; text-align:center; }
.navigationHeadTitleSpacer.press { width:100%; height:0; padding-bottom:7px; } 
.navigationHeadTitleSpacer.slide { width:100%; height:0; padding-bottom:7px; }
.navigationHeadTitleSpacer.list  { width:100%; height:0; padding-bottom:16px; }

.navigationHeadText.press       { width:100%; }
.navigationHeadText.slide       { width:100%; }
.navigationHeadText.list        { width:100%; }
.navigationHeadTextInner.press  { width:100%; text-align:left; }
.navigationHeadTextInner.slide  { width:100%; text-align:left; }
.navigationHeadTextInner.list   { width:100%; text-align:center; }
.navigationHeadTextSpacer.press { width:100%; height:0; padding-bottom:9px; }
.navigationHeadTextSpacer.slide { width:100%; height:0; padding-bottom:9px; }
.navigationHeadTextSpacer.list  { width:100%; height:0; padding-bottom:10px; }

.sliderInner { width:100%; box-sizing:border-box; margin:0 auto 0; }

@media screen and (max-width:699px)                         { .sliderInner { padding:0 0 0 20px; } }
@media screen and (min-width:700px) and (max-width:999px)   { .sliderInner { padding:0 0 0 30px; } }
@media screen and (min-width:1000px) and (max-width:1299px) { .sliderInner { padding:0 0 0 40px; } }
@media screen and (min-width:1300px) and (max-width:1319px) { .sliderInner { padding:0 0 0 50px; } }
@media screen and (min-width:1320px) and (max-width:1339px) { .sliderInner { padding:0 0 0 60px; } }
@media screen and (min-width:1340px) and (max-width:1359px) { .sliderInner { padding:0 0 0 70px; } }
@media screen and (min-width:1360px) and (max-width:1379px) { .sliderInner { padding:0 0 0 80px; } }
@media screen and (min-width:1380px) and (max-width:1399px) { .sliderInner { padding:0 0 0 90px; } }
@media screen and (min-width:1400px) and (max-width:1419px) { .sliderInner { padding:0 0 0 100px; } }
@media screen and (min-width:1420px) and (max-width:1439px) { .sliderInner { padding:0 0 0 110px; } }
@media screen and (min-width:1440px) and (max-width:1459px) { .sliderInner { padding:0 0 0 120px; } }
@media screen and (min-width:1460px) and (max-width:1479px) { .sliderInner { padding:0 0 0 130px; } }
@media screen and (min-width:1480px) and (max-width:1499px) { .sliderInner { padding:0 0 0 140px; } }
@media screen and (min-width:1500px) and (max-width:1519px) { .sliderInner { padding:0 0 0 150px; } }
@media screen and (min-width:1520px) and (max-width:1539px) { .sliderInner { padding:0 0 0 160px; } }
@media screen and (min-width:1540px) and (max-width:1559px) { .sliderInner { padding:0 0 0 170px; } }
@media screen and (min-width:1560px) and (max-width:1579px) { .sliderInner { padding:0 0 0 180px; } }
@media screen and (min-width:1580px) and (max-width:1599px) { .sliderInner { padding:0 0 0 190px; } }
@media screen and (min-width:1600px) and (max-width:1619px) { .sliderInner { padding:0 0 0 200px; } }
@media screen and (min-width:1620px) and (max-width:1639px) { .sliderInner { padding:0 0 0 210px; } }
@media screen and (min-width:1640px) and (max-width:1659px) { .sliderInner { padding:0 0 0 220px; } }
@media screen and (min-width:1660px) and (max-width:1679px) { .sliderInner { padding:0 0 0 230px; } }
@media screen and (min-width:1680px) and (max-width:1699px) { .sliderInner { padding:0 0 0 240px; } }
@media screen and (min-width:1700px) and (max-width:1719px) { .sliderInner { padding:0 0 0 250px; } }
@media screen and (min-width:1720px) and (max-width:1739px) { .sliderInner { padding:0 0 0 260px; } }
@media screen and (min-width:1740px) and (max-width:1759px) { .sliderInner { padding:0 0 0 270px; } }
@media screen and (min-width:1760px) and (max-width:1779px) { .sliderInner { padding:0 0 0 280px; } }
@media screen and (min-width:1780px) and (max-width:1799px) { .sliderInner { padding:0 0 0 290px; } }
@media screen and (min-width:1800px) and (max-width:1819px) { .sliderInner { padding:0 0 0 300px; } }
@media screen and (min-width:1820px) and (max-width:1839px) { .sliderInner { padding:0 0 0 310px; } }
@media screen and (min-width:1840px) and (max-width:1859px) { .sliderInner { padding:0 0 0 320px; } }
@media screen and (min-width:1860px) and (max-width:1879px) { .sliderInner { padding:0 0 0 330px; } }
@media screen and (min-width:1880px) and (max-width:1899px) { .sliderInner { padding:0 0 0 340px; } }
@media screen and (min-width:1900px) and (max-width:1919px) { .sliderInner { padding:0 0 0 350px; } }
@media screen and (min-width:1920px) and (max-width:1939px) { .sliderInner { padding:0 0 0 360px; } }
@media screen and (min-width:1940px) and (max-width:1959px) { .sliderInner { padding:0 0 0 370px; } }
@media screen and (min-width:1960px)                        { .sliderInner { padding:0 0 0 380px; } }

.navigationAllFrame {  }

.navigationList.press      { width:100%; }
.navigationList.slide      { width:100%; }
.navigationList.list       { width:100%; }
.navigationListInner.press { width:100%; }   /* sliderEqualHighButton */
.navigationListInner.slide { width:104%; left:-5px; }   /* sliderEqualHighElement     -     for fit width:126.9%; left:-26.9%; */
.navigationListInner.list  { width:100%; }   /* gridFrameFour2OneEqualHigh */

.navigationItem.press       { float:left; width:auto; height:40px; }
.navigationItem.slide       { float:left; width:80%; max-width:280px; }  /* width:100%; no max - for fit */
.navigationItem.list        { width:100%; }
.navigationItemSpacer.press { width:100%; height:0; padding-bottom:0;  }
.navigationItemSpacer.slide { width:100%; height:0; padding-bottom:2%; }
.navigationItemSpacer.list  { width:100%; height:0; padding-bottom:20px; }
.navigationItemInner.press  { margin:0 2% 0; }
.navigationItemInner.slide  { margin:0 2% 0; }
.navigationItemInner.list   { margin:0; }

.navigationItemPicture.slide       { width:100%; border-radius:10px;  }
.navigationItemPicture.list        { width:100%; border-radius:10px; }
.navigationItemPicture img         { display:block; position:relative; width:100%; height:auto; overflow:hidden; }
.navigationItemPictureSpacer.slide { width:100%; height:0; padding-bottom:11px; }
.navigationItemPictureSpacer.list  { width:100%; height:0; padding-bottom:11px; }

.navigationItemTitle.press      { width:auto; padding:2px 20px 0; background-color:#000; border-radius:20px; white-space:nowrap; line-height:38px; }
.navigationItemTitle.slide      { width:100%; }
.navigationItemTitle.list       { width:100%; }
.navigationItemTitleInner.press { font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; text-transform:uppercase;
								  font-weight:400; font-size:20px; line-height:38px; letter-spacing:0.5px; color:#fff; text-align:center;
                                  display:block; overflow:hidden; width:auto; white-space:nowrap; padding-right:12px; }
.navigationItemTitleInner.slide { width:100%; }
.navigationItemTitleInner.list  { width:100%; }

.navigationItemTitleSpacer.slide { width:100%; height:0; padding-bottom:2px; }
.navigationItemTitleSpacer.list  { width:100%; height:0; padding-bottom:2px; }

.navigationItemText.slide       { width:100%; }
.navigationItemText.list        { width:100%; }
.navigationItemTextSpacer.slide { width:100%; height:0; padding-bottom:0; }
.navigationItemTextSpacer.list  { width:100%; height:0; padding-bottom:10px; }
 
/*  stages - for fit
@media screen and (min-width:550px) and (max-width:749px) {
  .navigationListInner.slide { width:113.3%; left:-13.3%; }
  .navigationItem.slide      { width:50%; }
}
@media screen and (min-width:750px) and (max-width:999px) {
  .navigationListInner.slide { width:106%; left:-6%; }
  .navigationItem.slide      { width:33.3333%; }
}
@media screen and (min-width:1000px) {
  .navigationListInner.slide { width:105.7%; left:-5.7%; }
  .navigationItem.slide      { width:25%; }
} */
 
@media screen and (min-width:450px) and (max-width:849px) {
  .navigationItem.list       { float:left; width:50%; }
  .navigationItemSpacer.list { padding-bottom:2%; }
  .navigationItemInner.list  { margin:0 4% 0; }
}
@media screen and (min-width:850px) and (max-width:1249px) {
  .navigationItem.list       { float:left; width:33.3333%; }
  .navigationItemSpacer.list { padding-bottom:3%; }
  .navigationItemInner.list  { margin:0 3% 0; }
}
@media screen and (min-width:1250px) {
  .navigationItem.list       { float:left; width:25%; }
  .navigationItemSpacer.list { padding-bottom:4%; }
  .navigationItemInner.list  { margin:0 2% 0; }
}

 
/* ------------------------------------------------ Styles für das Filtermenü ----------------------------------------------- */
.filtersFrame         {  }
.filtersSpacer        { width:100%; height:0;  }
.filtersSpacer.top    { padding-bottom:20px; }
.filtersSpacer.bottom { padding-bottom:0px; }
.filtersInner         {  }

.filtersItem     { margin:0 30px 0; border-bottom:1px solid #dbcaba; }
.filtersItemMain { width:100%; height:58px; cursor:pointer; font-size:16px; line-height:58px; }
 
.filtersItemChevron     { display:block; right:0; top:19px; width:24px; height:24px; z-index:99; }
.filtersItemChevron .lc { display:block; left:1px; top:10px; width:8px; height:1px; background-color:#000; transform:rotate(45deg); transition:all 0.6s ease-in-out; z-index:100; }
.filtersItemChevron .rc { display:block; left:7px; top:10px; width:8px; height:1px; background-color:#000; transform:rotate(-45deg); transition:all 0.6s ease-in-out; z-index:100; }

.filtersItem .filtersItemAccordion          { max-height:0; transition:max-height 0.8s ease-in-out;  }
.filtersItem.active .filtersItemAccordion   { max-height:350px; transition:max-height 0.6s ease-in-out; }
.filtersItem.active .filtersItemChevron .lc { left:1px; top:10px; width:8px; transform:rotate(-45deg); }
.filtersItem.active .filtersItemChevron .rc { left:7px; top:10px; width:8px; transform:rotate(45deg); }

.filtersCatNumber  {  } 

.filtersCat        { padding-left:10px; border:1px solid #dbcaba; border-radius:10px; margin-bottom:7px; transition:all 0.6s ease-in-out;
                     font-size:16px; line-height:40px; }
.filtersCat.crunch { padding:0; border:0 none; } 
.filtersItemBox    { right:5px; top:5px; width:28px; height:28px; background-color:#fff; border:1px solid #dbcaba; border-radius:14px; z-index:100; }
.filtersItemCheck  { right:4px; top:4px; width:20px; height:20px; background-color:#000; border-radius:10px; z-index:101; transition:all 0.6s ease-in-out; opacity:0; }

.filtersCat:last-child { margin-bottom:22px; }

.filtersCat.active                   { border:1px solid #333; background-color:#fff7f0; }
.filtersCat.active .filtersItemBox   { border:1px solid #333; }
.filtersCat.active .filtersItemCheck { opacity:1; }

#filtersEraseFrame      { width:100%; height:auto; max-height:0; padding-top:20px; margin-bottom:40px; box-sizing:border-box; transition:max-height 0.6s ease-in-out; }
#filtersEraseFrame.show { max-height:70px; }
#filtersEraseInner      { padding:0 30px 0; }
#filtersErase           { width:155px; height:36px; background-color:#000; border:2px solid #000; border-radius:10px; padding:0 0 0 15px; cursor:pointer; }
#filtersEraseText       { display:inline-block; font-size:15px; line-height:34px; color:#fff; vertical-align:top; }
#filtersEraseIcon       { display:inline-block; width:25px; height:36px; background:url(../Images/Tofu/x-white.svg) no-repeat 13px 12px; background-size:12px 12px; }
 
 
/* ------------------------------------------------ Styles für alle Elemnte des Newssystems ----------------------------------------------- */
  
/* _________________________________ */
/* ---- Recipes List (layout 1) ---- */

.recipesListFrame { width:100%; }
.recipesListInner { min-height:200px;  }

/*Not found*/
#alternativeMessageDiv              { left:-101%; top:0; width:100%; z-index:1; transition:left 1s ease-in-out; }
#alternativeMessageDivInner         { width:100%; padding:15px 20px 20px; box-sizing:border-box; text-align:center; }
#alternativeMessageEraseButton      { width:100%; padding:0 20px 0; box-sizing:border-box; text-align:center; }
#alternativeMessageFiltersErase     { margin:0 auto 0; width:155px; height:36px; background-color:#000; border:2px solid #000; border-radius:10px; padding:0 0 0 15px; cursor:pointer; }
#alternativeMessageFiltersEraseText { display:inline-block; font-size:15px; line-height:34px; color:#fff; vertical-align:top; }
#alternativeMessageFiltersEraseIcon { display:inline-block; width:25px; height:36px; background:url(../Images/Tofu/x-white.svg) no-repeat 13px 12px; background-size:12px 12px; }

#alternativeMessageDiv .altFilter { display:inline;  }
#alternativeMessageDiv .altSearch { display:none;  }

#alternativeMessageDiv.show { left:0; }

#alternativeMessageDiv.show.searchtext .altSearch { display:inline; }
#alternativeMessageDiv.show.searchtext .altFilter { display:none; }

#alternativeMessageDiv.show.searchtext #alternativeMessageEraseButton { display:none; }

/*Selected header*/
.recipesSelectedHeader       { width:100%; }
.recipesSelectedHeaderSpacer { width:100%; height:0; padding-bottom:15px; }
.recipesSelectedHeaderInner  { margin:0 4% 0; }
#recipesSelectedHeaderInsert { opacity:1; transition:all 0.6s ease-in-out;  }

#recipesSelectedHeaderInsert.fade      { opacity:0; }
#recipesSelectedHeaderInsert.startfade { opacity:0; transition:all 0s none; }

.selectableHeaderTitle       { width:100%; }
.selectableHeaderTitle h1    {  }
.selectableHeaderTitleSpacer { width:100%; height:0; padding-bottom:15px; }
.selectableHeaderText        { width:100%; text-align:center; }
.selectableHeaderTextSpacer  { width:100%; height:0; padding-bottom:15px; }
			
/*Selected filter*/
.recipesSelectedFilter       { width:100%; }
.recipesSelectedFilterInner  { margin:0 4% 0; }
#recipesSelectedHeaderInsert {  }

/*Number & Button*/
.recipesExtraFrame       { width:100%; }
.recipesExtraItem        {  } 
.recipesExtraLeft        { float:left; }
.recipesExtraLeftSpacer  { width:100%; height:0; }
.recipesExtraLeftSpacer  { padding-bottom:4%; }
.recipesExtraLeftInner   { margin:0 4% 0; height:54px; }
.recipesExtraRight       { float:right; }
.recipesExtraRightSpacer { width:100%; height:0; }
.recipesExtraRightSpacer { padding-bottom:4%; }
.recipesExtraRightInner  { margin:0 4% 0; height:54px; }

#filterButton       { float:right; height:50px; width:100%; max-width:180px; box-sizing:border-box; text-align:center; cursor:pointer;
                      background-color:#000; border:2px solid #000; border-radius:10px; }
#filterButtonIcon   { display:inline-block; width:34px; height:50px; background:url(../Images/Tofu/filter-white.svg) no-repeat 0 12px; background-size:25px 25px; }
#filterButtonText   { display:inline-block; width:auto; height:50px;
                      font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; font-size:20px; line-height:48px; vertical-align:top; color:#fff; letter-spacing:0.5px; }
#filterButtonNumber { display:inline-block; width:auto; height:50px;
                      font-family:'Springwood', 'Arial Black', Arial, Helvetica, sans-serif; font-size:20px; line-height:48px; vertical-align:top; color:#fff; letter-spacing:0.5px; }
#listItemNumber     { height:54px; text-align:left; font-size:17px; line-height:54px; opacity:1; transition:all 0.6s ease-in-out; }

#listItemNumber.fade      { opacity:0; }
#listItemNumber.startfade { opacity:0; transition:opacity 0s none; }

/*Items*/
.recipeListItem              { opacity:1; transition:all 0.6s  ease-in-out; }
.recipeListItem.fade         { opacity:0;  }
.recipeListItem.startfade    { opacity:0; transition:all 0s none; }
.recipeListItemSpacer        { width:100%; height:0; }
.recipeListItemSpacer.top    { padding-bottom:4%; }
.recipeListItemSpacer.bottom { padding-bottom:4%; }
.recipeListItemInner         { margin:0 4% 0; }

.recipeListItemImage              { width:100%; height:0; padding-bottom:74.619228%; }
.recipeListItemImageInner         { left:0; top:0; width:100%; height:100%; border-radius:10px; }
.recipeListItemImageInner img,
.recipeListItemImageInner picture { width:100%; height:auto; }
.notepadHeartFrame                { right:5px; top:5px; width:40px; height:40px; z-index:2; }
.notepadHeart                     { width:100%; height:100%; }

.recipeListItemTitleSpacer      { width:100%; height:0; padding-bottom:14px; }
.recipeListItemTitle            { width:100%; text-align:left; }
.recipeListItemTitle h3-smaller {  }

.recipeListItemSkillSpacer { width:100%; height:0; padding-bottom:7px; }
.recipeListItemSkill       { width:100%; text-align:left; font-size:14px; line-height:18px; }

.recipeListItemCatFrameSpacer { width:100%; height:0; padding-bottom:9px; }
.recipeListItemCatFrame       { width:100%; text-align:left; }
.recipeListItemCat            { display:inline-block; width:36px; height:32px; } 
.recipeListItemCatInner       { margin:0 2px 0; width:32px; height:32px; }
.recipeListItemCatInner.vega  { background:url(../Images/Tofu/prop-vegan_background.svg) no-repeat 0 0; background-size:100% 100%; }
.recipeListItemCatInner.vege  { background:url(../Images/Tofu/prop-vegetarisch_dummy.png) no-repeat 0 0; background-size:100% 100%; }
.recipeListItemCatInner.glut  { background:url(../Images/Tofu/prop-glutenfrei_background.svg) no-repeat 0 0; background-size:100% 100%; }
.recipeListItemCatInner.lakt  { background:url(../Images/Tofu/prop-laktosefrei_background.svg) no-repeat 0 0; background-size:100% 100%; }

@media screen and  (max-width:699px) {
  .recipesSelectedHeaderInner { margin:0 2% 0; }
  .recipesSelectedFilterInner { margin:0 2% 0; }
  .recipeListItem { float:left; width:50%; }
  .recipesExtraItem { width:50%; }
}
@media screen and (min-width:700px) and (max-width:999px) {
  .recipesSelectedHeaderInner { margin:0 1.333333% 0; }
  .recipesSelectedFilterInner { margin:0 1.333333% 0; }
  .recipeListItem { float:left; width:33.3333%; }
  .recipesExtraItem { width:33.3333%; }
}
@media screen and (min-width:1000px) {
  .recipesSelectedHeaderInner { margin:0 1% 0; }
  .recipesSelectedFilterInner { margin:0 1% 0; }
  .recipeListItem { float:left; width:25%; }
  .recipesExtraItem { width:25%; }
}


/* ________________________________________ */
/* ---- Slider Recipes List (layout 4) ---- */

.recipesElementListFrame { width:100%; }
.recipesElementListInner { width:104%; left:-9px; }

/*Items*/
.recipeElementListItem              { float:left; width:80%; max-width:230px; }
.recipeElementListItemSpacer        { width:100%; height:0; }
.recipeElementListItemSpacer.top    { padding-bottom:4%; }
.recipeElementListItemSpacer.bottom { padding-bottom:4%; }
.recipeElementListItemInner         { margin:0 4% 0; }

.recipeElementListItemImage              { width:100%; height:0; padding-bottom:74.619228%; }
.recipeElementListItemImageInner         { left:0; top:0; width:100%; height:100%; border-radius:10px; }
.recipeElementListItemImageInner img,
.recipeElementListItemImageInner picture { width:100%; height:auto; }

.recipeElementListItemTitleSpacer      { width:100%; height:0; padding-bottom:14px; }
.recipeElementListItemTitle            { width:100%; text-align:left; }

.recipeElementListItemSkillSpacer { width:100%; height:0; padding-bottom:7px; }
.recipeElementListItemSkill       { width:100%; text-align:left; font-size:14px; line-height:18px; }

.recipeElementListItemCatFrameSpacer { width:100%; height:0; padding-bottom:9px; }
.recipeElementListItemCatFrame       { width:100%; text-align:left; }
.recipeElementListItemCat            { display:inline-block; width:36px; height:32px; } 
.recipeElementListItemCatInner       { margin:0 2px 0; width:32px; height:32px; }
.recipeElementListItemCatInner.vega  { background:url(../Images/Tofu/prop-vegan_background.svg) no-repeat 0 0; background-size:100% 100%; }
.recipeElementListItemCatInner.vege  { background:url(../Images/Tofu/prop-vegetarisch_dummy.png) no-repeat 0 0; background-size:100% 100%; }
.recipeElementListItemCatInner.glut  { background:url(../Images/Tofu/prop-glutenfrei_background.svg) no-repeat 0 0; background-size:100% 100%; }
.recipeElementListItemCatInner.lakt  { background:url(../Images/Tofu/prop-laktosefrei_background.svg) no-repeat 0 0; background-size:100% 100%; }

@media screen and  (max-width:699px)                      { .recipeElementListItem { float:left; width:50%; } }
@media screen and (min-width:700px) and (max-width:999px) { .recipeElementListItem { float:left; width:33.3333%; } }
@media screen and (min-width:1000px)                      { .recipeElementListItem { float:left; width:25%; } }