/*
Theme Name: lovtheme
Text Domain: lovtheme
Author: Ursula Volkart
Author URI: http://www.ateliervolkart.ch/
Description: Theme für die Seite der Lengnauer Ortsvereinigung
Version: 1.5
Screenshot: screenshot.jpg
*/
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 300;
  src: url('fonts/Ubuntu-Light.woff2') format('woff2');
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  src: url('fonts/Ubuntu-Bold.woff2') format('woff2');
}
/*======================================================================
Normalisierung, Startwerte
======================================================================*/
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html {
    overflow-y: scroll; /*Optional, kein Scrollbalken*/
    -webkit-text-size-adjust: none; /*keine Textvergrösserung iphone*/
}

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

/* Bilder responsive
---------------------------------------------------------*/
img {
    display: block;
    max-width: 100%;
    height: auto;
    border: none;
    flex-shrink: 0;
}
figure {
    margin: 0;
}   

/* Listen
---------------------------------------------------------*/
ul {
    list-style: none; /* Remove list bullets */
}
main ul li {
  padding-left: 1em; 
  padding-top: 0.33rem;
}
main ul li:first-child,
main ol li:first-child  {
  padding-top: 0;
}
main ol li  {
    margin-left: 1em;
    padding-top: .5rem;
}
main ol  {
    padding-top: .5rem;
}
main ul li:before {
    content: "\2022"; /* 2212 Minus  \2022 Bulletpoint  */
    padding-right: 0.6em;
    margin-left: -1em;
    color: inherit;
}

/* Weitere Formate
---------------------------------------------------------*/
address {
    font-style: normal;
    font-weight: normal; 
}
table, th, tr, td {
    font-weight: normal;
    border:none;
    border-collapse:collapse;
    border-spacing:0;
    text-align: left;
}

/*======================================================================
Typografie
======================================================================*/

html {
    font-family: "Ubuntu", sans-serif;    
    font-weight: 300;
    font-style: normal;
    color: #005965;
    font-size: 20px;
    line-height: 1.4;
}
a {
    text-decoration: none;
    border-bottom: 1px solid #2A2101;
    color: #2A2101;
    white-space: normal;
    outline: none;
}
a[href^="tel:"],
a[href^="mailto:"] {
    text-decoration: none;
    border-bottom: none;
}


/* Überschriften 
---------------------------------------------------------*/
/* 1em = 18 px */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Ubuntu', Arial, sans-serif; 
    color: #005965;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}
h1 {
    font-size: 320%;
    margin-bottom: 1em;
    letter-spacing: .5px;
}
h2 {
    /*text-transform: uppercase;*/
    font-size: 280%;
    margin-top: 40px;
    margin-bottom: 24px;
}
h3 {
    font-size: 150%;
    margin-top: 40px;
    margin-bottom: 1rem;
}
h4 {
    font-size: 120%;
    margin-top: 40px;
    margin-bottom: 8px;
}
h5 {    
    font-size: 110%;
    font-family: "Ubuntu", sans-serif;    
    font-weight: 700;
}

@media screen and (max-width: 560px) {
    html main,  html footer { font-size: 15px;}
    h1 { font-size: 160%;}
    h2 { font-size: 160%;}
    h3 { font-size: 120%;}
    h4 { font-size: 110%;}
    h5 { font-size: 100%;}
}

/*======================================================================
LAYOUT (Grundlayout)
======================================================================*/

/* Allgemeine Klassen
---------------------------------------------------------*/

p + p, ol + p, ul + p, figure + p {
    padding-top: 1rem;
}
strong, b {
    font-weight: 700;
}
.rubrik {
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 16px;
    background-color: rgba(77,71,53,1);
    mix-blend-mode: color-burn;
}
.rubrik, .rubrik a {
    color: white;
    border-bottom: none;
    font-family: 'Ubuntu';
    font-size:  16px;
}
.labelrubrik {
    margin-top: -25px;
}
.labelrubrik .rubrik {
    mix-blend-mode: normal;
    padding-left: 16px;
    background-color: #60B395;
}

/* Grundgerüst
---------------------------------------------------------*/


/* Buttons
---------------------------------------------------------*/
div.wp-block-buttons {
    display: flex;
    align-items: baseline;
}
button, .button a,
input[type=submit],
.wp-block-button .wp-block-button__link {
    font-family: 'Ubuntu', Arial, sans-serif; 
    color: #005965;
    border-color: #005965;
    font-weight: 700;
    font-size: 95%;
    display: inline-block;
    text-decoration: none;
    margin: 30px 0 20px 0;
    padding: 10px 20px 10px 20px;
    border: 2px solid #005965;
    transition: all .3s ease;
    border-radius: 0;
    outline: none;
    background-color: transparent;
}
button a, .wp-block-button.is-style-fill .wp-block-button__link {
    color: white;
    background: #005965;
}

