/*** Online Formular ***/

/* old? */
contact-additionalfields div.row.additional-fields {
  padding-right: 15px;
}
contact-additionalfields div.row.additional-fields div.columns.small-12 {
  border: 1px solid #cccccc;
  padding: 25px 15px 10px 20px;
  margin-left: 10px;
  margin-bottom: 20px;
}
contact div.contact-wrapper.open div div.row div.checkboxes.small-12.columns div.contact-checkbox-wrapper div.row {
  padding: 5px 21px;
}
div.contact-checkbox-wrapper div.row div.small-12.columns checkbox-button label.radio span {
  padding-top: 5px;
  font-size:0.9rem;
}

/* new */
.additional-fields {
  padding-left: 21px;
}
.additional-fields > div:nth-child(1) > checkbox-button:nth-child(1) > label:nth-child(2) > span:nth-child(2) {
  font-size: 0.9rem;
  line-height: 18px;
}

/* Gewinnspiel-Button Teilnahme */
/* DISABLE GEWINNSPIEL [block|none] */
.additional-fields > div:nth-child(1) > checkbox-button:nth-child(1) {
	display: none; /* DISABLE 1.1.2025 @EWI */
} 


/* Gewinnspielbanner Desktop */
/* DISABLE 8.1.2025 @EWI */
/*
@media (min-width: 521px) {
  .bonus-list-wrapper > div:nth-child(1) {
    background: url('https://css.twingle.umweltinstitut.org/img/gewinnspiel-desktop.jpg') no-repeat top;
    background-size: contain;
    width: 100%;
    height: 150px;
    margin-bottom: 90px;
  }

  .bonus-list-wrapper > div:nth-child(1) > label:nth-child(1) {
    margin-top: 180px;
    padding-left: 20px;
  }
}

/* Gewinnspielbanner Mobile */
/* DISABLE 8.1.2025 @EWI */
/*
@media (max-width: 520px) {
  .bonus-list-wrapper > div:nth-child(1) {
    background: url('https://css.twingle.umweltinstitut.org/img/gewinnspiel-mobile.jpg') no-repeat top;
    background-size: contain;
    width: 100%;
    height: 220px;
    margin-bottom: 90px;
  }
  .bonus-list-wrapper > div:nth-child(1) > label:nth-child(1) {
    margin-top: 230px;
    padding-left: 20px;
  }
}
@media (max-width: 430px) {
  .bonus-list-wrapper > div:nth-child(1) {
    height: 200px !important;
  }
  .bonus-list-wrapper > div:nth-child(1) > label:nth-child(1) {
    margin-top: 210px !important;
  }
}
@media (min-width:381px) and (max-width: 400px) {
  .bonus-list-wrapper > div:nth-child(1) {
    height: 200px;
  }
  .bonus-list-wrapper > div:nth-child(1) > label:nth-child(1) {
    margin-top: 210px;
  }
}
@media (min-width:361px) and (max-width: 380px) {
  .bonus-list-wrapper > div:nth-child(1) {
    height: 180px;
  }
  .bonus-list-wrapper > div:nth-child(1) > label:nth-child(1) {
    margin-top: 190px;
  }
}
@media (min-width:341px) and (max-width: 360px) {
  .bonus-list-wrapper > div:nth-child(1) {
    height: 160px;
  }
  .bonus-list-wrapper > div:nth-child(1) > label:nth-child(1) {
    margin-top: 170px;
  }
}
@media (max-width: 340px) {
  .bonus-list-wrapper > div:nth-child(1) {
    height: 140px;
  }
  .bonus-list-wrapper > div:nth-child(1) > label:nth-child(1) {
    margin-top: 150px;
  }
}
/**/

/* Farben */
.payment-component-wrapper .method-wrapper {
  background: #fff;
}

button.button.inactive, a.button.inactive,
input[type="radio"] + label  {
  background: #f6f6f6;
}

div.method-wrapper.method-count-2 div.konfipay radio span.ng-invalid.ng-dirty.ng-touched label.radio {
  background: #fff;
}

.ng-pristine.ng-valid:active {
  background: #e3f4e2;
}

/* Button */
button.button.grey, a.button.grey {
  background: #ff5178;
  color: #fff;
  width: 332px;
  height: 49px;
  padding: 12px 1px 14px 0;
  border-radius: 25px;
  margin: auto auto 20px auto;
}

button.button.grey:focus, a.button.grey:hover {
  background: #f6f6f6;
  color: #fff;
}

button.button.grey + .hint, a.button.grey + .hint {
  background: #fff;
}

/*
.non-touch button.button:hover, .non-touch a.button:hover {
  background: #222;
  color: #220;
}
*/

/* Texte: */
input::placeholder, textarea::placeholder {
  color: #222 !important;
  /*color: #777777;*/
  font-size: 0.9rem;
}

