@charset "UTF-8"; /*© Christof Grusdat*/

/* Iframe */
#iframe > header,
#iframe > footer {
   padding: 0 2px;
}

#iframe > header {
   margin-top: 2em;
}

#iframe > footer {
   margin: 15px 0 5px;
}

.ergebnisnavi   input[type=number] {
   width: 3em;
}

.ergebnisnavi > a {
   font-size: large;
   font-weight: bold;
}

@media(max-width:1023px){.ergebnisnavi>span{display:none}}



/* Angebot */
.angebot,
#angebot {
   max-width: 968px;
   border-right: 7px solid transparent;
   border-left: 7px solid transparent;
   text-align: center;
   background-clip: border-box;
}

body > .angebot,
main > .angebot {
   margin: 15px 2px 0;
   padding: 5px .305%;
}

body > .angebot {
   background-color: white;
}

main > .angebot:last-child {
   margin-bottom: 5px;
}

.angebot.vorbei,
#angebot > .vorbei {
   -webkit-filter: grayscale(80%);
   filter: grayscale(80%);
}
.angebot.vorbei   .gutschein > input,
#angebot > .vorbei   .gutschein > input,
.angebot   .kat > a,
#angebot   #kat > a {
   outline: 0 none transparent;
}
.angebot.vorbei   .button,
#angebot > .vorbei   .button {
   background-color: lightgray;
}

/* Bild */
.angebot > a {
   min-width: 200px;
   max-width: 240px;
   line-height: 80px;
   padding: 1px 0 .4em;
   text-align: center;
   outline-offset: -1px;
   -webkit-transition: opacity 200ms ease;
      -moz-transition: opacity 200ms ease;
       -ms-transition: opacity 200ms ease;
        -o-transition: opacity 200ms ease;
           transition: opacity 200ms ease;
}
.angebot > a:hover > img {
   border-top-left-radius: 5px;
   opacity: .7;
}

.angebot > a > img {
   max-height: 240px;
   height: auto;
}

/* Bewertung */
/*.angebot > .nebeninfo,
#angebot   #nebeninfo {
   overflow: visible;
}*/

.angebot > .nebeninfo > *:first-child,
#angebot   #nebeninfo > i + * {
   display: none;
   color: dimgray;
}

.angebot   .plus,
#angebot   #plus {
   color: green !important;
}
.angebot   .minus,
#angebot   #minus {
   color: red !important;
}

.angebot   form,
#angebot   form {
   display: none;
   vertical-align: top;
}

.angebot   form > input + input,
#angebot   form > input + input {
   outline-offset: 1px;
}

.angebot   form > input + input {
   width: 20px;
   height: 20px;
}
.angebot   form > input:last-child,
#angebot   form > input:last-child {
   margin-right: .2em;
}

.angebot > .nebeninfo > i,
#angebot   #nebeninfo > i {
   display: inline-block;
   line-height: 1.2;
   color: gray;
}

.angebot > .nebeninfo > i {
   font-size: small;
}

.angebot > .nebeninfo > i > span,
#angebot   #nebeninfo > i > span {
   white-space: nowrap;
   font-style: inherit;
}

/* Details */
.angebot   h3 {
   font-size: 20px;
}

.angebot   h3 > a {
   color: black;
   -webkit-transition: color 200ms ease;
      -moz-transition: color 200ms ease;
       -ms-transition: color 200ms ease;
        -o-transition: color 200ms ease;
           transition: color 200ms ease;
}
.angebot   h3 > a:hover {
   color: #ff4646;
}

.angebot   h3 ~ *,
.angebot > .details + div,
#angebot   #details > * + * {
   margin-top: .4em;
}

.angebot > .details + div,
#angebot   #details > div:last-child {
   line-height: 38px;
   overflow: visible;
}

.angebot   .zeitraum,
.angebot   .handel > a,
#angebot   #zeitraum,
#angebot   #handel > a {
   font-weight: bold;
}

.angebot   .zeitraum > img,
#angebot   #zeitraum > img {
   vertical-align: -.2em;
}

.angebot   .info,
#angebot   #info {
   padding: 4px 8px;
   border: 2px dotted red;
   text-align: center;
}

.angebot   .gutschein,
#angebot   #gutschein {
   padding: 5px 10px;
   border: 2px dashed black;
   overflow: visible;
   text-align: center;
}

.angebot   .gutschein[onclick],
.angebot   .gutschein[onclick] > input,
#angebot   #gutschein[onclick],
#angebot   #gutschein[onclick] > input {
   cursor: copy;
}

.angebot   .gutschein {
   margin: 12px 0 0 !important;
}

.angebot   .gutschein   input,
#angebot   #gutschein   input {
   font-size: 18px;
   font-family: monospace;
   padding: 0;
   border: 0 none transparent;
   text-align: center;
   vertical-align: baseline;
   font-weight: bold;
   box-shadow: none;
}

.angebot   .gutschein   span,
#angebot   #gutschein   span {
   margin-left: 2%;
   white-space: nowrap;
}

.angebot   .details > *:last-child {
   margin-bottom: .4em;
}

/* Preis + Veröffentlichungslink */
.angebot > .details + div > *,
#angebot   #details > div:last-child > * {
   margin: 0 auto;
}

.angebot   .preis,
#angebot   #preis {
   font-size: 20px;
   min-width: 200px;
   max-width: 300px;
   line-height: inherit;
   text-align: center;
   font-weight: bold;
   background-clip: content-box;
   background-color: #29B765;
   color: white;
}

.angebot   .ersparnis,
#angebot   #ersparnis {
   color: #29b765;
   font-weight: bold;
}

.angebot   s,
#angebot   s {
   margin-left: .3em;
   color: gray;
}

