@charset 'utf-8';

/*

                                   .+syydmNNMMMMNNmdhso:.             
                                .+dMMMMMMMMMMMMMMMMMMMMMMNho-         
                             .odMMMMMMMMMMMMMMMMMMMMMMMMMMMMMmo.      
                           /dMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMs`    
                         .dMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMN/   
                         dMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMo  
                        /MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM: 
                       :MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMm 
                       +MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM.
                    .NMyyMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM.
                     ++MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMN 
                   .oN:oMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMo 
                 `yMMMN-hMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMm` 
                 /MMMMMMyMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM/  
                  ./++mMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMd   
            ..       .MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM:   
        :sdMMMN/    -oNMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMh+.++  
      :mMMMMMMMMh+hNMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMd+`:yMMd  
      sMMMMMMMMMMMMNy/NMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMd+.`+mMMMMd  
      `hMMMMMMMMNs:  -NMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMmo. :yMMMMMMMd  
        +hdddho-    -MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMmo. .omMMMMMMMMMd  
                    `mMMMMMMMMMMMMMMMMMMMMMMMMMMms-  :hMMMMMMMMMMMMd  
                      :+o+hNMMMMMMMMMMMMMMMMMNs-  .oNMMMMMMMMMMMMMMd  
                            ./ohmNMMMMMMMMNy:   /hMMMMMMMMMMMMMMMMMd  
                                  `-/oNNy:   -sNMMMMMMMMMMMMMMMMMMMd  
                                    :mMy  `+dMMMMMMMMMMMMMMMMMMMMMMd  
                                `:ohMMMy-yNMMMMMMMMMMMMMMMMMMMMMMMMd  
 
                                    Herbert-Wehner-Bildungswerk e. V.          
                                    
*/

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 220221 MOD Alexander Rutz License: none (public domain) */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,dl,var,video,input,textarea,select{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul,dl{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none}html{overflow-y:scroll}body{background-color:#fff}b,strong{font-weight:700}em,i{font-style:italic}h1,h2,h3,h4,h5,h6{font-weight:400}button,input[type=button],input[type=submit],label{cursor:pointer}q:lang(de){quotes:'„' '“' '‚' '‘'}q:lang(en){quotes:'“' '”' "‘" "’"}abbr[title]{border-bottom:1px dotted #888!important;cursor:help}a abbr{cursor:pointer!important}img{-ms-interpolation-mode:bicubic}*{box-sizing:border-box;}

@font-face {
font-family: 'Montserrat';
src: url('../fonts/montserrat-bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'Source Sans Pro';
src: url('../fonts/sourcesanspro-regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Source Sans Pro';
src: url('../fonts/sourcesanspro-bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'Source Sans Pro';
src: url('../fonts/sourcesanspro-it.woff') format('woff');
font-weight: normal;
font-style: italic;
}

a,
a img,
a span,
a:before,
span.dict
span.dict:after,
input,
button,
p.datum,
.aufklapp,
.aufklapp:before,
.leaflet-tile-pane {
transition: all 250ms ease-in;
}

::selection {
color: black;
background: rgba(230,0,20,.2);
}

::-moz-selection {
color: black;
background: rgba(230,0,20,.2);
}

/* 
::-webkit-input-placeholder {color: rgb(55,136,157);}
:-moz-placeholder {color: rgb(55,136,157);}
::-moz-placeholder {color: rgb(55,136,157);}
:-ms-input-placeholder {color: rgb(55,136,157);}
 */
::placeholder {color: rgb(55,136,157);}


img {
-moz-user-select: text;
-webkit-user-select: text;
user-select: text;
-moz-user-drag: none;
-webkit-user-drag: none;
user-drag: none;
}

.klar {
clear: both;
margin: 0;
}

div.text > ul > li {
margin: 0 0 12px 0;
padding-left: 12px;
text-indent: -12px;
}

div.text > ul > li:before {
content: '› ';
display: block;
float: left;
width: 12px;
color: black;
}

:root {
scroll-behavior: smooth;
}

/* 
:focus {
fill: rgb(0,0,255);
color: rgb(0,0,255);
background: transparent;
outline-width: .25em;
outline-style: solid;
outline-color: rgba(0,0,255,.8);
outline-offset: .25em;
}
 */

body,
input,
textarea,
select {
font-family: 'Source Sans Pro';
font-size: 16px;
line-height: 21px;
color: black;
background: rgb(243,243,243);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: none;
-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 4;
-ms-hyphenate-limit-chars: 8 4 4;
hyphenate-limit-chars: 8 4 4;
-webkit-hyphenate-limit-lines: 4;
-ms-hyphenate-limit-lines: 4;
hyphenate-limit-lines: 4;
}

.none {
display: none !important;
}

body > div.main {
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
overflow-x: hidden;
}

header,
header nav form input {
position: relative;
font-family: 'Montserrat';
font-weight: bold;
color: rgb(40,30,0);
}

header h1 a {
display: flex;
flex-flow: row wrap;
width: 100%;
height: 25vw;
max-height: 268px;
}

svg .hell,
svg #kurztext {
fill: rgb(230,0,20);
}

svg .dunkel,
svg #langtext {
fill: rgb(180,15,10);
}

svg .halbton {
fill: rgb(230,50,35);
}

header a svg,
header #map {
display: block;
max-width: 100%;
z-index: 1;
}

header #map {
height: 268px;
background: rgb(230,0,20);
}

#map .leaflet-tile-pane {
opacity: .25;
}

#map:hover .leaflet-tile-pane {
opacity: 1;
}

#map .leaflet-marker-pane img.leaflet-interactive {
cursor: default;
}

div.matomobanner {
display: flex;
flex-flow: row wrap;
gap: 1em;
background: rgb(227,227,227);
padding: 1em;
}

div.matomobanner p {
flex: 1;
}

div.matomobanner div {
display: flex;
flex-flow: row nowrap;
gap: .5em;
}