.wp-block-button + .wp-block-button a {
    margin-top: 0;
}
button:hover, .button a:hover,
input[type=submit]:hover,
.wp-block-button .wp-block-button__link:hover {
     background-color: rgba(0,113,102,.5);
}
/* Forumlar Button nicht zentrieren */
input[type=submit] {
    margin: 30px 0 20px 0;
}
button a, .wp-block-button .wp-block-button__link {
    color: #005965;
    text-decoration: none;
    border-radius: 0;
}

/*Trennlinien
---------------------------------------------------------*/
.wp-block-separator {
    border-top: 4px solid #eeeeee;
    border-bottom: none;
    margin: 45px 0;
}


/*======================================================================
HEADER
======================================================================*/

header {
}
main .wrapper {
        margin-top: 180px;
}
.logo {
    margin: 0 2%;
}
.logo a {
    padding: 15px 0 20px 0;    
    text-decoration: none;
    border-bottom: none;
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    position: relative;
}
.logo h1 {
    padding-bottom: 22px;
    margin-bottom: 0;
    margin-left: 10px;
}
@media screen and (min-width: 960px) {
    .logo {
        margin: 0 12% 0 30px;
    }
}
@media screen and (min-width: 1200px) {
    .logo {
        margin: 0 12%;
    }
}

/*Fixer Header
---------------------*/

.logozeile {
    position: fixed;
    z-index: 80;
    background-color: white;
    width: 100%;
    box-shadow: 0px 0px 10px 0px rgba(23, 25, 39, 0.1);
}
/*Schmalerer Header animiert*/
.logozeile, .logo, .logo img {
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
 }
 .logozeile {
    box-shadow: 0px 0px 10px 0px rgba(23, 25, 39, 0.1);
    height: 180px;
 }
.logozeile.alternative {
    height: 90px;
}
.logozeile .logo img.icon {
    max-width: 200px;
}
.logo img.schriftzug {
    max-width: 440px;
}
.alternative .logo img.icon {
    max-width: 130px;
}
.alternative .logo img.schriftzug {
    max-width: 230px;
}
.logo h1 {
    padding-bottom: 45px;
    margin-left: 10px;
}
.alternative .logo h1 {
    padding-bottom: 40px;
    margin-left: 20px;
}
.logo h1 span {
    display: none;
}

header .titelbildcontainer  {
    margin-top: 67px;
}
button.hamburger{
    position: fixed;
    z-index: 99;
}
#navigation {
    position: fixed;
    z-index: 9;
    top: 68px;
    background-color: rgb(255, 255, 255);
    width: 100%;
}

@media screen and (min-width: 420px) {  
    #navigation {
        top: 90px;
    }
    header .titelbildcontainer  {
        margin-top: 105px;
    } 
}
@media screen and (min-width: 580px) {
    header .titelbildcontainer  {
        margin-top: 134px;
    } 
}
@media screen and (min-width: 960px) {
    #navigation {
        background-color: transparent;
        width: inherit;
        z-index: 88;
        top: 18px;
        right: 10%;
    }
    header .titelbildcontainer  {
        margin-top: 165px;
    } 
}
@media screen and (min-width: 1200px) {
    #home header .titelbildcontainer {
        margin-top: 220px;
     }

}



/* Hauptnavigation
---------------------------------------------------------*/
#navigation {
    display: none;
    padding: 20px 0 30px 105px;
}
#navigation ul li {
    padding: 10px 0 10px 0;
    position: relative;
}
@media screen and (min-width: 420px) {
    #navigation {
        padding: 20px 0 30px 118px;
    }
}
@media screen and (min-width: 580px) {
    #navigation {
        padding: 30px 0 30px 160px;
    }
}
@media screen and (min-width: 960px) {
    #navigation {
        display: block;
        border-top: none;
        padding-top: 0;
    }
    #navigation ul {
        display: flex;
    }
    #navigation ul li + li {
        margin-left: 1rem;
    }
}
nav a {
    color: #005965;
    font-size: 1em;
    font-family: 'Ubuntu';
    text-decoration: none;
    border-bottom: none;
    white-space: nowrap;
}
.current-menu-item > a, .current_page_parent > a {
    padding-bottom: 5px;
    border-bottom:  1px solid #005965;
}
.hamburger {
    position: absolute;
    top: 0;
    right: 0px;
    z-index: 900;
}


