@charset "utf-8";
@import url("https://use.typekit.net/wze5dsy.css");
/*@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');*/
/* CSS Document */
:root {
  --titleFont:  proxima-nova-condensed, 'Verdana', sans-serif;
  --textFont: proxima-nova-condensed, 'Verdana', sans-serif;
  --font-size: 120%;
  --titleColor: #333;
  --textColor: #333;
  --menuColor: #0068b3;
  --greyLight: #f0f0f0;
  --grey: #aaaaaa;
  --red: #ffcccb;
  --green: #90ee90;
  --white: #ffffff;
  --highlight:#0068b3;
  --borderRadius: 10px;
  --rm: #000000;
  --pt: #0068b3;
  --ws: #7c3f16;
  --um: #ff0000;
  --pm: #ff6700;
  --spaceTop: 100px;
}
* {box-sizing: border-box; }
.online .offlineNotice, .offlineNotice, .offline.addressData .offlineNotice { display:none; }
.offline .offlineNotice { display:block; }
strong { font-weight: bold; }
a { color:var(--highlight); }
iframe { border:none; width:100%; }
h1, h2, h3, h4 { font-weight: 600; width:100%; color:var(--highlight); }
h2 { font-size: 150%; }
body { font-size: 100%; font-family: var(--textFont); color:var(--textColor); min-height:150vh; letter-spacing: -0.5px; }
p { line-height: 1.4em; }
p:first-of-type { margin-top:0px; }
body.noScroll { overflow:hidden; }
header { position: fixed; left:0; top:0; z-index: 10000; height:var(--spaceTop); display: flex; flex-direction: row; flex-wrap:wrap; justify-content: space-between; align-content: center; align-items: center; width:100%; line-height:var(--spaceTop); background-color: var(--greyLight); }
header img { height:70%; width:auto; }
header a.logo { display: flex; justify-content: flex-end; align-items: center; width:15%; height:100%; padding-right:2%; }
#burger { font-size:150%; width:15%; padding-left:2%; cursor: pointer; }
nav { position: absolute; left:-100%; top:var(--spaceTop); display: flex; flex-direction: column; background-color: var(--greyLight); width:100%; height:calc(100vh - 60px); transition: left .5s ease-in-out; overflow: auto; border-top:3px solid var(--highlight); }
nav.aktiv { left:0px; }
nav a { display: block; color:var(--menuColor); text-decoration: none; line-height: 60px; padding:0 3% 0 3%; font-size:150%; }
nav a.small { font-size: 100%; line-height:40px; }
nav a.borderTop { border-top:3px solid #fff; margin-top:5px; padding-top:5px; }
main { padding:var(--spaceTop) 2% 0 2%; display:flex; flex-wrap: wrap; flex-direction: row; justify-content: center; max-width:800px; width:100%; margin:0 auto; font-size:var(--font-size); }
main.wertstoffhof { padding:var(--spaceTop) 0 0 0; max-width: 100%; width:100%; margin:0 auto; }
main.impressum, main.datenschutz { display:block; }
.offline main { padding-top:0px; }
.conStatus { position: fixed; z-index: 200; bottom:-30px; line-height: 30px; color:var(--white); background-color:var(--red); width:100%; text-align: center; }
.offline .conStatus { bottom:0px; transition:bottom .5s ease-in-out; }
#response { display: none; position:fixed; bottom:0px; right:0px; background-color: #eee; padding:10px; width:40%;}
#termineForm { width:100%; }
.offline #termineForm, .addressData #termineForm, .addressData .saveAddressData, .offline .generatePDFContainer, .offline .generateICSContainer, .offline .ergebnisContainer > div.mailContainer, .offline header, .offline nav { display:none !important; }
#termineForm input {  }
.input-box { margin:20px 0; display:none; position: relative; width:100%; }
.input-box.email, .input-box.freeAddress { display: block; }
#emailForm { width:90%; }
#termineForm div label, #emailForm div label, #abcForm div label { position: absolute; left:7px; top:3px; line-height: 36px; padding:0 3px; pointer-events: none; background-color:transparent; color:var(--textColor); transition: all .3s ease-in-out; }
#termineForm div.focus label, #emailForm div.focus label , #abcForm div.focus label { left:10px; top:-5px; font-size:70%; line-height:10px; background-color: var(--white); color:var(--highlight); }
#emailForm div.focus label { background-color: var(--greyLight); }
input { width:100%; line-height: 30px; border:1px solid var(--grey); border-radius: var(--borderRadius); outline:none; padding:5px 10px; }
input[type="checkbox"] { width:auto; line-height: 30px; border:none; border-radius: 0px; outline:none; padding:5px 10px; }
input:focus { border:1px solid var(--highlight); outline: none; }
.filled input { pointer-events: none; }
.unfill, .unfillABC { position:absolute; line-height: 42px; right:0px; top:0; width:40px; cursor:pointer; display:none; color:var(--highlight); font-size: 130%; }
.filled .unfill, .filled .unfillABC { display:block; }
.ergebnisContainer { display: none; width:100%; }
.ergebnisContainer > div { margin:20px 0; }
.nextTermineContainer { border-radius: var(--borderRadius); text-align: center;}
.nextTermine { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; /*row-gap:20px;*/ }
.nextTermine div.termine { padding:10px; width:48%; text-align: center; background-color: var(--greyLight); border-radius:var(--borderRadius); display: none; margin-bottom:20px; }
.nextTermine.all div.termine { display: block; }
.nextTermine div.termine:first-of-type { padding:10px; width:100%; display: block; }
.nextTermine div.termine span { font-size: 80%; }
.nextTermine div.termine strong { margin:5px 0; display: block; font-size:150%; }
.nextTermine div.termine img { width:auto; height:40px; /*margin:0 5px 0 0;*/ }
.showMore { text-align: center; cursor:pointer; color:var(--highlight); width:100%; line-height: 40px; position: relative; top:-15px; }
.showMore .weniger, .showMore.aktiv .mehr { display: none; }
.showMore.aktiv .weniger, .showMore .mehr { display: inline; }
span.titel { display: block; width:100%; }
button { width:100%; background-color: var(--highlight); color:var(--white); line-height: 50px; border:none; border-radius: var(--borderRadius); cursor: pointer; }
.saveAddressData { position: relative; }
button:before { font-size: 140%; }
.addressData .displayTheAddress { display:block; }
.displayTheAddress { text-align: center; position: relative; padding:0 10%; display:none; width:100%; }
.displayTheAddress .addressItem { font-size:150%; }
.displayTheAddress .deleteAddress { font-size:130%; position: absolute; top:0; right:0%; width:10%; color:var(--highlight); cursor: pointer;}
.abfuhrBez { display: block; }
.abfuhrContainer { display: inline-block; padding:0 2%; }
.abfuhrContainer.rm { color:var(--rm); }
.abfuhrContainer.pt { color:var(--pt); }
.abfuhrContainer.ws { color:var(--ws); }
.abfuhrContainer.um { color:var(--um); }
.abfuhrContainer.pm { color:var(--pm); }
/*.mailContainer { border:2px solid var(--highlight); border-radius: var(--borderRadius); display:flex; justify-content: center; flex-wrap: wrap; }*/
.ergebnisContainer > div.mailContainer {  border-radius: var(--borderRadius); display:flex; justify-content: center; flex-wrap: wrap; background-color: var(--greyLight); margin-top:40px; }
.ergebnisContainer > div.mailContainer input { background-color: var(--greyLight); }
.signInMail { }
.emailNotice { width:100%; text-align: center;}
.fail, .success { display:block; padding:10px 5%; width:100%; border-radius: var(--borderRadius) }
.fail { background-color:var(--red); }
.success { background-color:var(--green); }
#signOutMail { cursor: pointer; font-size: 80%; min-height:40px; display: flex; align-items: center; padding:10px 5%; }
#map-iframe { height:calc(100vh - var(--spaceTop)); }
.nextYear { display: none; }
.emailCheckContainer { margin:40px auto; max-width: 800px; width:100%; padding:0 2%; text-align: center;}
.emailCheckContainer .logo { max-width:200px; display:block; margin:0 auto 40px auto; }
.zurWebsite { display:block; max-width:300px; width:100%; line-height: 40px; background-color: var(--highlight); color:#fff; text-decoration: none; border-radius:var(--borderRadius); margin:40px auto 0 auto; }
#pageResponse { width:100%; }
.item { box-shadow:1px 1px 5px #aaa; border-radius: var(--borderRadius); clear:both; }
.news .item { margin:0 0 30px 0; cursor: pointer;}
.item h3 { cursor: pointer; line-height: 40px; font-weight: 500; }
.acc { display: none; padding:0 2%; border:1px solid transparent; font-size:90%; }
.accBody { display: none; padding:20px 2% 20px 2%; border:1px solid transparent; font-size:90%; }
.letterContainer { display:flex; flex-direction:row; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-items: center; row-gap:10px; }
.letterContainer div { max-width:40px; min-width:30px; padding:0 0.5%; line-height: 30px; background-color: var(--greyLight); text-align: center; cursor:pointer; margin-right:3px; }
.letterContainer div.aktiv { background-color: var(--highlight); color:#fff; }
.ergebnisContainer > div.saveAddressDataContainer { margin-top:0; }
.autocomplete { font-size: var(--font-size); }
/*.generatePDF, .generateICS { width:48%; }*/
.news .item h2 { padding:10px 2% 10px 2%; margin:0px 0 0 0; }
.news .item h2 div { font-size: 60%; font-weight: 300; }
.news .item img.headerBild { width:100%; height:25vh; max-height:200px; object-fit: cover; border-radius:var(--borderRadius); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.news .item .bilderContainer { display:flex; justify-content:space-evenly; }
.news .item .bilderContainer a { width:23%; }
.news .item .bilderContainer a img { width:100%; height:auto; }
div[data-letter="Ã"] { display:none; }
.buttonInfoIcon { position:absolute; right:0px; top:0px; line-height: 50px; text-align: center; min-width:50px; cursor:pointer; z-index: 20; color:#fff; }
.infoContainer { display:none; font-weight:300; text-align: left; line-height: normal; font-size: 80%; padding:0 2% 10px 2%; }
.infoAktiv .infoContainer { display:block; }
.signInMailContainer { position: relative; width:100%; }
.wertstoffhof .cookieconsent-optout-marketing { padding:20px 2%;}
div.termine .generatePDF { cursor: pointer; margin:10px 0; color:var(--highlight); font-size: 80%; }
.generateICSContainer { border:2px solid var(--highlight); border-radius: 12px; text-align: center;}
button.generateICS { width:100%; max-width: 320px; margin:30px auto 0px auto; display: block; }
#icsForm, #icsFormNext { display:flex; justify-content: center; flex-wrap: wrap; gap:10px 5%; margin:25px 0 0 0; }
#icsForm div, #icsFormNext div { font-size: 120%; line-height: 40px; }

@media screen and (max-width:540px)	{
	:root {
	  --spaceTop: 60px;
	  --font-size: 100%;
	}
	button, .buttonInfoIcon { line-height: 40px; }
}