header nav,
header nav form input {
font-size: 20px;
line-height: 24px;
}

header nav ul {
display: flex;
flex-flow: row wrap;
padding: 20px 0;
gap: .5em 0;
}

header nav li {
flex: 0 0 auto;
}

header nav li:not(.suche):not(#ls):after {
content: '|';
padding: 0 12px;
color: rgb(224,224,224);
}

header nav li#ls {
font-size: .8em;
margin-left: auto;
}

header nav li#ls a {
background: white;
border-radius: 1em;
padding: .25em .75em .25em 1.75em;
background-color: white;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" style="fill: rgb(220,220,220)" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/></svg>');
background-repeat: no-repeat;
}

header nav li#ls.aktiv a {
color: white;
background-color: rgb(230,0,20);
background-image: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 24 24"><polygon style="fill:white" points="8.703613,23.325195 0.439453,15.060547 2.560547,12.939453 8.296387,18.674805 21.271484,0.139648 23.728516,1.860352"/></svg>');
background-repeat: no-repeat;
background-size: 1.2em;
background-position: .3em;
}

header nav li#ls a:hover,
header nav li#ls.aktiv a:hover {
color: white;
background-color: black;
}

header nav a {
color: rgb(40,30,0);
}

header nav a:hover,
header nav li.aktiv a {
color: rgb(230,0,20);
}

header nav form {
width: 8em;
}

header nav form label {
width: 100%;
}

header nav form label span {
display: none;
}

header nav form input {
width: calc(100% - 20px);
}

header nav form input {
color: rgb(230,0,20);
padding: 0 4px;
}

header nav form input:focus {
color: rgb(128,128,128);
background: white;
}

header nav form svg {
stroke: rgb(128,128,128);
stroke-width: 2.5;
margin: 0 4px 0 0;
}

header nav form svg.aktiv {
stroke: rgb(230,0,20);
}

header a svg#monster {
height: 100%;
width: auto;
transition: transform 250ms ease-out;
transform-origin: left center;
}

header a svg#wehnerwerk {
margin: auto 0 0 auto;
height: 45%;
}

header a svg#wehnerwerk g {
transition: fill 250ms ease-out;
}

header a:hover svg#wehnerwerk .dunkel {
fill: rgb(230,0,20);
}

header a:hover svg#wehnerwerk .hell {
fill: rgb(180,15,10);
}

header a:hover svg#monster {
transform: scaleX(1.05);
}

header a svg#monster polygon.halbton {
transition: all 250ms ease-out;
transform: translateX(0);
}

header a:hover svg#monster polygon.halbton {
transform: translateX(-55%);
}

section div.bulletin {
width: calc(100% + 32px);
padding: 16px;
margin: -16px -16px 16px -16px;
background: rgba(230,0,20,.1);
}

section.start div.bulletin {
width: 100%;
margin: 0 0 24px 0;
}

section.artikel,
section.aktuell,
section.team,
section.bildung,
section.suche {
padding: 16px;
background: white;
}

section.wartung {
margin-top: 24px;
}

section:not(.sitemap) nav h3 {
font-style: italic;
margin: 0 0 4px 0;
}

section nav li {
margin: 0 0 6px 0;
line-height: 20px;
}

section:not(.sitemap) nav li#extras-fuer-gruppen {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgb(40,30,30);
}

section.sitemap nav h3 {
margin-top: 32xpx;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid rgb(40,30,30);
}

section nav li#extras-fuer-gruppen:before {
content: '';
}

section nav a {
color: rgb(40,30,30);
}

section nav a:hover {
color: rgb(230,0,20);
}

section nav li.aktiv a {
font-weight: bold;
color: rgb(230,0,20);
}

section > *,
article > * {
display: inline-block;
vertical-align: top;
}

section nav {
width: 176px;
padding: 16px;
}

section.sitemap nav {
width: auto;
padding: 0;
}

section article {
width: calc(100% - 176px);
}

article main {
width: 60%;
padding: 9px 16px 16px 16px;
}

.fbox.txt {
display: flex;
flex-flow: row-wrap;
}

.fbox.txt main {
max-width: 36em;
padding: 9px 16px 64px 16px;
margin: auto;
}

.team article main {
width: 100%;
padding-right: 0;
}

article.anmeldung main,
.suche article main {
width: 100%;
max-width: 40em;
padding: 0;
margin: 0 auto;
}

.suche article main {
max-width: 100%;
}

article.voll main {
width: 100%;
}

article aside {
width: 40%;
padding: 16px 0 0 16px;
}