.angebot   a.button,
#angebot   a.button {
   font-size: 20px;
   box-sizing: border-box;
   min-width: 200px;
   max-width: 300px;
   line-height: inherit;
   padding: 0 10px 0 15px;
   border: 0 none transparent;
   border-bottom-right-radius: 5px;
   white-space: nowrap;
   text-align: center;
   vertical-align: top;
   font-weight: bold;
   color: whitesmoke;
   background-origin: border-box;
   -webkit-background-image: linear-gradient(to top left, #ff4646, #ffd700);
      -moz-background-image: linear-gradient(to top left, #ff4646, #ffd700);
        -o-background-image: linear-gradient(to top left, #ff4646, #ffd700);
           background-image: linear-gradient(to top left, #ff4646, #ffd700);
   background-color: #ffd700;
}
.angebot   a.button:hover,
#angebot   a.button:hover {
   color: white;
   background-color: #ff4646;
}
.angebot   a.button::after,
#angebot   a.button::after {
   content: "";
   width: 1.1em;
   height: 1.1em;
   margin-left: .8em;
   vertical-align: -1px;
   background-image: url("css/externer_link_button_v1.svg");
}


/*Bewertung rückt unter/über das Bild*/
@media (min-width: 860px)
{
   .angebot > .nebeninfo {
      z-index: 1;
      position: absolute;
      top: 6px;
      right: .25%;
      box-sizing: border-box;
      width: 160px;
      margin-bottom: .4em;
      padding: 0 2px 0 10px;
      text-align: right;
   }

   .angebot   h3,
   .angebot   .zeitraum,
   .angebot   .handel,
   .angebot   .handel + div {
      box-sizing: border-box;
      padding-right: 160px;
   }

   .angebot   .nebeninfo > i {
      display: block;
      margin-top: .6em;
   }

   #angebot   #nebeninfo > i + * {
      font-size: 20px;
   }

   #angebot   form > input + input {
      width: 36px;
      height: 36px;
   }

   #angebot   #preis,
   #angebot   a.button {
      width: 49%;
   }

   #angebot   #preis {
      border-bottom-left-radius: 5px;
   }

   #angebot   a.button {
      float: right;
   }
}/*@media (min-width: 860px)*/


@media (max-width: 859px)
{
   .angebot > .nebeninfo,
   #angebot   #nebeninfo {
      margin-bottom: .6em;
   }

   .angebot > .nebeninfo > *:first-child {
      float: right;
   }

   .angebot > .nebeninfo > i,
   #angebot   #nebeninfo > i {
      max-width: 68%;
   }

   #angebot   #nebeninfo > i + * {
      font-size: 18px;
   }

   #angebot   form > input + input {
      width: 30px;
      height: 30px;
   }

   .angebot > .gutschein,
   #angebot   #gutschein {
      clear: left;
   }

   #angebot   #details > div:last-child > * {
      display: block;
      text-align: center;
   }

   #angebot   #preis {
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
   }

   #angebot   a.button {
      border-bottom-left-radius: 5px;
      -webkit-background-image: linear-gradient(#ffd700, #ff4646);
         -moz-background-image: linear-gradient(#ffd700, #ff4646);
           -o-background-image: linear-gradient(#ffd700, #ff4646);
              background-image: linear-gradient(#ffd700, #ff4646);
   }
}/*@media (max-width: 859px)*/


/*Bild und Preis werden untereinander angeordnet*/
@media (min-width: 660px)
{
   .angebot > a,
   .angebot   .preis,
   #angebot > div > div:first-child {
      float: left;
   }

   .angebot > a,
   .angebot   .preis,
   .angebot   a.button {
      width: 25%;
   }

   #angebot > div > div:first-child {
      width: 31%;
   }

   #angebot   #nebeninfo > i + * {
      display: block;
      display: none;
      margin-top: .6em;
   }

   .angebot > .details,
   #angebot   #details {
      box-sizing: border-box;
      padding-left: 15px;
   }

   #angebot   #details {
      padding-bottom: 55px;
   }

   #angebot   #details > div:nth-last-child(2) {
      margin-bottom: 1em;
   }

   .angebot   .gutschein,
   #angebot   #details > div:last-child {
      position: absolute;
      bottom: 0;
      left: 15px;
      right: 2px;
   }
   .angebot   .gutschein {
      right: 0;
   }
   #angebot   #details > div:last-child {
      right: 2px;
   }

   .angebot > .details + div {
      clear: left;
      padding-left: 0;
   }

   .angebot   .ersparnis {
      vertical-align: middle;
      padding-left: 15px;
   }

   .angebot   .preis {
      border-bottom-left-radius: 5px;
   }

   .angebot   a.button {
      float: right;
   }
}/*@media (min-width: 650px)*/


@media (max-width: 659px)
{
   .angebot > a > img,
   #angebot   #bild {
      max-height: 200px;
      width: auto;
   }

   #angebot   #nebeninfo > *:last-child {
      float: right;
   }

   #angebot   #details {
      min-height: 0 !important;
      padding-bottom: 0 !important;
   }

   .angebot > .details {
      min-height: 0 !important;
      padding-bottom: 0 !important;
   }

   .angebot > .details + div > * {
      display: block;
      width: 80%;
   }

   .angebot   .ersparnis {
      text-align: center;
   }

   .angebot   .preis {
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
   }

   .angebot   a.button {
      border-bottom-left-radius: 5px;
      -webkit-background-image: linear-gradient(#ffd700, #ff4646);
         -moz-background-image: linear-gradient(#ffd700, #ff4646);
           -o-background-image: linear-gradient(#ffd700, #ff4646);
              background-image: linear-gradient(#ffd700, #ff4646);
   }
}