/* Titelbilder
---------------------------------------------------------*/
.titelbild, .slider {
    display: none;
}
.slider .fotorama__stage {
    margin-bottom: 15px;
}
@media screen and (min-width: 460px) {
    .titelbild, .slider {
        display: block;
    } 
    .mobiletitelbild, .mobileslider {
        display: none;
    }
}
@media screen and (min-width:960px) {
    .titelbildcontainer {
        margin: 0 12%;
    }
    #home .titelbildcontainer {
        margin-left: 0;
        margin-right: 0;
    }
}

/*======================================================================
MAIN
======================================================================*/

main {
    max-width: 1920px;
    margin: 0 auto;
}
main .wrapper > *,
main .wrapper > .vollebreite > * {
    margin: 30px 5%;
}
main .wrapper > .vollebreite {
    margin-left: 0;
    margin-right: 0;
    padding-top: 30px;
    padding-bottom: 30px;
}
@media screen and (min-width: 1200px) {
    main .wrapper  > *,
    main .wrapper > .vollebreite > * {
        margin: 45px 12%;
    }
}
/*Spalten / Boxen 
-------------------------------------*/

/*Innere und äussere Abstände*/
main .wp-block-columns {
    margin-bottom: 0;
    gap: 30px;
}
.wp-block-columns .wp-block-column {   
    padding-bottom: 45px;
    margin-bottom: 45px;
} 
.wp-block-columns .wp-block-column.has-background > *,
.bildbox > div:first-child {
    padding-left: 30px;
    padding-right: 30px;
} 
.wp-block-columns .wp-block-column.has-background > *:first-child,
.bildbox > div:first-child > *:first-child {
    margin-top: 40px;
}
.wp-block-columns .wp-block-column.has-background > figure:first-child {
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
} 
/*Ränder Mobil*/
@media screen and (max-width: 560px) {
    .wp-block-columns .wp-block-column.has-background > *,
    .bildbox > div:first-child {
        padding-left: 20px;
        padding-right: 20px;
    }
    .wp-block-columns .wp-block-column {   
        padding-bottom: 30px;
        margin-bottom: 30px;
    }
    .wp-block-separator {
        margin: 30px 0;
    }  
    main .wp-block-columns {
        gap: 0;
    }
    .fusszeile {
        padding-top: 0;
    }
}
@media screen and (min-width:960px) {
    .wp-block-columns .wp-block-column.has-background > *,
    .bildbox > div:first-child {
        padding-left: 8%;
        padding-right: 8%;
    } 
}


/*Breite Box wird einspaltig, nicht zweispaltig*/
@media (min-width: 600px) and (max-width: 781px) {
    .wp-block-columns.breit .wp-block-column,
    .wp-block-columns.breit:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:only-child) {
        flex-basis: 100%!important;
        margin-left: 0;
    }
}
@media (min-width: 782px) {
    .wp-block-columns {
        flex-wrap: wrap!important;
    }
}

/*Lesebreite box*/
@media screen and (min-width: 900px) {
    .wp-block-column.lesebreite {
        padding-right: 60px;
    }    
    .wp-block-column.lesebreite > *:first-child {
        margin-top: 0;
    }
}