main {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

article p,
main > ul,
main > ol,
main > dl {
margin: 0 0 10px 0;
}

main > ul > li ul {
margin: 10px 0;
}

article p.datum {
margin: 0;
color: rgb(100,80,80);
}

main ol {
list-style-type: decimal;
padding-left: 24px;
}

main ol > li {
margin: 0 0 5px 0;
padding-left: 4px;
}

main > ul:not(.team):not(.angebote):not(.partner):not(.suche):not(.obj) > li,
main > ul:not(.team):not(.angebote):not(.partner):not(.suche):not(.obj) > li ul li {
margin: 0 0 5px 0;
padding-left: 12px;
text-indent: -12px;
}

main > ul:not(.team):not(.angebote):not(.partner):not(.suche):not(.obj) > li:before,
main > ul:not(.team):not(.angebote):not(.partner):not(.suche):not(.obj) > li ul li:before {
content: '› ';
display: block;
float: left;
width: 10px;
margin-left: 2px;
color: black;
}

main cite {
font-style: italic;
}

main img {
max-width: 100%;
}

main h2 {
font-family: 'Montserrat';
font-size: 24px;
line-height: 30px;
font-weight: bold;
margin: 0 0 12px -1px;
color: rgb(230,0,20);
}

main * + h2 {
margin-top: 32px;
}

main h2 span {
font-size: .8em;
color: rgb(128,128,128);
}

main h3,
dl dt {
font-family: 'Montserrat';
font-size: 20px;
line-height: 26px;
font-weight: bold;
margin: 24px 0 8px 0;
color: rgb(40,30,30);
}

.woerterbuch dt {
margin-top: 0;
}

.angebot main h3 {
color: rgb(230,0,20);
}

main h2 + h3 {
margin-top: 20px;
}

main h4 {
font-family: 'Montserrat';
font-weight: bold;
margin: 12px 0 8px 0;
color: rgb(40,30,30);
}

main h3 + h4 {
margin-top: 8px;
}

main h5,
main h6 {
font-size: 16px;
line-height: 20px;
font-style: italic;
margin: 16px 0 4px 0;
color: rgb(40,30,30);
}

main * a,
span.dict,
aside p a,
div.matomobanner a {
color: rgb(40,30,0);
border-bottom: 1px solid rgb(230,0,20);
}

main * a[target="_blank"]:after {
content: ' ›››';
color: rgb(230,0,20);
}

* h3 a {
border-bottom-color: transparent;
}

main * a:hover,
span.dict:hover,
aside p a:hover,
ul li h4 a:hover,
div.matomobanner a:hover {
color: rgb(230,0,20);
border-bottom-color: transparent;
}

main * a:active,
aside p a:active,
div.matomobanner a:active {
border-bottom-color: rgb(230,0,20);
}

aside div.ansprechpartner a.team,
main * a[href^='tel:'],
aside p a[href^='tel:'],
ul.team h3 a,
ul.angebote h4 a {
border-bottom: none;
}

a.knopf,
input[type="submit"],
.consent button {
background: rgb(230,0,20);
color: white;
font-size: initial;
display: inline-block;
padding: .5em .75em;
margin: 0;
border: none;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

.anmeldung a.knopf {
margin: 0 8px 8px 0;
}

a.knopf:hover,
input[type="submit"]:hover,
.consent button:hover {
background: rgb(40,30,0);
}

a.knopf:active,
input[type="submit"]:active {
color: rgb(230,0,20);
background: rgba(40,30,0,.1);
}

hr {
background: rgb(222,222,222);
height: 1px;
border: none;
margin: 32px 0;
}




/* Marginales */
aside h3 {
font-style: italic;
margin: 0 0 10px 0;
color: black;
}

aside div {
margin: 0 0 24px 0;
background: rgb(238,236,236);
overflow: hidden;
}

aside div.ansprechpartner + div.ansprechpartner {
margin-top: -16px;
}

aside div.ansprechpartner img {
display: inline-block;
vertical-align: top;
padding: 8px 16px 8px 8px;
width: 50%;
}

aside div.ansprechpartner p {
display: inline-block;
vertical-align: top;
width: 100%;
padding: 8px 10px 0 12px;
}

aside div.ansprechpartner img + p {
width: 50%;
padding: 8px 10px 0 0;
}

aside div.ansprechpartner i {
color: rgb(115,102,102);
}

aside div.ort {
padding: 9px 10px 0 12px;
}

aside div.preis {
padding: 9px 10px 1px 12px;
}


/* Galerien */
.galerie {
margin: 0 -16px 16px 0;
}

.galerie li {
display: inline-block;
vertical-align: top;
margin: 0 16px 16px 0;
width: calc(50% - 16px);
}

.galerie img {
display: block;
width: 100%;
height: auto;
box-shadow: 0 0 4px rgba(0,0,0,.1);
}

.galerie a:hover img {
box-shadow: 0 0 8px rgba(0,0,0,.33);
}


/* Downloads */
.downloads {
margin: 0 0 32px 0;
}

.downloads li a {
display: inline-block;
padding: 8px;
width: 100%;
color: black;
background: rgb(238,236,236);
}

.downloads li a:hover {
color: rgb(40,30,0);
background: white;
box-shadow: 0 0 12px rgba(0,0,0,.2);
}

.downloads li a p {
margin: -2px 0 0 0;
}

span.dok {
display: block;
float: left;
padding: 8px;
margin: 0 8px 0 0;
color: white;
background: rgb(112,108,108);
}

.downloads li a:hover span.dok {
background: rgb(230,0,20);
}

ul.team li,
dl.woerterbuch div {
margin: 0 0 32px 0;
}

ul.team li:target,
dl.woerterbuch div:target {
padding: 16px;
margin: 0 0 32px -16px;
background: rgba(230,0,20,.8);
}

ul.team li:target *,
dl.woerterbuch div:target dt,
dl.woerterbuch div:target dd {
color: white;
}

dl.woerterbuch div:target dt:before {
content: '› ';
}

ul.team li > * {
display: inline-block;
vertical-align: top;
}

ul.team li img {
width: 40%;
}

ul.team li div {
width: 100%;
padding: 0;
}

ul.team li img + div {
width: 60%;
padding: 0 0 0 16px;
}

ul.team li div h3 {
margin-top: -3px;
}

span.dict {
border-bottom-style: dotted;
}

span.dict:after {
content: 'i';
display: inline-block;
vertical-align: middle;
font-family: Georgia, serif;
font-weight: bold;
font-style: italic;
text-align: center;
text-indent: 0;
font-size: 1em;
line-height: 1;
width: 1em;
height: 1em;
color: rgb(230,0,20);
background: rgba(230,0,20,.1);
border-radius: .5em;
margin: 0 0 0 .25em;
transform: translateY(-.1em);
}

span.dict:hover:after {
color: white;
background: rgb(230,0,20);
}


/* Startseite */

section.start article > * {
display: inline-block;
vertical-align: top;
}

section.start article {
width: 100%;
padding: 4px 0 0 0;
}

section.start article h3 {
font-family: 'Montserrat';
font-weight: bold;
}

.news h4 {
font-weight: bold;
}

.news a,
a.zurueck {
color: rgb(40,30,0);
}

.news a:hover {
color: rgb(230,0,20);
}

a.zurueck:hover {
color: white;
background: rgb(230,0,20);
}

.start article div.news {
width: 33%;
width: calc(100% / 3 - 6px);
padding: 10px 16px 12px 0;
box-shadow: 16px 0 16px rgba(0,0,0,.1);
}

.start article div.news > a {
float: right;
}

.start article div.news ul {
margin-top: 8px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

.start article div.news li {
padding-top: 8px;
border-top: 1px solid rgb(64,64,64);
}

.start article div.news li > * {
display: inline-block;
vertical-align: top;
}

.start article div.news li img {
width: 33%;
width: calc(100% / 3);
margin: 6px 0 13px 0;
}

.start article div.news li img + div {
width: 66%;
width: calc(100% / 3 * 2);
padding: 0 0 0 16px;
}

.start article div.news ul li a {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
color: black;
border-bottom: 1px solid rgb(180,15,10);
}


/* Startkacheln */
.start article div.angebote {
width: 66%;
width: calc(100% / 3 * 2 + 6px);
padding: 0 0 0 32px;
}

.start article div.angebote li {
margin: 0 16px 16px 0;
width: calc(50% - 8px);
display: inline-block;
vertical-align: top;
} 

.start article div.angebote li:nth-child(even) {
margin: 0 0 16px 0;
}

.start article div.angebote li a {
display: block;
}

.start article div.angebote li a:hover {
box-shadow: 0 0 16px rgba(0,0,0,.333);
}

.start article div.angebote li a,
.start article div.angebote li a h3 {background: rgb(230,0,20);}

.start article div.angebote li img {
width: 100%;
height: auto;
display: block;
opacity: 1;
}

.start article div.angebote li a:hover img {
opacity: .5;
}

.start article div.angebote li h3 {
font-size: 20px;
line-height: 26px;
color: white;
padding: 8px;
width: 100%;
}

.start article div.angebote li a:hover h3 {
background: rgb(180,15,10);
}

.start div.angebote ul li h3 svg {
display: inline-block;
vertical-align: top;
margin: 0 8px 0 0;
background: transparent;
fill: white;
}

/* Starttext */
.start article div.text {
width: 33%;
width: calc(100% / 3);
font-size: 20px;
line-height: 26px;
color: rgb(96,96,96);
padding: 18px 0;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

/* Slots */
.start article div.slots {
width: 66%;
width: calc(100% / 3 * 2);
padding: 24px 0 0 26px;
}

.start article div.slots ul {
display: flex;
flex-flow: row wrap;
}

.start article div.slots ul li {
width: calc((100% - 48px) / 4);
margin: 0 16px 16px 0;
}

.start article div.slots ul li:last-of-type {
margin: 0 0 16px 0;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  /* IE10+ */
  .start article div.slots ul li:last-of-type {
  margin-right: -1px;
  }
}

.start article div.slots ul li.leer {
background: rgba(255,255,255,.5);
}

.start article div.slots ul li a {
display: block;
background: rgb(180,15,10);
height: 100%;
box-shadow: 0 0 8px rgba(0,0,0,.15);
}

.start article div.slots ul li a:hover {
background: rgb(230,0,20);
box-shadow: 0 0 16px rgba(0,0,0,.333);
}

.start article div.slots ul li a img {
width: 100%;
display: block;
filter: grayscale(1) saturate(200%);
}

.start article div.slots ul li a:hover img {
filter: grayscale(0);
}

.start article div.slots ul li a h3 {
width: 100%;
color: white;
padding: 4px 8px;
}


/* Aktuell */

section.aktuell article {
width: 100%;
}

section.aktuell article + article {
padding-top: 8px;
border-top: 1px solid rgb(222,222,222);
}

section.aktuell article main h3 {
margin-top: 4px;
}

section.aktuell article main {
padding-top: 16px;
}

section.aktuell .galerie li {
width: 50%;
padding: 0 16px 16px 0;
margin: 0;
}

a.zurueck {
display: inline-block;
padding: .5em .75em;
box-shadow: 0 0 .5em rgba(0,0,0,.15);
margin: 0 auto 16px 0;
}

/* Pagination */

ul.pagination {
padding: 9px 16px 16px 16px;
}

ul.pagination li,
ul.pagination span.ellipsis {
display: inline-block;
vertical-align: top;
}

ul.pagination li a,
ul.pagination span.ellipsis {
color: rgb(64,64,64);
background: rgba(243,243,243,.6);
padding: 1px 9px 3px 9px;
display: inline-block;
font-weight: bold;
}

ul.pagination li a.selected {
background: rgb(64,64,64);
color: white;
}

ul.pagination li a:hover {
background: rgb(230,0,20);
color: white;
}

ul.pagination span.ellipsis,
ul.pagination li a.disabled {
color: rgba(243,243,243,.6);
background: rgba(243,243,243,.2);
}


/* Flickity */
header .flickity-page-dots {
bottom: -16px;
}

body .flickity-page-dots .dot {
width: 8px;
height: 8px;
margin: 0 4px;
background: white;
}



/* FlickityBox */
div.fbox {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 48px 0 32px 0;
background-color: rgba(255,255,255,0.99);
z-index: 1000;
text-align: center;
}

div.fbox.txt {
text-align: left;
}

div.fbox ul {
max-width: 100%;
max-height: 80%;
}

div.fbox ul li {
display: block;
}

.flickity-enabled div.fbox figure {
opacity: 0.2;
transition: opacity 250ms ease-in;
}

div.fbox .is-selected figure {
opacity: 1;
}

div.fbox figure img {
margin: 16px;
display: inline-block;
box-shadow: none;
}

div.fbox .is-selected figure img {
box-shadow: 0 0 16px rgba(0,0,0,.4);
}

div.fbox figure img {
max-height: calc(100vh - 128px);
max-width: calc(100vw - 64px);
}

div.fbox figcaption {
margin: 6px auto 0 auto;
max-width: calc(100vw - 100px);
}

div.fbox .flickity-page-dots {
bottom: auto;
top: -32px;
text-align: left;
padding: 0 16px;
}

div.fbox .flickity-page-dots .dot {
background: rgb(230,0,20);
}

button.zu {
font-family: 'Source Sans Pro';
font-size: 16px;
line-height: 20px;
-webkit-appearance: none;
-moz-appearance: none;
text-overflow: '';
border: none;
border-radius: 16px;
padding: 4px 8px;
color: white;
background: rgb(230,0,20);
}

button.zu:hover {
background: rgb(40,30,0);
}

div.fbox button.zu,
div.anmeldung button.zu {
position: absolute;
top: 8px;
right: 8px;
z-index: 1001;
}



/* Aufklapper */
.aufklapp.aktiv:hover {
cursor: pointer;
color: rgb(230,0,20);
}

.aufklapp.aktiv:before {
content: '+';
display: inline-block;
vertical-align: top;
width: 20px;
height: 20px;
margin: 2px 8px 0 0;
font-weight: bold;
line-height: 20px;
text-align: center;
color: white;
background: rgb(230,0,20);
}

.aufklapp.zu:before {
content: '+';
}

.aufklapp.auf:before {
content: '×';
}

.aufklapp.aktiv:hover:before {
background: rgb(40,30,0);
}


/* Bildung */

section.bildung article main {
width: 100%;
padding-right: 0;
}

ul.angebote li a {
display: block;
margin: 0;
padding: 24px 0 8px 0;
border-bottom: 1px solid rgba(0,0,0,.25);
}

ul.angebote li a:hover {
background-color: rgb(243,243,243);
box-shadow: -1em 0 0 rgb(243,243,243);
}

ul.angebote li img,
ul.angebote li div.img {
width: 176px;
max-width: calc(50% - 16px);
height: auto;
margin: 0 16px 16px 0;
float: left;
background: rgb(236,244,246);
}

ul.angebote li svg {
display: inline-block;
vertical-align: top;
margin: 0 4px 0 0;
}

ul.angebote p.datum {
display: inline-block;
vertical-align: top;
font-style: normal;
font-weight: bold;
padding: 3px 6px 4px 6px;
}

ul.angebote p.datum span {
font-weight: normal;
}

li.bildungsfahrten p.datum,
li.bildungsfahrten svg {
color: white;
fill: white;
background-color: rgb(230,0,20);
}

li.bildungsfahrten h4 {
color: rgb(96,96,96);
}

li.veranstaltungen p.datum,
li.veranstaltungen svg {
color: white;
fill: white;
background-color: rgb(230,0,20);
}

li.veranstaltungen h4 {
color: rgb(96,96,96);
}

li.seminare p.datum,
li.seminare svg {
color: white;
fill: white;
background-color: rgb(230,0,20);
}

li.extras-fuer-gruppen svg {
color: white;
fill: white;
background-color: rgb(230,0,20);
}

ul.angebote li a:hover p {
color: black;
}

ul.angebote li a:hover p.datum {
color: white;
background-color: rgb(230,0,20);
}

li.seminare h4 {
color: rgb(96,96,96);
}

.bildung div.filter {
display: none;
}

ul.angebote li {
position: relative;
}

p.stoerer {
display: inline-block;
font-weight: bold;
padding: 3px 6px 4px 6px;
color: rgb(230,0,20);
background-color: white;
border: 2px solid rgb(230,0,20);
}

ul.angebote li p.stoerer {
display: block;
position: absolute;
top: 32px;
left: -12px;
transform: rotate(-27deg);
}

ul.angebote li:nth-child(even) p.stoerer {
transform: rotate(-21deg);
}

div.filter {
padding: 8px 12px;
box-shadow: 0 0 2em rgba(0,0,0,.05) inset;
}

div.filter ul li {
display: inline-block;
vertical-align: top;
}

div.filter ul li:after {
content: '·';
margin: 0 4px;
color: rgb(96,96,96);
}

div.filter ul li:last-of-type:after {
content: '';
}

div.filter a {
color: rgb(48,48,48);
border-bottom-color: transparent;
}

div.filter a:hover {
color: rgb(230,0,20);
}

div.filter a:active {
color: rgb(40,30,0);
}

div.filter a.aktiv {
color: rgb(230,0,20);
font-weight: bold;
pointer-events: none;
}

ul.partner {
font-size: 12px;
line-height: 15px;
margin: 16px -32px 0 0;
}

ul.partner li {
display: inline-block;
vertical-align: top;
width: 138px;
margin: 0 32px 32px 0;
text-align: center;
}

ul.partner li span {
display: block;
margin: 8px 0 0 0;
}

div.logo {
display: table-cell;
height: 116px;
width: 138px;
padding: 16px;
margin: 0 0 8px 0;
vertical-align: middle;
text-align: center;
background: white;
box-shadow: 0 0 8px rgba(0,0,0,.1);
}

ul.partner li a:hover div.logo {
box-shadow: 0 0 12px rgba(0,0,0,.25);
}

.logo img {
max-height: 64px;
border-bottom: none;
}

/* Social */
article .social li {
display: inline-block;
vertical-align: top;
margin: 8px 4px 0 0;
}

article li.social a {
font-size: 0;
line-height: 0;
display: inline-block;
width: 25px;
height: 25px;
background-color: white;
border: none;
}

article li.social a:hover {
background-color: rgb(128,128,128);
border: none;
}

li.social a svg {
fill: rgb(128,128,128);
}

li.social a:hover svg {
fill: white;
}



/* Formular */
fieldset {
margin: 0 0 16px 0;
}

fieldset.hidden,
#anmeldung fieldset.hidden {
display: none;
}

#anmeldung fieldset {
display: flex;
flex-flow: row wrap;
}

#anmeldung h5 {
width: 100%;
}

#anmeldung label:not(.checkbox):not(.textarea):not(.radio) {
display: flex;
flex-flow: column nowrap;
padding: 0 .5em .75em 0;
}

