body                                                {scroll-behavior:smooth;}
.nowrap                                             {white-space:nowrap; margin-bottom:12px;} 
.clr                                                {clear:both; width:0; height:0; display:block; position:absolute;}
#ranking-wrapper                                    {width:100%; max-width:1200px; margin:80px auto; padding:0 10px;  background:#fff;}
#eingabe, #ausgabe                                  {width:100%; padding:30px; border:0 solid #ddd; background-color:#fff;}
hr                                                  {border:none; height:1px; background-color:#bbf0c3; margin:0px;}
#eingabe                                            {width:100%; padding:0 30px 30px; position:relative; z-index:2;  border-bottom-width:0px;}
#ausgabe                                            {width:100%; padding-top:0; position:relative; z-index:1; line-height:24px; max-width:1200px; margin:80px auto; padding: 0 10px; }
#ausgabe-wgut                                       {width:calc(100% + 20px); margin-left:-10px; padding:50px 30px 0; font-size:18px; line-height:24px; font-weight:600; background-color:#f2f2f2;}       
#ausgabe-plzort                                     {width:calc(100% + 20px); margin-left:-10px; padding:0 30px 50px; font-size:16px; background-color:#f2f2f2;}       
#ausgabe-weine                                      {padding:0; line-height:22px;}       
.ruler                                              {margin:15px 0; height:30px; background-color:#f2f2f2; display:none;}
label                                               {width:65px; margin:10px 0; display:inline-block; font-size:16px; color:#333;}
#wer                                                {width:calc(100% - 75px); padding:5px; font-size:16px; font-weight:400; color:#000; border-top:none; border-right:none; border-left:none; border-bottom-color:#ccc;}

.ttl                                                {position:relative; padding:10px 10px; z-index:10; display:grid; grid-template-columns:150px 1fr; align-items:center; grid-gap:20px; background-color:#eee; box-shadow:0px -20px 20px -20px #aaa inset; display:none;}
.ttl img                                            {width:100px; }

.spalte1                                            {font-size:15px; line-height:20px;}
.spalte2                                            {font-size:15px; line-height:20px;}
.spalte3                                            {font-size:15px; line-height:20px;}
.spalte4                                            {display:flex; align-items:center; justify-content:center; text-align:center; font-size:15px; line-height:20px;}
#eingabe-grid                                       {display:grid; max-width:1200px; margin:0 auto; padding:25px 10px 100px; grid-template-columns:2fr 1fr; grid-gap:80px; }
.spalte3 img                                        {width:100%; height:auto;}
.spalte2 ul                                         {margin:0 0 0 15px;}
.spalte2 li                                         {padding-bottom:5px;}
.spalte2 li a                                       {text-decoration:underline; text-underline-offset:1px; text-decoration-color:#bbf0c3; text-decoration-thickness:4px;}
.spalte2 li a:hover                                 {text-decoration:none;}
#navi                                                       {width:100vw; height:50px; top:0; left:0; position:fixed; z-index:10; display:grid; grid-template-columns:253px 1fr; background-color:#fff; box-shadow:0 0 0 1px #ccc;}

#extCont img                                        {width:100%; height:auto;}

.rank-item                                          {width:calc(100% + 20px); margin-left:-10px; padding:15px 30px; position:relative;}
#ranking-legende                                    {padding:0 0 50px; display:inline-block; font-size:15px; line-height:20px;}
#ranking-legende ul                                 {max-width:850px; width:calc(100% - 300px); margin-bottom:30px; list-style-type:none; float:right;}
#ranking-legende ul li                              {margin-bottom:5px;}
#ranking-legende img                                {width:100%; float:right;}
#ranking-legende a:hover                            {color:#d22f23; text-decoration:none;}
#ranking-legende figure                             {width:270px; margin-bottom:15px; margin-right:10px; padding:0px 0; float:left; text-align:center;}

.legende-links                                      {width:270px; float:left;}
.legende-links, .legende-rechts                     {display:block;}

#submitter                                          {font-size:16px; padding:5px 15px; color:#333; border:4px solid #ccc; border-radius:10px; background-color:#fff; transition:border-color ease 0.5s;}
#submitter:hover                                    {border-color:#bd9d57; background-color:#fff; transition:border-color ease 0.5s;}

.gold                                               {width:calc(100% + 20px); margin-left:-10px; padding-left:160px; background-color:rgba(87, 162, 89, 0.23); color:#333;}
.gold::before                                       {content:''; width:130px; height:100%; left:0; top:0; position:absolute; z-index:8; display:flex; background-image:url('../rte/upload/bewertung_db/gold.png'); background-repeat:no-repeat; background-position:center; background-color:rgba(87, 162, 89, 0.23);}
.silber                                             {width:calc(100% + 20px); margin-left:-10px; padding-left:160px; background-color:rgba(87, 162, 89, 0.23); color:#333;}
.silber::before                                     {content:''; width:130px; height:100%; left:0; top:0; position:absolute; z-index:8; display:flex; background-image:url('../rte/upload/bewertung_db/silber.png'); background-repeat:no-repeat; background-position:center; background-color:rgba(87, 162, 89, 0.23);}
.rot                                                {background-color:rgba(202, 130, 134, 0.25); color:#333; border-color:#fff; border-left:130px solid rgba(211, 10, 10, 0.33);}
.weiss                                              {background-color:#fff; color:#aaa; border-color:#aaa; border-left:130px solid #eee;}

.weinsorte                                          {margin-top:5px; font-size:14px; line-height:1rem;  font-weight:600;}
.weinname                                           {font-size:16px; font-weight:600;}
.weinherkunft                                       {font-size:17px; font-weight:400; font-size:14px;}
.weinjahr                                           {font-size:17px; font-weight:400; font-size:14px;}
.weinrank                                           {font-weight:450; display:inline-block;}
.weinpunkte                                         {font-size:14px; font-weight:400;}
.download                                           {font-size:12px; font-weight:300; text-decoration:none;}
.dlt                                                {font-size:8px; opacity:.5; padding:0px 5px; vertical-align:bottom;}
hr.trenn                                            {width:calc(100% + 20px); height:1px; margin:0 0 0 -10px; border:none; background-color:#fff;}
#ausgabe-weine hr.trenn                             {width:calc(100% + 20px); height:1px; margin:0 0 0 -10px; border:none; background-color:#fff;}



@media screen and (max-width:500px) {
 .ttl                                               {grid-template-columns:100px 1fr;}
 .ttl img                                           {width:100px; margin:0 auto;}
 #eingabe, #ausgabe                                 {padding:10px 10px;}
}

@media screen and (max-width:750px) {
 #ranking-legende ul                                {padding-top:30px; max-width:100%; width:100%;}
 #ranking-legende figure                            {width:calc(50% - 20px); max-width:270px; float:none; display:inline-block; }
 #ranking-wrapper                                   {padding:0 10px;}
 .legende-links                                     {width:100%;}
 .ttl                                               {grid-template-columns:1fr;}
 .ttl img                                           {width:100px; margin:0 auto;}
 #eingabe, #ausgabe                                 {padding:10px 10px;}
 #eingabe-grid                                      {grid-gap:40px 20px; padding:25px 10px 100px;}
 .spalte1                                           {grid-area:spalte1; grid-column-start:1; grid-column-end:3; grid-row-start:1; grid-row-end:2; font-size:15px; line-height:20px;}
 .spalte2                                           {grid-area:spalte2; grid-column-start:1; grid-column-end:3; grid-row-start:2; grid-row-end:3; font-size:15px; line-height:20px;}
 .spalte3                                           {grid-area:spalte3; grid-column-start:1; grid-column-end:3; grid-row-start:3; grid-row-end:4; font-size:15px; line-height:20px;}
 .spalte4                                           {grid-area:spalte4; grid-column-start:1; grid-column-end:3; grid-row-start:4; grid-row-end:5; font-size:15px; line-height:20px;}
}