label {
  margin-bottom: 15px !important;
}

/*
form.ng-untouched.ng-pristine.ng-invalid app-bonus div.row.collapse.bonus-list-wrapper div.column label,
.rythm_target-wrapper.ng-untouched.ng-pristine.ng-invalid div.columns.small-12 div.row.columns label,
.amount-wrapper.currency-EUR.row.ng-untouched.ng-pristine.ng-invalid div.columns.small-12 label  {
color:#777777 !important;
margin-bottom: 20px;
font-size: 0.8rem; !important
}
*/

h2,p.hint {
  color: #777777 !important;
  font-size: 0.8rem; !important
}

h1,
div.impress-wrapper {
  display: none;
}

form.ng-touched.ng-dirty.ng-invalid app-bonus div.row.collapse.bonus-list-wrapper.selected div.column label {
  color: #220;
}

/* ----------------------------------------- */
@media screen and (min-width: 36.25em) {
  .infotext.medium-right::before {
    border-color: transparent #e3f4e2 transparent transparent;
  }
}

/* ----------------------------------------- */

/* Eingabe Felder */
[type="text"], [type="password"], [type="date"], [type="datetime"], [type="datetime-local"], [type="month"], [type="week"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="time"], [type="url"], [type="color"], textarea {
  border: 1px solid #cccccc;
  border-radius: 1px;
}

.input-wrapper.info > i {
  font-size: 20px;
  background: rgba(117, 198, 108,);
  color: #fff;
  border-radius: 0 1px 1px 0;
}

input::placeholder, textarea::placeholder {
  color: #777777;
}

.bonus-wrapper.none checkbox-button.no-error label.radio span {
  font-size:0.8rem ;
}

/* Adressfelder */
.salutation-wrapper div.row.column label.nomargin {
  margin: 0!important;
}

div.name div.row div.columns.small-12.medium-4.salutation-wrapper div.row.column {
  margin-bottom: 4px;
}

.contact-wrapper .salutation-wrapper .collapse .columns:first-child input[type="radio"] + label, 
.contact-wrapper .salutation-wrapper .collapse .columns:last-child input[type="radio"] + label {
  border-radius: 0;
}

.contact-wrapper .salutation-wrapper input[type="radio"] + label {
  border: 1px solid #cccccc;
}

/*
.salutation-wrapper div.row.collapse div.columns.small-4.end radio span.ng-invalid.ng-dirty.ng-touched label.radio {
    background: transparent;
}
*/

select#country {
  border: 1px solid #cccccc;
  color: #777;
  font-size:0.9rem;
}

contact-additionalfields div.row.additional-fields div.columns.small-12 checkbox-button label.radio {
  font-size: 0.9rem;
}

.contact-wrapper .additional-fields > :not(.no-margin) {
  margin: 0px;
}

/* Hinweise */
.infotext.top::before {
  border-color: #e3f4e2 transparent transparent transparent;
}
.infotext::before {
  border-color: transparent transparent #e3f4e2 transparent;
}

.callout {
  border: 1px solid #cccccc;
  border-radius: 1px;
  color: #777777;
  background-color: #fff;
}

.infotext {
  background: #e3f4e2;
}

.infotext::before {
  background: transparent;
}

/* Mobile */
button.button.arrow::after, a.button.arrow::after {
  background: transparent;
  content: inherit;
}

step-navigation div.row.columns.step-navigation span {
  font-weight: bold;
}

.contact-wrapper.closed .wrapper {
  background: #fff;
}

.non-touch button.button.arrow:hover::after, button.button.arrow:active::after, button.button.arrow:focus::after, .non-touch a.button.arrow:hover::after, a.button.arrow:active::after, a.button.arrow:focus::after {
  background: #f6f6f6;
  color: #fff;
}

/* Mobile Style */
@media (max-width: 579px) {

}

submit button.button.arrow,
submit button.button  {
  background: #ff5178;
  color: #fff;
  width: 332px;
  height: 49px;
  padding: 12px 1px 14px 0;
  border-radius: 25px;
  margin: auto auto 20px auto;
}

.non-touch button.button.arrow:hover::after, button.button.arrow:active::after, button.button.arrow:focus::after, .non-touch a.button.arrow:hover::after, a.button.arrow:active::after, a.button.arrow:focus::after,
button.button.grey:focus, a.button.grey:hover {
  background: #f6f6f6;
  color: #fff;
}

button.button + .hint, a.button + .hint {
  background: #fff;
}

.widget-header.widget {
  background: #fff;
}

/*** Prämien ***/
.bonus-list-wrapper .bonus-wrapper{
  box-shadow: none;
  padding: 20px;
}

.bonus-list-wrapper .bonus-wrapper h3 {
  font-size: 0.9rem;
  line-height: 20px;
  color: #202020 !important;
}