#anmeldung label:not(.checkbox):not(.textarea):not(.radio) span {
display: block;
color: rgb(55,136,157);
margin: auto 0 .15em 0;
}

#anmeldung ::-webkit-input-placeholder {
opacity: 0;
}

#anmeldung label.erstkontakt {
display: block;
padding: 12px 0 0 0;
}

ul.errors,
.anmeldung fieldset p {
font-size: 14px;
line-height: 18px;
}

#anmeldung label.checkbox,
#anmeldung label.radio {
display: flex;
flex-flow: row nowrap;
margin: 0 0 .5em 0;
}

#anmeldung label.checkbox input,
#anmeldung label.radio input {
flex: 0 0 auto;
width: auto;
margin: .2em 0 0 0;
}

#anmeldung label.checkbox span,
#anmeldung label.radio span {
flex: 1 1 auto;
margin: 0 0 0 8px;
}

#anmeldung label.textarea span {
margin: 0 0 8px 0;
}

.anmeldung input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.anmeldung select,
.abmeldung input[type="email"] {
display: inline-block;
line-height: 1.5em;
height: 28px;
border-bottom: .15em solid rgba(55,136,157,.8);   
background: rgba(255,255,255,.5);
padding: 0 6px;
color: black;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
transition: all 200ms ease-out;
}