/*BildBox*/
.bildbox {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap-reverse;
    margin-bottom: 45px;
}
main .wp-block-columns.bildbox,
body .wp-block-columns.bildbox {
    gap: 0;
    flex-wrap: wrap-reverse!important;
}
.bildbox > div:first-child {
    padding-bottom: 45px;
}
.bildbox > div:nth-child(2),
.bildbox > div:nth-child(2) > div {
    width: 100%;
    height: 65vw;
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
}
main .wp-block-columns.bildbox > div:nth-child(2) {
    margin: 0;
    padding: 0;
}
@media screen and (min-width:782px) {
    .bildbox {
        flex-wrap: nowrap;
    }
    .bildbox > div:first-child {
        width: 66%;
        padding-bottom: 80px;
        margin-bottom: 0;
        padding-top: 20px;
    }
    .bildbox > div:nth-child(2) {
        width: 34%;
        height: auto;
    }
    .bildbox > div:nth-child(2) > div {
        width: 100%;
        height: 100%;
    }
}
.has-dunkelgruen-background-color { background-color: #005965; }
.has-gruen-background-color { background-color: #007065; }
.has-mittelgruen-background-color { background-color: #449A7E; }
.has-hellgruen-background-color { background-color: #60B395; }
.has-schwarz-background-color { background-color: #000000; }
.has-weiss-background-color { background-color: #ffffff; }
.has-hellgrau-background-color { background-color: #eeeeee; }
.has-grau-background-color { background-color: #dcdcdc; }
.has-dunkelgrau-background-color { background-color: #a9a9a9; }

/*News*/

.blog main .wp-block-columns {
    justify-content: flex-start;    
    flex-wrap: wrap!important;
}
@media screen and (min-width:782px) {
    .wp-block-columns .wp-block-column.news {
        flex-basis: calc(50% - 15px);
        flex-grow: 0;
    }
}

/*
@media screen and (min-width:900px) {
    .wp-block-columns .wp-block-column.news {
        flex-basis: calc(33% - 20px);
    }
}
@media screen and (min-width:1400px) {
    .wp-block-columns .wp-block-column.news {
        flex-basis: calc(33% - 20px);
    }
}
*/
.blog main .wp-block-columns {  
    flex-wrap: wrap!important;
}
.blog main .wp-block-columns .wp-block-column {
    min-width: 240px;
    max-width: 800px;
}

/*Vereine*/
@media screen and (min-width:1200px) {
    .wp-block-columns .wp-block-column.verein {
        flex-basis: calc(33% - 20px);
    }
}

/*======================================================================
FOOTER
======================================================================*/
main {
    background-image: url('img/logo_bildmarke.png');
    background-position: right bottom;
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: 350px auto;
}

footer.fusszeile {
    background-color: #005965;
    background-image: url('img/footer_bg.png');
    background-position: left bottom;
    background-repeat: no-repeat; /* Do not repeat the image */
    background-blend-mode: soft-light;
    background-size: 350px auto;
}

.fusszeile {
    margin-top: 0;
    padding-top: 55px;
}
.adresse {
    padding: 0 30px 68px 30px;
}
.fusszeile * {
    color: white;
}
@media screen and (min-width: 1000px) {
    .fusszeile {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
    .adresse {
        padding-left: 8.33%;
    }
}
@media screen and (min-width: 1200px) {
    .fusszeile::before {
        width: 250px;
    }
}

/* Impressum - Fussnavigation
---------------------------------------------------------*/


#fussnavi {padding: 50px 22px 68px 22px;}

#fussnavi ul {text-align: right;}

#fussnavi ul li {
    display: inline-block;
    padding: 0 8px 0 8px;
}
#fussnavi ul li a {
    text-transform: inherit;
    color:white;
}
@media screen and (min-width: 1000px) {
    #fussnavi {
        padding: 0 20px 68px 20px;
    }    
    #fussnavi ul li {
        padding: 0 12px 0 12px;
        line-height: 1rem;
    }    
    #fussnavi li + li {
        border-left: 1px solid white;
    }
}
@media screen and (max-width: 560px) {
    .fusszeile {
        padding-top: 0;
    }
    #fussnavi ul li {
        display: block;
        padding: 0 15px 0 15px;
    }
    #fussnavi {
        padding-top: 0;
    }
}



/*======================================================================
Galerie
======================================================================*/
/*Legende unter Bild*/
.fotorama__caption {
    margin: 0 0 -35px 0;
    width: 100%;
    font-family: 'Ubuntu', sans-serif;
    font-size: .8rem;
    background-color: white;
}
.fotorama__caption__wrap {
    background-color: rgba(255,255,255, 1);
    padding-left: 0;
}
.fotorama__stage__frame.fotorama__loaded--img {
    overflow: visible;
}
.galerie .fotorama__stage {
    margin-bottom: 42px;
    overflow: visible;
}
/*FullScreen*/
.fotorama--fullscreen, .fotorama--fullscreen .fotorama__nav, .fotorama--fullscreen .fotorama__stage {
    background: white;
}
.fotorama--fullscreen .fotorama__caption {
    text-align: center;
    margin-bottom: 0;
}
.fotorama--fullscreen .fotorama__stage {
    margin-bottom: 0;
}
.fotorama__nav--thumbs {
    text-align: left;
}
.fotorama__thumb-border {
    border: 2px dotted #898379;
}

/*======================================================================
Seitenspezifisches
======================================================================*/
/*Startseite*/

#home .seitentitel {
    display: none;
}


/*Waldhaus Tabelle
-----------------------------------*/
.wp-block-table tr {
    border-bottom: 1px solid #5E5847;
}
.wp-block-table tr td {
    padding: 10px 0;
    vertical-align: bottom;
}
.wp-block-table.kosten td:nth-child(2n) {
    white-space: nowrap;
    padding-left: 20px;
    text-align: justify;
    text-justify: inter-word;
    text-align-last: justify;
}
/*News
-----------------------------------*/
.newsnavi  {
    font-family: Ubuntu;
    margin-bottom: 40px;
}
.news .legende {
    font-size: 80%;
    margin-top: 45px;
    margin-bottom: 1rem;
}
/*Google Map*/
.map {
    margin-top: 30px;
}
.map iframe {
    width: 100%;
}

/*====================================================================== 
Hamburger Menü
======================================================================*/

/* von https://jonsuh.com/hamburgers */
.hamburger {
  padding: 12px 12px 4px 12px;
  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;
  outline: none;
  margin: 0;
  overflow: visible; 
}
.hamburger:hover {
  opacity: 1; 
  background-color: transparent;
}
.hamburger-box {
  width: 30px;
  height: 28px;
  display: inline-block;
  position: relative; 
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2.5px; 
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 28px;
    height: 2px;
    background-color: #005965; /*Farbe Balken*/
    border-radius: none;
    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: -8px; 
}
.hamburger-inner::after {
    bottom: -8px; 
}

@media screen and (min-width: 960px) {
    .hamburger {
        display: none;
    }
}

/* Squeeze
---------------------------------------*/
.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 
}
.hamburger--squeeze .hamburger-inner::before {
   transition: top 0.075s 0.12s ease, opacity 0.075s ease; 
}
.hamburger--squeeze .hamburger-inner::after {
   transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
}
.hamburger--squeeze.is-active .hamburger-inner,
.hamburger--squeeze.is-active .hamburger-inner::after {
  background-color: #005965; /*Farbe Kreuz*/
}
.hamburger--squeeze.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.075s ease, opacity 0.075s 0.12s ease; 
}
.hamburger--squeeze.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); 
}