.bonus-list-wrapper .bonus-wrapper h3 i {
  color: #75c66c;
  font-size: 20px;
}

.bonus-list-wrapper .bonus-wrapper.none {
  margin-top: 0px;
}
.bonus-list-wrapper .bonus-wrapper.none label {
  color: #75c66c;
}

label.radio i.twingle-checkbox-unchecked {
  font-size: 22px;
}

.twingle-checkbox-unchecked::before {
  content: "\ea57";
  font-size: 22px;
}
.twingle-checkbox-checked2::before {
  content: "\e920";
  font-size: 22px;
}

.bonus-list-wrapper .bonus-wrapper.selected {
  box-shadow: none;
}

div.form.bonus-details app-bonus div div.row.bonus-details-wrapper div.column.small-8.medium-6 button.button {
  background: #ff5178;
  color: #fff;
  width: 332px;
  height: 49px;
  padding: 12px 1px 14px 0;
  border-radius: 25px;
  margin: auto auto 20px auto;
}

.bonus-list-wrapper div.column.small-12 div.bonus-wrapper.none checkbox-button.no-error label.radio{
  margin-bottom: 0;  
}

/*
div.form.bonus-details app-bonus div div.row.bonus-details-wrapper div.column.small-8.medium-6 button.button:hover {
  background: #222;
  color: #220;
}
*/
div.bonus-wrapper.none checkbox-button.no-error label.radio span {
  padding-top: 6px;
  font-size: 0.9rem;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/*** Shop  ***/
.shop-cart-icon {
  background:transparent;
  font-weight:bold;
}

.shop-category-filter a.button:first-child,
.shop-category-filter a.button:last-child {
  border-radius:0;
}

.shop-product-list .shop-product {
  padding: 35px;
}

.shop-product-list .shop-product h2 {
  color:#222;
}

.shop-price.free-price {
  background:transparent;
}

.cart-change button.free-price {
  color: #fff;
  font-weight: bold;
}

.shop-product-list-buttons p {
  background: transparent;
  color:#222;
}

.shop-list-more a {
  font-weight: bold;
  font-size: 120%;
  margin: 40px 0 60px 0;
  font-size: 22px;
}

/* Produktdetail */
shop-detail div.shop-detail.row.ng-invalid.ng-dirty.ng-touched div.column.small-12.medium-6,
shop-detail div.shop-detail.row.ng-untouched.ng-pristine.ng-invalid div.column.small-12.medium-6 {
  padding: 5% !important;
}

a.shop-dl-link {
  color:#353434;
}
a.shop-dl-link:hover, a.shop-dl-link:fokus {
  color: #75c66c;
}

.end button.button.free-price,
shop-list div.shop-product-list-buttons.row.column button.button.arrow.arrow-right,
div.shop-detail.row.ng-invalid.ng-dirty.ng-touched div.column.small-12.medium-6 div.row.collapse.cart-change div.column.medium-12.end button.button.free-price,
shop-detail div.shop-detail.row.ng-pristine.ng-invalid.ng-touched div.column.small-12.medium-6 div.row.collapse.cart-change div.column.medium-12.end button.button.free-price {
  background: #ff5178;
  color: #fff;
  width: 330px;
  height: 49px;
  padding: 12px 1px 14px 0;
  border-radius: 25px;
  margin: 20px auto 20px auto;
}

div.shop-detail.row.ng-invalid.ng-dirty.ng-touched div.column.small-12.medium-6 div.row.collapse.cart-change div.column.medium-12.end button.button.free-price:hover,
div.shop-product.ng-untouched.ng-pristine.ng-invalid div.row.collapse.cart-change div.column.small-12 button.button.free-price:hover {
  background: #f6f6f6;
  color: #fff;
}

/* Checkout */
shop shop-cart div.shop-cart div.row.column.button-wrapper button.button.arrow.arrow-right {
  background: #ff5178;
  color: #fff;
  width: 330px;
  height: 49px;
  padding: 12px 1px 14px 0;
  border-radius: 25px;
  margin: 20px auto 20px auto;
}

/*
donation-app div.form.start form.ng-untouched.ng-pristine.ng-invalid app-bonus div.row.collapse.bonus-list-wrapper {
  display: grid;
  align-content: center;
  background: url('https://css.twingle.umweltinstitut.org/img/test.jpg') no-repeat top;
  background-size: cover;
  margin-top: 50px;
  padding-top: 50px;
  width: 100%;
  height: 100px;
}
*/

/* Beitragserhöhung - Button für Rythmus monatlich ausgeblendet */
rythm-target {
  display: none;
}

/* Share im Checkout ausblenden */

donation-app div.form.thankyou share div.share div.share-content,
shop div.widget.thankyou share div.share.shop div.share-content {
  display: none !important;
}

.arrow {
  padding-top: 8px !important;
}