.anmeldung form label input:placeholder-shown,
.abmeldung input[type="email"]:placeholder-shown {
padding: 0;
max-height: 1px;
}

.anmeldung form label input:focus,
.anmeldung form label input:placeholder-shown:focus,
.abmeldung input[type="email"]:focus {
max-height: 2em;
padding: 0 6px;
/* outline: none; */
border-radius: 0;
-webkit-tap-highlight-color: transparent;
background: rgba(var(--white), .3);
}

select::-ms-expand {
display: none;
}

.anmeldung input:not([type="submit"]):focus,
.anmeldung textarea:focus,
.abmeldung input[type="email"]:focus {
background: white;
}

.anmeldung label.error input,
.anmeldung label.error textarea,
.abmeldung label.error input[type="email"] {
color: rgb(230,0,20) !important;
background: rgba(230,0,20,.2) !important;
}

#anmeldung label.textarea span {
display: block;
color: rgb(55,136,157);
}

.anmeldung textarea {
padding: 4px 6px;
width: 100%;
height: 72px;
}

fieldset.person {
padding: 0 0 0 16px;
background: rgba(55,136,157,.1);
}

fieldset.person fieldset {
display: inline-flex;
vertical-align: top;
flex-flow: row wrap;
width: 50%;
padding: 0 16px 16px 0;
}