/*UP-Button
---------------------------------------------------------*/

.upbutton {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 88;
}
.upbutton img {
    width: 40px;
    height: 40px;
}
@media only screen and (max-width: 899px) {
    .upbutton {
        left: inherit;
        right: 0;
    } 
}


/*---------------------------------------------------------*/
/*Formular 
---------------------------------------------------------*/
/*Schrift einheitlich*/
input, textarea, select, option, .fileUpload span {
    font-family: "Ubuntu", sans-serif;    
    font-weight: 300;
    font-style: normal;
    color: #2a2101;
    font-size: 18px;
    line-height: 1.5;
    border-radius: 0;
    outline: none;
}
fieldset {
    border: 0;  
    margin:0;
    padding:0;
}
/*Abstände zwischen den Fragen*/
.formular .gruppe {
    margin: 8px 0;
    position: relative;
    height: 55px;
}
.formular .gruppe.einzug {
    padding: 0 20px;
    margin: 15px 0 -5px 0;
}
.formular .number {
    margin: 8px 0;
    position: relative;
    display: flex;
}
.formular .textarea, .formular .textarea textarea {
    height: 181px;
}
.formular .textarea.kurz,
.formular .textarea.kurz textarea {
    height: 55px;
}
.formular .textarea.mittel,
.formular .textarea.mittel textarea {
    height: 110px;
}
.formular .radio,
.formular .checkbox {
    height: inherit;
    margin: 15px 0;
    display: flex;
}    
.checkbox .checklabelbox {
    margin: 6px 0;
}
#honigtopf {
    display: none;
}
/*Label*/
.formular label {
    color: #333;
}
.formular .input label,
.formular .textarea label {
    position: absolute;
    top: 15px;
    left: 15px;
    transition: .2s ease all;
    pointer-events: none;
}
.formular .gruppe input:focus + label,
.formular .gruppe input.used + label,
.formular .gruppe input.valid + label,
.formular textarea:focus + label,
.formular textarea.used + label {
    top: 4px;
    font-size: 0.8rem;
    color: #2A2101;
}
/*Input-Felder*/
.formular .input input,
.formular .textarea textarea
 {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #F1F4E8;
    padding: 24px 24px 6px 15px;
    font-size: 1rem;
    border: none;
    box-shadow: none;
    text-align: right;
}
.formular .number input {
    border: none;
    box-shadow: none;
    background-color: #F1F4E8;
    width: 50px;
    padding: 5px;
    font-size: 1rem;
    text-align: center;
    margin-right: 12px;
}
.formular .textarea textarea {
    text-align: left;
}
.formular .textarea {
   margin-top: 24px;
}
.formular .input input:focus {
    outline-color: #2A2101;
}

