@charset "UTF-8";
/*
Theme Name: Tierschutz
Author: Ursula Volkart
Author URI: http://www.ateliervolkart.ch/
Description: Theme fuer die Seite des Tierschutz-Vereins Biel/Bienne - Seeland - Berner Jura
Version: 1.0
Screenshot: screenshot.jpg
*/
/*Farben*/
/*Breakpoints*/
/*Fonts*/
.font_text, html, body {
  font-family: "Calibri", sans-serif;
  font-weight: normal; }

.font_titel, h1, h2, h3, h4, h5, h6 {
  font-family: "Calibri", sans-serif;
  font-weight: bold; }

/*Abst├ñnde*/
/*======================================================================
Normalisierung, Startwerte
======================================================================*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

/*Bilder
--------*/
img {
  max-width: 100%;
  height: auto;
  border: none; }

/*Listen
--------*/
ul {
  list-style: none;
  /* Remove list bullets */ }

.seiteninhalt ul li,
.wp-editor ul li {
  padding-left: 1.1em; }
.seiteninhalt ul li:before,
.wp-editor ul li:before {
  content: "\2212";
  /* 2212 Minus  \2022 Bulletpoint  */
  padding-right: 0.65em;
  margin-left: -1.1em;
  color: #90B939; }

/*Weitere Formate
-----------------*/
address {
  font-style: normal; }

table, th, tr, td {
  font-weight: 300;
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left; }

/*Basisklassen
-----------------*/
.nowrap {
  white-space: nowrap; }

.clear {
  clear: both;
  overflow: hidden; }

.hide {
  display: none; }

a.aktiv {
  cursor: default; }

/*Block / Float
-----------------*/
main, header, footer, section, .container {
  display: block;
  clear: both;
  overflow: hidden; }

/*Bilder im Editor
-----------------*/
@media screen and (min-width: 560px) {
  .alignleft {
    float: left;
    margin-right: 20px; }

  .alignright {
    float: right;
    margin-left: 20px; } }
/*Fonts importieren*/
@font-face {
  font-family: 'Calibri';
  font-weight: bold;
  src: url("fonts/calibri_bold.eot");
  src: url("fonts/calibri_bold.eot?#iefix") format("embedded-opentype"), url("fonts/calibri_bold.woff2") format("woff2"), url("fonts/calibri_bold.woff") format("woff"), url("fonts/calibri_bold.ttf") format("truetype"); }
@font-face {
  font-family: 'Calibri';
  src: url("fonts/calibri.eot");
  src: url("fonts/calibri.eot?#iefix") format("embedded-opentype"), url("fonts/calibri.woff2") format("woff2"), url("fonts/calibri.woff") format("woff"), url("fonts/calibri.ttf") format("truetype"); }
/*Typografie*/
html, body {
  color: #333333;
  font-size: 18px;
  line-height: 1.4;
  font-weight: normal;
  background-color: transparent;
  -webkit-text-size-adjust: none; }

@media screen and (min-width: 1400px) {
  html, body {
    font-size: 19px; } }
/*├£berschriften
...............*/
h1, h2, h3, h4, h5, h6 {
  color: #739B1E; }
  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #739B1E;
    text-decoration: none; }

h1 {
  font-size: 135%;
  margin: 0 0 0.67em 0; }

h2 {
  font-size: 135%;
  margin-bottom: 15px; }

h3 {
  font-size: 115%;
  margin-bottom: 10px; }

h4 {
  font-size: 110%; }

h5 {
  font-size: 105%;
  margin-bottom: 0.5rem; }

h6 {
  font-size: 102%;
  margin-bottom: 0.2em; }

@media screen and (min-width: 1400px) {
  h1 {
    font-size: 160%; }

  h2 {
    font-size: 160%; }

  h3 {
    font-size: 125%; } }
/*Abs├ñtze
...............*/
p + p {
  margin-top: 10px; }

/*Klassen
...............*/
.lead {
  font-size: 1.4rem;
  color: #739B1E; }

.legende, .datum {
  font-size: 0.9rem; }

span.gruen {
  color: #739B1E; }

span.textfarbe {
  color: #333333; }

/*Links 
...............*/
a {
  text-decoration: underline;
  color: #333333;
  cursor: pointer; }

a:active, a:hover, a:focus, a:link, a:visited, a.logo {
  outline: none;
  border: none; }

p a {
  text-decoration: underline;
  color: #739B1E;
  cursor: pointer; }

p a:active, p a:hover, p a:focus {
  color: #B1D85F; }

a.telefon, p a.telefon {
  text-decoration: none;
  color: inherit;
  cursor: text; }

/*FontAwesome
...............*/
i.fa {
  padding-right: 10px; }

/* Grundlayout
======================================================================*/
main, footer .footerbox {
  padding: 15px 30px 30px 30px; }
  @media screen and (min-width: 560px) {
    main, footer .footerbox {
      padding: 30px 45px 45px 45px; } }
  @media screen and (min-width: 768px) {
    main, footer .footerbox {
      max-width: 768px;
      width: 768px;
      margin: 0 auto; } }
  @media screen and (min-width: 992px) {
    main, footer .footerbox {
      max-width: 992px;
      width: 992px;
      padding: 45px 45px 60px 45px; } }
  @media screen and (min-width: 1200px) {
    main, footer .footerbox {
      max-width: 1200px;
      width: 1200px; } }

@media screen and (min-width: 1200px) {
  main {
    padding-top: 80px;
    padding-bottom: 150px; } }
@media screen and (min-width: 768px) {
  .seiteninhalt,
  .footerspalte.adresse {
    width: 74%;
    clear: none;
    float: left;
    padding-right: 45px; }

  main nav,
  .footerspalte.footermenu {
    width: 26%;
    float: right; } }
/* Unterpunkte Aufbau
--------------------------------------------*/
.seiteninhalt > div + div {
  margin-top: 45px; }

.js .seiteninhalt > div + div {
  margin-top: 0; }

.js .seiteninhalt > div {
  display: none; }
  .js .seiteninhalt > div:first-child {
    display: block; }

.js .seiteninhalt.spende > div {
  display: block; }

.seiteninhalt article.news + article.news {
  margin-top: 45px; }

/* Layouts
--------------------------------------------*/
.bildertrio > div {
  float: left;
  margin-top: 30px; }
@media screen and (min-width: 420px) {
  .bildertrio div.bild_klein_1, .bildertrio div.bild_klein_2 {
    width: 50%;
    margin-top: 20px; }
  .bildertrio div.bild_klein_1 {
    padding-right: 10px; }
  .bildertrio div.bild_klein_2 {
    padding-left: 10px; } }
@media screen and (min-width: 992px) {
  .bildertrio div.bild_klein_1, .bildertrio div.bild_klein_2 {
    width: 50%;
    margin-top: 30px; }
  .bildertrio div.bild_klein_1 {
    padding-right: 15px; }
  .bildertrio div.bild_klein_2 {
    padding-left: 15px; } }

/*BASISaufbau
------------------------------------------*/
header {
  background-color: white; }
  header .headerbild {
    line-height: 0; }
  @media screen and (min-width: 560px) {
    header {
      background-color: #90B939; } }

.headerbox {
  position: relative; }
  @media screen and (min-width: 560px) {
    .headerbox .headerbild {
      width: calc(100% - 57px); } }
  @media screen and (min-width: 992px) {
    .headerbox .headerbild {
      width: 74%; } }
  @media screen and (min-width: 1200px) {
    .headerbox .headerbild {
      width: 74%;
      height: 560px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; } }
  @media screen and (min-width: 1400px) {
    .headerbox .headerbild {
      height: 700px; } }

@media screen and (min-width: 1200px) {
  .js .headerbild img {
    display: none; } }
/*Logo
------------------------------------------*/
.headerlogo img {
  width: 222px;
  height: 104px;
  margin: 8px 0 12px 8px; }
  @media screen and (min-width: 560px) {
    .headerlogo img {
      width: 249px;
      height: 117px; } }
  @media screen and (min-width: 768px) {
    .headerlogo img {
      width: 300px;
      height: 141px; } }
  @media screen and (min-width: 1200px) {
    .headerlogo img {
      width: 330px;
      height: 155px; } }
  @media screen and (min-width: 1400px) {
    .headerlogo img {
      width: 381px;
      height: 179px; } }
@media screen and (min-width: 560px) {
  .headerlogo {
    position: absolute;
    top: 10px;
    left: 15px; } }
@media screen and (min-width: 1200px) {
  .headerlogo {
    top: 20px;
    left: 30px; } }
@media screen and (min-width: 1400px) {
  .headerlogo {
    top: 30px;
    left: 45px; } }

/*Spendebutton
------------------------------------------*/
.spendebutton {
  background-image: url("img/herzli.png");
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 142px;
  z-index: 890;
  left: 18px;
  -ms-transform: rotate(-15deg);
  /* IE 9 */
  -webkit-transform: rotate(-15deg);
  /* Chrome, Safari, Opera */
  transform: rotate(-15deg); }
  .spendebutton:hover {
    opacity: 0.8; }
  .spendebutton a, .spendebutton a:hover {
    text-decoration: none; }
  @media screen and (min-width: 560px) {
    .spendebutton {
      top: auto;
      left: auto;
      bottom: 5%;
      right: 20px; } }
  .spendebutton a {
    font-size: 16px;
    font-weight: bold;
    color: #739B1E;
    line-height: 1;
    text-align: center;
    display: block;
    height: 100px;
    padding-top: 32px; }
  @media screen and (min-width: 768px) {
    .spendebutton {
      width: 120px;
      height: 120px; }
      .spendebutton a {
        font-size: 18px;
        height: 120px;
        padding-top: 40px; } }
  @media screen and (min-width: 992px) {
    .spendebutton {
      z-index: 990;
      right: 22%; } }
  @media screen and (min-width: 1200px) {
    .spendebutton {
      width: 150px;
      height: 150px;
      bottom: 25%; }
      .spendebutton a {
        font-size: 22px;
        height: 150px;
        padding-top: 55px; } }
  @media screen and (min-width: 1400px) {
    .spendebutton {
      width: 200px;
      height: 200px;
      bottom: 15%; }
      .spendebutton a {
        font-size: 30px;
        height: 200px;
        padding-top: 65px; } }

/*News
------------------------------------------*/
.newsbox {
  clear: both;
  background-color: #E4F6D4;
  padding: 15px 30px 30px 30px;
  padding-right: 0;
  padding-left: 0; }

.newsbox h2, .newsbox article {
  padding: 0 30px; }
  @media screen and (min-width: 560px) {
    .newsbox h2, .newsbox article {
      padding: 0 45px; } }
  @media screen and (min-width: 768px) {
    .newsbox h2, .newsbox article {
      max-width: 768px;
      margin-left: auto;
      margin-right: auto; } }
  @media screen and (min-width: 992px) {
    .newsbox h2, .newsbox article {
      max-width: 992px; } }
  @media screen and (min-width: 1200px) {
    .newsbox h2, .newsbox article {
      max-width: 1200px; } }

@media screen and (min-width: 992px) {
  .newsbox article > div {
    max-width: 622px; } }
@media screen and (min-width: 1200px) {
  .newsbox article > div {
    max-width: 775px; } }

.newsbox article img {
  width: auto !important; }

.owl-nav i {
  color: #90B939;
  font-size: 28px;
  padding: 14px 6px; }
  @media screen and (min-width: 560px) {
    .owl-nav i {
      padding: 12px; } }
.owl-nav .owl-prev, .owl-nav .owl-next {
  background-color: #E4F6D4;
  position: absolute;
  top: 28%; }
.owl-nav .owl-next {
  right: 0; }
  @media screen and (min-width: 992px) {
    .owl-nav .owl-next {
      padding-right: 26%; } }
@media screen and (min-width: 768px) {
  .owl-nav {
    max-width: 768px;
    margin: 0 auto;
    position: absolute;
    width: 100%;
    top: 30%;
    left: 0;
    right: 0; } }
@media screen and (min-width: 992px) {
  .owl-nav {
    max-width: 992px; } }
@media screen and (min-width: 1200px) {
  .owl-nav {
    max-width: 1200px; } }

/*Navigation
------------------------------------------*/
nav a {
  text-decoration: none;
  font-weight: bold; }
  nav a:active, nav a:hover, nav a:focus {
    text-decoration: none; }
  nav a.aktiv {
    cursor: default; }

.js header .navbox {
  display: none; }
  @media screen and (min-width: 992px) {
    .js header .navbox {
      display: block; } }

header .navbox {
  position: relative; }
  @media screen and (min-width: 992px) {
    header .navbox {
      position: absolute; } }

.js header .navbox {
  position: absolute; }

header .navbox {
  background-color: #90B939;
  width: 100%;
  top: 0;
  right: 0;
  z-index: 900;
  padding: 52px 0; }
  @media screen and (min-width: 992px) {
    header .navbox {
      max-width: 26%;
      padding: 20px 0; } }
  @media screen and (min-width: 1200px) {
    header .navbox {
      max-width: 26%; } }
  @media screen and (min-width: 1400px) {
    header .navbox {
      padding-top: 60px; } }
  header .navbox a {
    display: block;
    color: white;
    font-size: 1.14rem;
    text-align: right;
    padding: 4px 20px; }
    @media screen and (min-width: 560px) {
      header .navbox a {
        padding-right: 57px; } }
    @media screen and (min-width: 992px) {
      header .navbox a {
        padding-right: 30px; } }
    @media screen and (min-width: 1200px) {
      header .navbox a {
        padding: 6px 20px;
        padding-right: 45px; } }
    @media screen and (min-width: 1400px) {
      header .navbox a {
        font-size: 1.3rem; } }
  header .navbox li.current_page_parent a, header .navbox li.current-menu-item a {
    background-color: white;
    color: #739B1E; }

/*Subnavi
------------------------------------------*/
ul .sub-menu {
  display: none; }

ul li.current_page_parent .sub-menu,
ul li.current_page_item .sub-menu {
  display: block; }

header .navbox ul .sub-menu a {
  font-weight: normal;
  color: white;
  background-color: #B1D85F; }

header .navbox ul .sub-menu .current-menu-item a {
  text-decoration: underline; }

.js header .navbox ul .sub-menu .current-menu-item a {
  text-decoration: none; }

/*Sprachnavi
------------------------------------------*/
.sprachmenu {
  position: absolute;
  top: 74px;
  right: 0;
  z-index: 800; }
  @media screen and (min-width: 560px) {
    .sprachmenu {
      top: 12px;
      right: 70px; }
      .sprachmenu ul li {
        float: left; } }
  @media screen and (min-width: 992px) {
    .sprachmenu {
      top: 20px;
      right: 28%; } }
  @media screen and (min-width: 1400px) {
    .sprachmenu {
      top: 60px;
      right: 29%; } }
  .sprachmenu ul li a {
    color: white;
    font-size: 1.14rem;
    display: block;
    width: 57px;
    text-align: center;
    background-color: #90B939; }
    @media screen and (min-width: 560px) {
      .sprachmenu ul li a {
        width: 50px;
        padding: 2px 0;
        float: left; } }
    @media screen and (min-width: 1400px) {
      .sprachmenu ul li a {
        font-size: 1.3rem;
        padding: 4px 0;
        width: 70px; } }
  .sprachmenu li a.aktiv {
    background-color: #E4F6D4;
    color: #739B1E; }

/*Seitennavi
------------------------------------------*/
main nav {
  margin-top: 10px;
  margin-bottom: 24px; }
  main nav a {
    color: #739B1E;
    background-color: #E4F6D4;
    padding: 4px 12px;
    font-size: 1.01rem; }
    main nav a.aktiv, main nav a:hover {
      color: white;
      background-color: #90B939; }
    @media screen and (min-width: 992px) {
      main nav a {
        font-size: 1.14rem; } }
    @media screen and (min-width: 768px) {
      main nav a {
        background-color: white; } }
  main nav li {
    display: inline-block;
    margin: 4px 6px 7px 0; }
  @media screen and (min-width: 768px) {
    main nav {
      text-align: right;
      margin: 0; }
      main nav li {
        display: block;
        margin: 15px 0; } }

button.hamburger {
  outline: none;
  position: absolute;
  background-color: #90B939;
  top: 0;
  right: 0;
  z-index: 990; }
  @media screen and (min-width: 992px) {
    button.hamburger {
      display: none; } }

/* Hamburger Menu
------------------------------------------*/
/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 14px 13px 7px 14px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 1; }

.hamburger-box {
  width: 30px;
  height: 23px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -1.5px;
  border-radius: 4px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px;
    height: 3px;
    background-color: white;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }

/*
 * Arrow Right
 */
.hamburger--arrow-r.is-active .hamburger-inner::before {
  transform: translate3d(6px, 50%, 0) rotate(45deg) scale(0.7, 1); }
.hamburger--arrow-r.is-active .hamburger-inner::after {
  transform: translate3d(6px, -50%, 0) rotate(-45deg) scale(0.7, 1); }

footer {
  background-color: #90B939; }
  footer *, footer address a {
    color: white; }
  footer .footerspalte + .footerspalte {
    margin-top: 24px; }
    @media screen and (min-width: 768px) {
      footer .footerspalte + .footerspalte {
        margin-top: 0; } }
  @media screen and (min-width: 768px) {
    footer {
      padding-bottom: 45px; } }

nav.footermenu ul li a {
  display: block;
  padding: 5px 0; }

.spaltenbox article {
  margin-top: 30px; }
  .spaltenbox article img {
    margin-bottom: 5px;
    max-width: 240px; }
    @media screen and (min-width: 420px) {
      .spaltenbox article img {
        max-width: 100%; } }
  @media screen and (min-width: 420px) {
    .spaltenbox article {
      max-width: none;
      width: calc(50% - 10px);
      float: left;
      margin-left: 20px; }
      .spaltenbox article:nth-child(2n + 1) {
        clear: left;
        margin-left: 0; } }
  @media screen and (min-width: 992px) {
    .spaltenbox article {
      width: calc((100% - 40px)/3);
      margin-left: 20px; }
      .spaltenbox article:nth-child(2n + 1) {
        clear: none;
        float: left;
        margin-left: 20px; }
      .spaltenbox article:nth-child(3n + 1) {
        clear: left;
        margin-left: 0; } }
  @media screen and (min-width: 1200px) {
    .spaltenbox article {
      width: calc((100% - 60px)/3);
      margin-left: 30px; }
      .spaltenbox article:nth-child(2n + 1) {
        margin-left: 30px; }
      .spaltenbox article:nth-child(3n + 1) {
        clear: left;
        margin-left: 0; } }

.popup {
  display: none; }

.popup-inner {
  position: relative;
  padding: 24px;
  border: 1px solid #90B939; }

.offen .popup + div {
  display: none; }

/* Close Button */
.popup-close {
  width: 40px;
  height: 40px;
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 0px;
  font-size: 30px;
  text-align: center;
  line-height: 100%;
  color: #90B939; }

@media screen and (min-width: 420px) and (max-width: 991px) {
  .spaltenbox article.offen {
    position: relative; }

  .spaltenbox article.offen {
    margin-left: 0; }

  .spaltenbox article.offen .popup {
    display: block;
    width: calc(200% + 20px);
    position: relative;
    background: white; }

  .spaltenbox article.offen.gerade .popup {
    left: -100%; }

  .spaltenbox article.offen.ungerade .popup {
    left: 0; } }
@media screen and (min-width: 992px) {
  .spaltenbox article.offen {
    position: relative; }

  .spaltenbox article.offen {
    margin-left: 0;
    padding-bottom: 10px; }

  .spaltenbox article.offen .popup {
    display: block;
    width: calc(200% + 20px);
    position: relative;
    background: white; }

  .spaltenbox article.offen.rechts .popup {
    left: calc(-10px - 100%); }

  .spaltenbox article.offen.links .popup {
    left: 10px; }

  .spaltenbox article.offen.mitte .popup {
    left: -50%; }

  /* Inner */
  .popup-inner {
    border: none;
    box-shadow: 0px 2px 6px black;
    background: #fff; }
    .popup-inner div.hauptbild {
      margin-top: 30px; }
    .popup-inner div.galerie {
      margin-top: 30px; }

  /* Close Button */
  .popup-close {
    transition: ease 0.25s all; }

  /* Close Button */
  .popup-close:hover {
    color: #90B939;
    font-size: 34px; } }
.galerie .owl-nav .owl-prev, .galerie .owl-nav .owl-next {
  background-color: transparent; }
.galerie .owl-nav .owl-next {
  padding-right: 0;
  margin-right: -24px; }
.galerie .owl-nav .owl-next.disabled,
.galerie .owl-nav .owl-prev.disabled {
  display: none; }
.galerie .owl-nav .owl-prev {
  margin-left: -24px; }
@media screen and (min-width: 560px) {
  .galerie .owl-nav .owl-next {
    margin-right: -30px; }
  .galerie .owl-nav .owl-prev {
    margin-left: -30px; } }

ul.owl-carousel {
  margin-top: 20px; }
  ul.owl-carousel li {
    padding-left: 0; }
  ul.owl-carousel li:before {
    content: none;
    padding: 0;
    margin: 0; }

.owl-carousel .owl-item img {
  max-width: 100%; }

/*Karte*/
.karte {
  position: relative;
  height: 0;
  overflow: hidden;
  height: 240px; }
  @media screen and (min-width: 992px) {
    .karte {
      height: 410px; } }
  @media screen and (min-width: 768px) {
    .karte {
      height: 300px; } }

.karte iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

/*Formulare
...............*/
/* --------------------------------------------------------
Formular
----------------------------------------------------------*/
#formular h2 {
  margin-bottom: 12px; }

article.formular > p {
  float: left;
  width: 218px;
  padding-top: 5px;
  margin-right: 20px; }

.formular form,
form .formular {
  float: left;
  width: 457px; }

@media screen and (max-width: 770px) {
  article.formular > p, .formular form {
    float: none;
    width: 100%; } }
/*Schrift einheitlich*/
input, textarea, select, button {
  font-family: "Calibri", sans-serif;
  font-size: .9rem;
  color: #5d5d5c; }

/*Abst├ñnde zwischen den Fragen*/
.formular .gruppe {
  margin: 8px 0;
  position: relative;
  height: 55px; }

.formular .textarea, .formular .textarea textarea {
  height: 150px; }

.formular .radio {
  height: 40px;
  padding-top: 8px; }

.formular .checkbox {
  height: inherit;
  margin: 15px 0; }
  .formular .checkbox .checklabelbox {
    margin: 6px 0; }

#honigtopf {
  display: none; }

/*Label*/
.formular label {
  color: #90B939; }

.formular .input label,
.formular .textarea label {
  font-size: 1rem;
  color: #90B939;
  position: absolute;
  top: 15px;
  left: 15px;
  transition: .2s ease all;
  pointer-events: none; }

.formular input:focus + label,
.formular input.used + label,
.formular textarea:focus + label,
.formular textarea.used + label {
  top: 3px;
  font-size: 0.65rem; }

/*Input-Felder*/
.formular .input input,
.formular .textarea textarea {
  display: block;
  position: absolute;
  width: 100%;
  background-color: white;
  padding: 24px 15px 6px 15px;
  font-size: 1rem;
  border: 1px solid #90B939;
  box-shadow: none; }

.formular .input input:focus {
  outline-color: #90B939; }

/*Button*/
button, a.button {
  display: inline-block;
  text-decoration: none;
  border: none;
  box-shadow: none;
  cursor: pointer;
  background-color: #90B939;
  color: white;
  font-size: 1.1rem;
  padding: 8px 15px; }
  button:hover, a.button:hover {
    background-color: #B1D85F;
    color: white; }

button * {
  color: white; }

.buttonbox {
  width: 100%;
  text-align: left; }

.hinweis + .buttonbox {
  margin-top: -20px; }

.input + .buttonbox {
  margin-top: 20px; }

.hinweis p {
  text-align: right;
  color: #90B939; }

.mercihinweis p {
  margin-bottom: 20px; }

/*Fehler*/
.message p, .hinweis p {
  padding: 0; }

.message {
  display: none; }

.fehler, .formular .input input.fehler {
  border: 1px solid red; }

.fehler {
  padding: 8px; }

input[type="checkbox"], input[type="radio"] {
  display: none; }

.radiolabelbox, .kreis, .quadrat {
  display: inline; }

.haken, .inkreis {
  transition: all .3s ease;
  opacity: 0;
  color: #90B939; }

.kreis, .quadrat {
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  background-color: white;
  text-align: center;
  border: 1px solid #90B939; }

.kreis + label, .quadrat + label {
  margin: 0;
  padding: 0 2rem;
  z-index: 640;
  cursor: pointer;
  position: relative; }

input[type="checkbox"]:checked + div .haken,
input[type="radio"]:checked + div .inkreis {
  opacity: 1; }

.haken {
  display: block;
  margin: -2px 0 0 2px; }

.kreis {
  border-radius: .7rem; }

.inkreis {
  display: block;
  width: .8rem;
  height: .8rem;
  border-radius: .4rem;
  border: 1px solid #90B939;
  z-index: 600;
  background-color: #90B939;
  cursor: pointer;
  margin-top: calc(.3rem - 1px);
  margin-left: calc(.3rem - 1px); }

.inkreis.korr {
  margin-top: calc(.31rem - 1px);
  margin-left: calc(.31rem - 1px); }

input[type="number"] {
  border: 1px solid #90B939;
  padding: 6px 0 10px 0;
  width: 70px;
  font-size: 1.5rem;
  color: #90B939;
  text-align: center; }

.gruppe p {
  color: #90B939; }

.mc4wp-form-fields {
  overflow: hidden; }

.mc4wp-response .mc4wp-response {
  margin-top: 15px;
  padding: 8px;
  border: 1px solid #90B939; }

/*Spendetool LEMA
----------------------------------------------------------*/
.spende #lema-container.lema-container .lema-wrapper {
  font-family: "Calibri", sans-serif;
  color: #90B939;
  /*Titel*/
  /*Titel*/
  /*Titel Zahlungsmittel*/
  /* Labels Platzhalter */
  /*Nummer*/
  /*Input, Textarea und Select*/
  /*Betrag Box*/
  /*Einzel-Schritte*/
  /*Button*/
  /*Select Pfeil*/
  /*Radio*/
  /*Checkbox*/ }
  .spende #lema-container.lema-container .lema-wrapper .lema-step-header-text {
    font-weight: bold;
    font-size: 1.3rem; }
  .spende #lema-container.lema-container .lema-wrapper .lema-step-header-text,
  .spende #lema-container.lema-container .lema-wrapper .lema-input-text {
    font-family: "Calibri", sans-serif;
    color: #739B1E;
    letter-spacing: 0; }
  .spende #lema-container.lema-container .lema-wrapper .lema-accordion-item .lema-accordion-header .lema-accordion-item-title {
    font-family: "Calibri", sans-serif;
    color: #333333;
    font-size: 1rem;
    letter-spacing: 0; }
  .spende #lema-container.lema-container .lema-wrapper *::-webkit-input-placeholder {
    font-family: "Calibri", sans-serif;
    color: #739B1E;
    letter-spacing: 0; }
  .spende #lema-container.lema-container .lema-wrapper *:-moz-placeholder {
    /* FF 4-18 */
    font-family: "Calibri", sans-serif;
    color: #739B1E;
    letter-spacing: 0; }
  .spende #lema-container.lema-container .lema-wrapper *::-moz-placeholder {
    /* FF 19+ */
    font-family: "Calibri", sans-serif;
    color: #739B1E;
    letter-spacing: 0; }
  .spende #lema-container.lema-container .lema-wrapper *:-ms-input-placeholder {
    /* IE 10+ */
    font-family: "Calibri", sans-serif;
    color: #739B1E;
    letter-spacing: 0; }
  .spende #lema-container.lema-container .lema-wrapper .lema-step-number span {
    background: #739B1E; }
  .spende #lema-container.lema-container .lema-wrapper .lema-radio-label, .spende #lema-container.lema-container .lema-wrapper .lema-radio-label a {
    color: #90B939;
    font-family: "Calibri", sans-serif; }
  .spende #lema-container.lema-container .lema-wrapper .lema-input-text,
  .spende #lema-container.lema-container .lema-wrapper .lema-input-textarea,
  .spende #lema-container.lema-container .lema-wrapper .select2-container a {
    background-color: white;
    border: 1px solid #90B939;
    color: #333333;
    font-family: "Calibri", sans-serif; }
  .spende #lema-container.lema-container .lema-wrapper .lema-amount-box {
    border-color: #90B939;
    background-color: white; }
    .spende #lema-container.lema-container .lema-wrapper .lema-amount-box span {
      font-family: "Calibri", sans-serif;
      color: #90B939; }
  .spende #lema-container.lema-container .lema-wrapper .lema-amount-box.lema-active {
    background-color: #90B939; }
    .spende #lema-container.lema-container .lema-wrapper .lema-amount-box.lema-active span {
      color: white; }
  .spende #lema-container.lema-container .lema-wrapper .lema-step-content {
    background-color: #E4F6D4; }
  .spende #lema-container.lema-container .lema-wrapper .lema-step-header {
    border: none; }
  .spende #lema-container.lema-container .lema-wrapper .lema-button {
    background-color: #90B939;
    border-radius: 0;
    border: none;
    font-family: "Calibri", sans-serif;
    font-weight: bold;
    font-size: 1.3rem;
    color: white; }
  .spende #lema-container.lema-container .lema-wrapper .select2-container.select2-container .select2-choice div b {
    background-image: url("img/select_arrow_down.png"); }
  .spende #lema-container.lema-container .lema-wrapper input.getunik-radio + label:before {
    background-image: url("img/lema_radio_unchecked.svg"); }
  .spende #lema-container.lema-container .lema-wrapper input.getunik-radio:checked + label:before {
    background-image: url("img/lema_radio_checked.svg"); }
  .spende #lema-container.lema-container .lema-wrapper input[type="radio"] + label,
  .spende #lema-container.lema-container .lema-wrapper input[type="checkbox"] + label {
    font-size: 1rem;
    color: #333333;
    font-family: "Calibri", sans-serif; }
  .spende #lema-container.lema-container .lema-wrapper input.getunik-checkbox + label:before {
    background-image: url("img/lema_checkbox_unchecked.svg"); }
  .spende #lema-container.lema-container .lema-wrapper input.getunik-checkbox:checked + label:before {
    background-image: url("img/lema_checkbox_checked.svg"); }

/*Linie ausblenden, wenn Betrag ausgeblendet*/
.mitgliedschaft #lema-container.lema-container .lema-step-row-amounts {
  border: none;
  padding: 0;
  margin: 0; }

/*Patenschaft: Einmalig ausblenden*/
.patenschaft #lema-container.lema-container .lema-wrapper input[type="radio"]#tiers-75f6-default-donation-type-1,
.patenschaft #lema-container.lema-container .lema-wrapper input[type="radio"]#tiers-75f6-default-donation-type-1 + label {
  display: none; }

.patenschaft #lema-container.lema-container .lema-wrapper input[type="radio"]#tiers-75f6-default-donation-type-2 + label {
  margin-left: 0; }

.gruppe.nummer {
  margin-bottom: 25px; }

p + .gruppe {
  margin: 25px 0; }

p + .dds-widget-container {
  margin-top: 25px; }

.radio .mitgliedschaft {
  display: block;
  margin: 15px 0; }
  .radio .mitgliedschaft label {
    font-weight: bold;
    color: #333333;
    letter-spacing: 0; }

/*# sourceMappingURL=style.css.map */