fieldset.person h4 {
font-size: 1.25em;
text-transform: uppercase;
letter-spacing: .1em;
margin: .8em 0 .5em -.05em;
}

fieldset.person fieldset h5 {
font-weight: bold;
font-style: normal;
width: 100%;
padding: 0 0 .5em 0;
border-bottom: 1px solid black;
margin: 1em 0 .5em 0;
}

fieldset fieldset.aus,
fieldset label.aus {
opacity: .3;
}

fieldset.person .aus input,
fieldset.person .aus select {
pointer-events: none;
}

fieldset p {
width: 100%;
}

ul.errors {
color: rgb(230,0,20);
}

p.success {
padding: 12px 16px;
background: rgba(96,96,96,.1);
color: black;
margin: 32px 0;
}

p.error {
padding: 12px 16px;
background: rgba(230,0,20,.1);
color: rgb(230,0,20);
margin: 32px 0;
}

#anmeldung label {
width: 50%;
display: inline-block;
}

#anmeldung label.anrede,
#anmeldung label.anrede-rechnung,
#anmeldung label.nr,
#anmeldung label.nr-rechnung,
#anmeldung label.plz,
#anmeldung label.plz-rechnung {
width: 20%;
}

#anmeldung label.vorname,
#anmeldung label.nachname,
#anmeldung label.vorname-rechnung,
#anmeldung label.nachname-rechnung {
width: 40%;
}

#anmeldung label.strasse,
#anmeldung label.strasse-rechnung,
#anmeldung label.ort,
#anmeldung label.ort-rechnung {
width: 80%;
}

#anmeldung label.erstkontakt,
#anmeldung label.firma,
#anmeldung label.firma-rechnung,
#anmeldung label.checkbox,
#anmeldung label.textarea,
#anmeldung label.sleepin,
#anmeldung label.radio,
.newsletter #anmeldung label.e-mail,
#anmeldung label.rechn-versand {
width: 100%;
}

#anmeldung label.sleepin:not(.checkbox):not(.textarea):not(.radio) {
padding: 0 0 1.5em 1.5em;
}

#anmeldung label.checkbox.error {
padding: 4px;
margin: 4px 0 0 0;
color: rgb(230,0,20) !important;
background: rgba(230,0,20,.2) !important;
}

#anmeldung label.rechn-addr,
#anmeldung label.erstkontakt {
margin-top: 15px;
}

#anmeldung select {
padding-right: 28px;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" id="pulldown" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="28px" height="28px" viewBox="0 0 28 28"><g><polyline fill="none" stroke="rgb(64,64,64)" stroke-width="2" points="7,12.5 14,17.5 21,12.5"/></g></svg>');
background-position: top right;
background-repeat: no-repeat;
background-size: 28px 28px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  /* IE10+ */
  #anmeldung select {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJwdWxsZG93biIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjhweCIgaGVpZ2h0PSIyOHB4IiB2aWV3Qm94PSIwIDAgMjggMjgiPjxnPjxwb2x5bGluZSBmaWxsPSJub25lIiBzdHJva2U9InJnYig1NSwxMzYsMTU3KSIgc3Ryb2tlLXdpZHRoPSIyIiBwb2ludHM9IjcsMTIuNSAxNCwxNy41IDIxLDEyLjUiLz48L2c+PC9zdmc+');
  }
}