/*Select*/
.formular option {
  padding: 8px;
}
.formular select {
  color: #333;
  padding: 15px;
} 

/*Checkbox*/
input[type="checkbox"], input[type="radio"] {
    display: none;
}
.checkbox .quadrat + label {
    float: none;
    width: 100%;
}
.radiolabelbox, .kreis, .quadrat {
    display: inline;
}
.kreuz {
    display: block;
    position: absolute;
    left: 0;
    width: 1.2rem;
    height: 1.2rem;
}
/*IE Hack 8-11*/
@media screen\0 {
   .kreuz {
    left: 10px;
    }
}
.kreuz:before, .kreuz:after {
  position: absolute;
  content: ' ';
  height: 1.4rem;
  width: 1px;
  background-color: #2A2101;
}
.kreuz:before {
  transform: rotate(45deg);
}
.kreuz:after {
  transform: rotate(-45deg);
}
.kreuz, .inkreis {
    transition: all .3s ease;
    opacity: 0;
    color: #2A2101;
    text-indent: 0;
}
.kreis, .quadrat {
    position: absolute;
    width: 1.4rem;
    height: 1.4rem; 
    background-color: #F1F4E8;
    text-align: center; 
    border: none;
}
ul.fehler {
    padding: 10px;
    display: inline-block;
}
.kreis + label, .quadrat + label {
    margin:0;
    padding: 0 2rem;
    z-index: 77;
    cursor: pointer;
    position: relative;
}
@media screen and (max-width: 1400px) {
    .kreis + label, .quadrat + label {
        padding: 0 1.3rem 0 1.8rem;
    }
}
input[type="checkbox"]:checked + div .kreuz,
input[type="radio"]:checked + div .inkreis,
input[type="radio"]:checked + div .kreuz {
    opacity: 1;
}
.kreis {
    border-radius: .7rem;
}
.inkreis {
    display: block;
    width: .8rem;
    height: .8rem;  
    border-radius: .4rem;
    border: 1px solid #2A2101;
    z-index: 600;
    background-color: #2A2101;
    cursor: pointer;
    margin-top: calc(.3rem - 1px);
    margin-left: calc(.3rem - 1px);
}
.inkreis.korr {
    margin-top: calc(.31rem - 1px);
    margin-left: calc(.31rem - 1px);
}

main aside .buttonlink, main aside .button {
    background-color: white;
    color:  #2A2101;
}
.formular ul li:before {
    display: none;
}
.formular ul li {
    margin-bottom: 10px;
    padding: 0;
    display: block;
    overflow: hidden;
    padding-left: 2rem;
    text-indent: -2rem;
}
.formular ul li .subgruppe {
    text-indent: 0;
}
.formular .radio .geschlecht li {
    display: inline-block;
}
.formular .radio .geschlecht li:last-child label {
    padding-right: 0;
}

@media screen and (min-width: 600px) {
    .formular .formbox {
        margin-top: 30px;
    }
}

.auswahltitel {
    display: block;
    margin-bottom: 10px;
}
.gruppe + .gruppe .auswahltitel {
    margin-top: 28px;
}

.subgruppe {
  display: none;
}

input[type="radio"]:checked ~ .subgruppe {
    display: block;
}

#burger.burger,
#nichtburger.nichtburger {
    display: none;
}


/*Fehler und Hinweise
--------------------------------*/
.zusatzhinweis, .formular .legende {
    margin-top: 5px;
    opacity: .8;
}
.buttonbox {
    width: 100%;
    text-align: left;
}
.buttonbox button {
    margin-right: 20px;
}
.input + .buttonbox {
    margin-top: 20px;
}
.mercihinweis p {
    margin-bottom: 20px;
}
/*Fehler*/
.message p, .hinweis p {
    padding: 0;
}
.message {
    display: none;
    padding: 15px;
    margin: 1em 0;
}
.fehler, .formular .input input.fehler, 
.formular .textarea textarea.fehler {
    background-color: rgba(227, 0, 11, 0.3);
}
#mc_embed_signup .formular div.mce_inline_error {
    color: black;
    font-weight: normal;
    padding: 1em;
    background-color: rgba(227, 0, 11, 0.3);
}