/* Piwik iframe */
main iframe {
height: 192px;
width: 100%;
background-color: rgba(55,136,157,0.1);
}

/* Anmeldung iframe */
div.anmeldung {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(55,136,157,0.8);
z-index: 1000;
padding: 48px 32px 32px 32px;
cursor: pointer;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
overflow-x: hidden;
}

div.anmeldung iframe {
position: relative;
width: 100%;
height: 100%;
z-index: 2000;
}

div.anmeldung svg#zu {
fill: none;
stroke: white;
stroke-width: 3;
stroke-linecap: round;
margin: 4px;
position: absolute;
top: 16px;
right: 32px;
}

div.anmeldung svg#zu:hover {
stroke: rgb(230,0,20);
}

div.anmeldung svg#herbert {
fill: rgba(255,255,255,.333);
position: absolute;
bottom: -8px;
right: 0;
height: 100vh;
width: auto;
}

/* Videos */

ul.videos {
margin: 0 0 2em 0;
}

ul.videos li + li {
margin-top: 1em;
}

.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.consent {
padding: 1.5em;
}

.consent h3 {
font-style: normal;
font-weight: bold;
}

/* Suche */

li.suche input {
color: black;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}

li.suche input:focus {
color: rgb(180,15,10);
}

li.suche input::placeholder {
color: black;
}

section.suche article {
width: 100%;
}

ul.suche {
display: flex;
flex-flow: row wrap;
margin: 0 -16px 0 0;
}

ul.suche li {
padding: 0 16px 0 0;
width: calc(100% / 3);
}

.suche > li a {
display: block;
height: 100%;
margin: 0;
padding: 8px 0;
border-bottom: none;
}

.suche > li a {
border-top: 1px solid rgba(0,0,0,.25);
}

.suche li a:hover {
color: rgb(96,96,96);
background-color: rgb(243,243,243);
padding: 8px 8px;
margin: 0 -8px;
}

.suche li h3 {
margin-top: 8px;
}

.suche li h3 span {
display: inline-block;
vertical-align: top;
font-size: 12px;
color: white;
background: rgb(230,0,20);
padding: 0 6px;
margin: 0 8px 0 0;
}

.suche li img {
float: left;
margin: 8px 12px 12px 0;
box-shadow: 0 0 4px rgba(0,0,0,.2);
}

.suche li p.url {
color: rgb(64,64,64);
}






/* Footer */
footer {
background: rgb(227,227,227);
padding: 16px 16px 24px 16px;
}

footer > div {
display: inline-block;
vertical-align: top;
width: 35.6%;
padding: 0 12px 0 0;
}

footer > div:last-of-type {
text-align: right;
padding: 0;
width: 28.8%;
}

footer > div:last-of-type img {
margin: 8px 0 12px 0;
}

footer h3 {
color: rgb(64,64,64);
font-style: italic;
margin: 0 0 12px 0;
}

footer ul,
footer ul li {
margin: 0 0 8px 0;
}

footer a {
color: rgb(40,30,30);
}

footer a:hover {
color: rgb(230,0,20);
}

footer li a:before {
content: '';
display: inline-block;
vertical-align: middle;
width: 40px;
height: 40px;
margin: 0 12px 0 0;
background-color: rgb(192,192,192);
background-repeat: no-repeat;
}

footer li a:hover:before {
background-color: rgb(230,0,20);
}

footer a.mail:before {
background-image: url('../img/e-mail.svg');
}

footer a.fb:before {
background-image: url('../img/facebook.svg');
}
footer a.fb:hover:before {
background-color: #3b5998;
}

footer a.yt:before {
background-image: url('../img/youtube.svg');
}
footer a.yt:hover:before {
background-color: #FF0000;
}

footer a.ig:before {
background-image: url('../img/instagram.svg');
}

footer a.tw:before {
background-image: url('../img/twitter.svg');
}
footer a.tw:hover:before {
background-color: #1da1f2;
}

footer a.li:before {
background-image: url('../img/linkedin.svg');
}

footer a.bs:before {
background-image: url('../img/bluesky.svg');
}

footer a.li:hover:before {
background-color: rgb(10,102,194);
}


footer a.bpb:before {
background-image: url('../img/bpb.svg');
}

footer a.sks:before,
footer a.smi:before {
background-image: url('../img/sachsen.svg');
}

footer p.impressum {

}




/* ############# Screens bis 960px ############# */
@media only screen and (max-width: 960px) {

  .start article div.angebote {
  padding: 0 0 0 16px;
  }
  
  section:not(.team):not(.aktuell):not(.bildung):not(.suche) article main {
  width: calc(100% - 176px);
  }
  
  section:not(.team):not(.aktuell):not(.bildung) article aside {
  width: 176px;
  }
  
  .galerie li {
  width: 100%;
  margin: 0;
  padding: 0 16px 16px 0;
  }

  aside div.ansprechpartner img {
  display: block;
  padding: 0 0 8px 0;
  width: 100%;
  }
  
  aside div.ansprechpartner p {
  display: block;
  width: 100%;
  padding: 8px 8px 2px 8px;
  }
  
  aside div.ansprechpartner img + p {
  width: 100%;
  padding: 0 8px 2px 8px;
  }
  
  ul.suche li {
  width: 50%;
  }

  footer > div {
  width: 50%;
  }

  footer > div:last-of-type {
  width: 100%;
  padding: 16px 0 0 0;
  margin: 16px 0 0 0;
  border-top: 1px solid rgb(96,96,96);
  }
  
  footer > div:last-of-type img {
  width: 72px;
  height: 72px;
  }

}

/* ############# Screens bis 800px ############# */
@media only screen and (max-width: 800px) {

  header nav {
  font-size: 18px;
  line-height: 24px;
  }

  .start article div.news,
  .start article div.angebote {
  width: 50%;
  }
  
  .start article div.angebote li {
  margin: 0 0 16px 0;
  width: 100%;
  }
  
  .start article div.text {
  width: 100%;
  }
  
  .start article div.slots {
  width: 100%;
  padding: 24px 0 0 0;
  }
  
  section nav {
  width: 100%;
  padding: 0;
  }
  
  section nav ul {
  border-bottom: 1px solid rgb(238,236,236);
  padding-bottom: 8px;
  margin-bottom: 8px;
  }
  
  section nav li {
  display: inline-block;
  vertical-align: top;
  margin: 0 0 2px 0;
  }
  
  section nav li:after {
  content: '·';
  margin: 0 4px;
  }
  
  section nav li:last-of-type:after {
  content: '';
  margin: 0;
  }
  
  section nav li#extras-fuer-gruppen {
  margin: 0;
  padding: 0;
  border-top: none;
  }
  
  section article {
  width: 100%;
  }
  
  article main {
  padding-left: 0;
  }
  
  ul.pagination {
  padding-left: 0;
  }
  
  footer > div {
  width: 100%;
  }
  
  footer > div + div {
  margin: 16px 0 0 0;
  }

}




/* ############# Screens bis 640px ############# */
@media only screen and (max-width: 640px) {

  body > div.main {
  padding: 0;
  }
  
  header {
  overflow-x: hidden;
  }
  
  header a svg#wehnerwerk {
  margin-right: 1em;
	}
    
  header nav ul {
  padding: 12px 16px;
  }
    
  header #map {
  height: 192px;
  }
  
  header #map + svg {
  display: none;
  }
  
  header nav li + li:before {
  padding: 0 8px;
  }
  
  header nav li#ls {
  margin-left: 0;
  }
  
  section.artikel, section.aktuell, section.team, section.bildung {
  padding: 12px 16px 16px 16px;
  }
  
  fieldset.person fieldset {
  width: 100%;
  }
  
  fieldset.person fieldset.kommentar {
  margin: 0;
  }
  
  article.anmeldung main {
  padding: 0 16px;
  }
  
  section.start {
  padding: 0 16px;
  }
  
  .start article div.news li img {
  width: 64px;
  }
  
  .start article div.news li img + div {
  width: calc(100% - 64px);
  padding: 0 0 0 12px;
  }
  
  .start article div.angebote li h3 {
  font-size: 18px;
  line-height: 24px;
  }
  
  section.aktuell article main {
  width: calc(100% - 176px);
  }
  
  section.aktuell article aside {
  width: 176px;
  }
  
  section.aktuell .galerie {
  margin: 0 0 16px 0;
  }
  
  section.aktuell .galerie li {
  width: 100%;
  padding: 0 0 8px 0;
  }
  
  ul.angebote p.datum {
  display: block;
  }
  
  ul.angebote li img, ul.angebote li div.img {
  margin: 0 0 12px 12px;
  float: right;
  }
  
  ul.angebote li svg {
  margin: 0 0 8px 8px;
  float: right;
  }
  
  ul.angebote li p.stoerer {
	left: auto;
	right: -8px;
	transform: rotate(27deg);
	}
	
	ul.angebote li:nth-child(even) p.stoerer {
	transform: rotate(21deg);
	}
  
  ul.partner {
  margin: 16px -16px 0 0;
  }
  
  ul.suche li {
  width: 100%;
  }

}





/* ############# Screens bis 560px ############# */
@media only screen and (max-width: 560px) {

  section:not(.team):not(.aktuell):not(.bildung) article main,
  section.aktuell article main {
  width: 100% !important;
  padding: 0;
  }
  
  section:not(.team):not(.aktuell):not(.bildung) article aside,
  section.aktuell article aside {
  width: 100%;
  padding: 16px 0;
  }
  
  .galerie li,
  section.aktuell .galerie li {
  display: inline-block;
  vertical-align: top;
  margin: 0 16px 16px 0;
  padding: 0;
  width: calc(50% - 16px);
  }
  
  section.aktuell .galerie {
  margin: 0 -16px 16px 0;
  }
  
  aside div.ansprechpartner img {
  display: inline-block;
  padding: 8px 16px 8px 8px;
  width: 50%;
  }
  
  aside div.ansprechpartner img + p {
  display: inline-block;
  width: 50%;
  padding: 8px 10px 0 0;
  }


}





/* ############# Screens bis 480px ############# */
@media only screen and (max-width: 480px) {
  
  header h1 a {
  height: auto;
  }
  
  header a svg#monster {
  display: none;
  }
  
  header a svg#wehnerwerk {
	margin: 0;
	padding: 1em;
	width: 100%;
	height: auto;
	}
  
  .start article div.news,
  .start article div.angebote {
  width: 100%;
  }
  
  .start article div.angebote {
  width: 100%;
  padding: 0;
  }
  
  .start article div.angebote li,
  .start article div.angebote li:nth-child(2n) {
  margin: 0 0 8px 0;
  width: 100%;
  }
  
  .start article div.news,
  .start article div.angebote li img {
  display: none;
  }
  
  .start article div.slots {
  padding: 16px 0;
  }
  
  .start article div.slots ul li {
  width: calc(50% - 8px);
  margin: 0 16px 16px 0;
  }
  
  .start article div.slots ul li.leer {
  display: none;
  }
  
  .start article div.slots ul li:nth-child(even) {
  margin: 0 0 16px 0;
  }
  
  div.anmeldung {
  padding: 64px 0 0 0;
  }
  
  footer li a::before {
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
  margin: -5px 8px 0 0;
  }


}





/* ############# Screens bis 400px ############# */
@media only screen and (max-width: 400px) {

  .start article div.text {
  font-size: 16px;
  line-height: 21px;
  }
  
  ul.team li img {
  width: 100%;
  }
  
  ul.team li img + div,
  ul.team li div {
  width: 100%;
  padding: 16px 0;
  }
  
  .suche li img {
  width: 76px;
  height: 76px;
  }
  
  #anmeldung label {
  width: 100% !important;
  }


}