Candle/style.css

*{
  font-family: sans-serif;
  margin: 0px;
  
  
}



.kopf{
    margin: 0px;
    width: 100%;
    position: fixed;
    background-color: #24140d;
    color:rgb(255, 255, 255);
    justify-content: center;
    display: flex;
}


body{
  background-color: #E5D3B3;
  overflow: hidden;
}


.titleschwarz{
  font-size: 25px;
  color: #000;
}

#titlebraun{
  font-size: 25px;
  color: #24140D;
  font-style: italic;
}

#bildID{

  margin: 0px;
}

/*buttons*/
#uberuns{
    position: fixed;
    left: 0px;
    top: 149px;
    width: 120px;
    height: 35px;
    background-color:#664220 ;
    color:rgb(255, 255, 255);
    padding-right:10px;
    padding-left: 8px;
    padding-top: 15px;
    padding-bottom: 0px;
    text-align: center;
    text-decoration: none;
}

#CandleID{
  opacity: 1;
  pointer-events: auto;
}
#abmelden{

  position: fixed;
  left: auto;
  right: 60px;
  top: 149px;
  width: 120px;
  height: 35px;
  background-color:#664220 ;
  color:rgb(255, 255, 255);
  padding-right:10px;
  padding-left: 8px;
  padding-top: 15px;
  padding-bottom: 0px;
  text-align: center;
  text-decoration: none;

}

#buecher{
  position: fixed;
  left: 150px;
  top: 149px;
  width: 120px;
  height: 35px;
  background-color:#664220 ;
  color:rgb(255, 255, 255);
  padding-right:10px;
  padding-left: 8px;
  padding-top: 15px;
  padding-bottom: 0px;
  text-align: center;
  text-decoration: none;
}

#meinebuecher{
  position: fixed;
  left: 300px;
  top: 149px;
  width: 120px;
  height: 35px;
  background-color:#664220 ;
  color:rgb(255, 255, 255);
  padding-right:10px;
  padding-left: 8px;
  padding-top: 15px;
  padding-bottom: 0px;
  text-align: center;
  text-decoration: none;
}

/*warenkorbsymbol im header*/
#warenKorbID
{
  position: fixed;
  right: -70px;
  top: 150px;
  width: 120px;
  height: 35px;
}

.suchleiste{
  position: fixed;
  right: 40px;
  top: 0px;
  width: 200px;
  height: 40px;
  background-color: #664220;
  margin: 0px;
  padding: 0px;
  border: 0px;
  color: rgb(255, 255, 255);
  text-align: center;
}

.suchleiste::placeholder{
  color: rgb(255, 255, 255);
}

/*loupe*/
#buttonID{
  position: fixed;
  right: 0px;
  top: 0px;
  width: 39px;
  height: 40px;
  background-color: #664220;
  margin: 0px;
  padding: 0px;
  border: 0px;
  color: rgb(255, 255, 255);

}

#sidecandle{
  top: 199px ;
  right: 0px;
  position: fixed;  
  height: 100%;
  width: 12% 

}
#BuchHeader{
  position: fixed;
  top: 220px;
  left: 30px;
  font-size: 40px;
  color:#000000;
  
}
.main #warenkorbHeader{
  position: absolute;
  top: 0px;
  left: 30px;
  font-size: 50px;
  color:#ffffff;
  font-family:Calibri;
  font-weight:400;
}

.p1{
  overflow-y: scroll;
  max-width: 87%;
  max-height: 450px;
  position: fixed;
  top: 220px;
  left: 20px;
  right:14%;
  font-size: 15px;
  color:#664220;
  bottom: 75px;
}

.p1{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.p1::-webkit-scrollbar {
  display: none;
}
.p2{
  overflow-y: scroll;
  max-width: 87%;
  max-height: 100%;
  position: fixed;
  top: 220px;
  left: 20px;
  right: 14%;
  font-size: 15px;
  line-height: 180%;
  color:#24140d;
  bottom: 75px;
}

.p2{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.p2::-webkit-scrollbar {
  display: none;
}

/*erweiterte Suche starts*/
#erweitertesuche{
  color: rgb(255, 255, 255);
  position: fixed;
  right: 60px;
  top: 50px;
  text-align: center;
  text-decoration: none;
}

.hauptcontainer{
  overflow-y: scroll;
  position:absolute;
  display:flex;
  height: 62%;
  width: 100%;
  top:200px;
}

.hauptcontainer{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.hauptcontainer::-webkit-scrollbar {
  display: none;
}

#titelerweitertesuche{
  position: absolute;
  font-size: 25px;
  color: #000;
  left: 15px;
  top:30px;
}

.hauptcontainer .buchtitel{
  position: absolute;
  top: 80px;
  left:100px;
  width: 100px;

}

.hauptcontainer .buchtiteloptions{
  position: absolute;
  top: 80px;
  width: 70%;
  left:210px;
}

.hauptcontainer .und-wort1{
  position: absolute;
  top: 110px;
  width: 70px;
  left:20px;
}

.hauptcontainer  .und-wort2{
  position: absolute;
  width: 70px;
  left:20px;
  top: 140px;
}

.hauptcontainer .autor{
  position: absolute;
  top: 110px;
  width: 100px;
  left:100px;
}

.hauptcontainer .autoroptions{
  position: absolute;
  top: 110px;
  width: 70%;
  left:210px;
}

.hauptcontainer .stichwort{
  position: absolute;
  top: 140px;
  width: 100px;
  left:100px;
}

.hauptcontainer .stichwörteroptions{

  position: absolute;
  top: 140px;
  width: 70%;
  left:210px;
}

/*.hauptcontainer .p3{
  
  max-width: 87%;
  max-height: 450px;
  position:absolute;
  top: 220px;
  left: 20px;
  right:14%;
  bottom: 75px;
  
}*/
 

.hauptcontainer #weiteresuchkriterien{
  position: absolute;
  font-size: 17px;
  color: #000;
  left: 25px;
  top: 180px;
}

.hauptcontainer .jahrvon{
  position: absolute;
  top: 220px;
  left: 20px;
}

.hauptcontainer .anfangsdatum{
  position: absolute;
  top: 220px;
  left: 210px;
  height: 20px;
}

.hauptcontainer .bis{
  position: absolute;
  top: 220px;
  left: 340px;
  
}

.hauptcontainer .endsdatum{
  position: absolute;
  top: 220px;
  left: 380px;
  height: 20px;
}

.hauptcontainer .sprache{
  position: absolute;
  top: 260px;
  left: 20px;
}

.hauptcontainer .spracheingabe{
    position: absolute;
    top: 260px;
    width: 70%;
    left:210px;
  
}

.hauptcontainer .verfügbarkeit{
  position: absolute;
  top: 300px;
  left: 20px;
}

.hauptcontainer .checkbox{
    position: absolute;
    top: 300px;
    left:210px;
}

.hauptcontainer .kommentar{
  position: absolute;
  top: 300px;
  left: 230px;
}

.hauptcontainer #suchen{
  position: absolute;
    left: 20px;
    top: 380px;
    width: 120px;
    height: 35px;
    background-color:#664220 ;
    color:rgb(255, 255, 255);
    padding-right:10px;
    padding-left: 8px;
    padding-top: 15px;
    padding-bottom: 0px;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
}


.hauptcontainer #suchfelderleeren{
  position: absolute;
    left: 180px;
    top: 380px;
    width: 220px;
    height: 35px;
    background-color:#664220 ;
    color:rgb(255, 255, 255);
    padding-right:10px;
    padding-left: 8px;
    padding-top: 15px;
    padding-bottom: 0px;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
}
/*---------WarenKorb BEGINS--------*/
.main{
  height: 100%;
  position: absolute;
  top:200px;
  left: 0px;
  width: 95%;
}
.main{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.main::-webkit-scrollbar {
  display: none;
}
.containerOfAll {
  overflow-y: scroll;
  background-color: #E5D3B3;
  display: flex;
  position: absolute;
  top: 70px;
  left: 35px;
  width: 1000px;
  height: 55%;
}

.containerOfAll{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.containerOfAll::-webkit-scrollbar {
  display: none;
}

/*first book in warenkorb and its details*/
#firstItem
{
  position: absolute;
  top: 15px;
  left: 15px;
  width:100%;
  height:80%;
}

.haupt{
  width: 100%;
  height: 62%;
  position: absolute;
  display: flex;
  overflow-y:scroll;
  top: 200px;
}

.haupt{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.haupt::-webkit-scrollbar {
  display: none;
}

.haupt #firstItem{
  position: relative;
  top: 25px;
  left: 30px;
  width: 100%;
  height: 80%;
}

.haupt .headerinItem{
  position: relative;
  top: -200px;
  left: 150px;
  color: #000;
}

.haupt .discinItem{
  position: relative;
  top: -180px;
  left: 150px;
  width: 200px;
  color: #000;
  text-align: left;
}

.haupt .greenbutton{
  position: absolute;
  top: 165px;
  left: 150px;
  width: 100px;
  height: 25px;
  color:rgb(255, 255, 255);
  padding-top: 7px;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  background-color:#7DAD47 ;
}

.haupt #firstItem #shoppingwagen{
  position: absolute;
  width: 30px;
  top:165px;
  right: 60px;
}

.haupt .percypar{
  position: absolute;
  top: 250px;
  width: 80%;
  color: #000;
  text-align: left;
}
/*first item ends*/

/*second book in warenkorb and its details */
#secondItem{
  position: absolute;
  top: 300px;
  left: 15px;
  width: 100%;
}

.haupt{
  width: 100%;
  height: 62%;
  position: absolute;
  display: flex;
  overflow-y:scroll;
  top: 200px;
}

.haupt{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.haupt::-webkit-scrollbar {
  display: none;
}

.haupt #secondItem{
  position: relative;
  top: 25px;
  left: 30px;
  width: 100%;
  height: 80%;
}

.haupt .headerinItem{
  position: relative;
  top: -200px;
  left: 150px;
  color: #000;
}

.haupt .discinItem{
  position: relative;
  top: -180px;
  left: 150px;
  width: 200px;
  color: #000;
  text-align: left;
}

.haupt .redbutton{
  position: absolute;
  top: 165px;
  left: 150px;
  width: 180px;
  height: 25px;
  color:rgb(255, 255, 255);
  padding-top: 7px;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  background-color:red ;
}


.haupt #secondItem #shoppingwagen{
  position: absolute;
  width: 30px;
  top:165px;
  right: 60px;
}

.haupt .percypar{
  position: absolute;
  top: 250px;
  width: 80%;
  color: #000;
  text-align: left;
}
/*second item ends*/

/*third book in warenkorb and its details */

#thirdItem{
  position: absolute;
  top: 580px;
  left: 15px;
  width:100%
}
/*third item ends*/

/*fourth book in warenkorb and its details */

#fourthItem{
  position: absolute;
  top: 880px;
  left: 15px;
  width:100%
}
/*fourth item ends*/


#reservieren
{
  background-color: #E5D3B3;
  position: absolute;
  top: 70px;
  left: 1050px;
  width: 300px;
  height: 150px;
}

#jetztReservieren{
  position: relative;
  top: 50px;
  left: 75px;
  width: 120px;
  height: 55px;
  background-color:#664220 ;
  color:rgb(255, 255, 255);
  padding-right:15px;
  padding-left: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
}

#ArtikelWarenkorb{
  position: relative;
  top: 20px;
  left: 100px;
  align-items: center;
}

.headerinItem{
  position: relative;
  top: -200px;
  left: 150px;
  width: 400px;
}
.discinItem{
  position: absolute;
  top: 50px;
  left: 150px;
}

.main .containerOfAll .items .greenbutton{
  position: absolute;
  top: 165px;
  left: 150px;
  width: 100px;
  height: 25px;
  color:rgb(255, 255, 255);
  padding-top: 7px;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  background-color:#7DAD47 ;
}
.main .containerOfAll .items .redbutton{
  position: absolute;
  top: 165px;
  left: 150px;
  width: 180px;
  height: 25px;
  color:rgb(255, 255, 255);
  padding-top: 7px;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  background-color:red ;
}

.inputPlusMinus{
  position: absolute;
  top: 185px;
  left: 800px;
}

.binPicture{
  position: absolute;
  top: -15px;
  left: 100px; 
}


#minusButton{
position: absolute;
top: -15px;
left: 0px;
}

#plusButton{
  position: absolute;
  top: -15px;
  left: 70px;
  }

.plus-minus-input .input-group-field {
  text-align: center;
  position:absolute;
  width: 30px;
  height: 20px;
  top: -15px;
  left: 28px;
}

.plus-minus-input .input-group-field::-webkit-inner-spin-button,
.plus-minus-input .input-group-field ::-webkit-outer-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

.plus-minus-input .input-group-button .circle {
  border-radius: 50%;
  padding: 0.15em 0.35em;
}

/*------WarenKorb ENDS-------*/

/*buecher begins */
.containerofbuecher{
  overflow-y: scroll;
  overflow-x: hidden  ;
  display: flex;
  position: absolute;
  top: 200px;
  width: 100%;
  height: 66%;
}

.headerinItem a {
  text-decoration: none;
  color: initial;
}
.containerofbuecher{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.containerofbuecher::-webkit-scrollbar {
  display: none;
}

#büchertitel{
  position: absolute;
top:35px;
left:35px;
font-size: 30px;
}

.containerofbuecher #firstItem{
  position: absolute;
  top:100px;
  left: 45px;
}

.containerofbuecher #secondItem{
  position: absolute;
  top:400px;
  left: 45px;
}

.containerofbuecher #thirdItem{
  position: absolute;
  top:700px;
  left: 45px;
}

.containerofbuecher #fourthItem{
  position: absolute;
  top:1000px;
  left: 45px;
}

.containerofbuecher .items .redbutton{
  position: absolute;
  top: 165px;
  left: 150px;
  width: 180px;
  height: 25px;
  color:rgb(255, 255, 255);
  padding-top: 7px;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  background-color:red ;
}

.containerofbuecher .items .greenbutton{
  position: absolute;
  top: 165px;
  left: 150px;
  width: 100px;
  height: 25px;
  color:rgb(255, 255, 255);
  padding-top: 7px;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  background-color:#7DAD47 ;
}

.containerofbuecher .items .binPicture{
  position: absolute;
  top: 170px;
  left: 90%;
}

/*meine Bücher begins*/
.containerofmeinebuecher{
  overflow-y: scroll;
  overflow-x: hidden  ;
  display: flex;
  position: absolute;
  top: 200px;
  width: 100%;
  height: 65%;
}
.containerofmeinebuecher{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.containerofmeinebuecher::-webkit-scrollbar {
  display: none;
}

#meinebüchertitel{
  position: absolute;
top:35px;
left:35px;
font-size: 30px;
}

.containerofmeinebuecher #firstItem{
  position: absolute;
  top:100px;
  left: 45px;
}

.containerofmeinebuecher #secondItem{
  position: absolute;
  top:400px;
  left: 45px;
}

.containerofmeinebuecher #thirdItem{
  position: absolute;
  top:700px;
  left: 45px;
}

.containerofmeinebuecher #fourthItem{
  position: absolute;
  top:1000px;
  left: 45px;
}

.containerofmeinebuecher .items .redbutton{
  position: absolute;
  top: 120px;
  left: 150px;
  width: 200px;
  height: 25px;
  color:rgb(255, 255, 255);
  padding-top: 7px;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  background-color:red ;
}

.containerofmeinebuecher .items .greenbutton{
  position: absolute;
  top: 120px;
  left: 150px;
  width: 200px;
  height: 25px;
  color:rgb(255, 255, 255);
  padding-top: 7px;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  background-color:#7DAD47 ;
}

.containerofmeinebuecher .items .binPicture{
  position: absolute;
  top: 170px;
  left: 90%;
}

.containerofmeinebuecher .items .message{
  position: absolute;
  top: 170px;
  left: 150px;
  width: 700px;
}

/*------ ANMELDEN BEGINS-----*/
.anmeldung{
  position: fixed;
  top: 230px;
  left: 40px;
}
.anmeldung-rest{
  position: fixed;
  top: 280px;
  left: 50px;
}

.anmeldung-überschriften{
  font-weight: normal;
  color:#000000;
}

.anmeldung-überschriften h1{
  font-size: 50px;
}

.anmeldeInput h2, .anmeldeInput form {
  font-size: 22px;
}

#obererText{
  font-size: 20px;
  padding-bottom: 25px;
}
#obererText a {
  color: #1b1f21;
  text-decoration: none;
}
#obererText a:hover {
  text-decoration: underline;
}

.anmeldeInput hr {
  background-color:#A78766;
  height: 3px;
  width: 390px;
  border: none;
  margin-top: 10px;
  margin-bottom: 20px;
}

.anmeldeInput  form  input {
  height: 30px;
  width: 380px;
  margin-bottom: 20px;
}

.anmeldung-ausklappen details summary:hover {
  cursor: pointer;
  text-decoration: underline;
}

.anmeldung-ausklappen details {
  margin-bottom: 20px;
}

.anmeldung-ausklappen p {
  margin-left: 17px;
}
.anmeldung-ausklappen p a{
  text-decoration: none;
  color: #1b1f21;
}
.anmeldung-ausklappen p a:hover{
  text-decoration: underline;
  color: #1b1f21;
}
#anmeldebutton:hover {
  cursor: pointer;
}

#question-mark:hover {
  cursor: pointer;
}

#question-mark #tooltip {
  visibility: hidden;
  height: fit-content;
  background-color: #fff;
  color: #000;
  border-color: #000;
  border-width: 2px;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  font-size: 12px;

  position: absolute;
  z-index: 1;
}

#question-mark:hover #tooltip {
  visibility: visible;
}

#anmeldebutton{

  position: relative;
  width: 120px;
  height: 35px;
  background-color:#664220 ;
  color:rgb(255, 255, 255);
  padding-right:15px;
  padding-left: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  border: 0;
}



/*----- ANMELDEN ENDS-------*/

/*----- Registrierung-------*/

.errorMessage {
  color: red;
  display: none;
  margin: 0px;
  padding: 0px;
  font-size: 12px;
}

#registrierungTitel{
  position: absolute;
  font-size: 25px;
  color: #000;
  left: 15px;
  top:20px;
}

#datenSchutzHinweisRegistrierung{
  position: relative;
  font-size: 15px;
  color: #000;
  left: 25px;
  top:40px;
}

#registrierungAngabenZurRegistrierung{
  position: relative;
  font-size: 15px;
  color: #000;
  left: 25px;
  top:55px;
}

#registrierungInputDiv{
  position: relative;
  left: 25px;
  top:55px;
}

#registrierungHr{
  position: relative;
  width: 275px;
  color: #664220;
}

.registrierenNormalesTextfeld, .errorMessage {
  width: 275px;
}

#strasse{
  width: 212px;
}

#hausNummer{
  width: 50px;
}

#postleitzahl{
  width: 85px;
}

#ort{
  width: 177px;
}

.registrierenKnopf {
  position: relative;
  width: 120px;
  height: 35px;
  background-color:#664220 ;
  color:rgb(255, 255, 255);
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
}

#registrierenAusklappe{
  padding-left: 13px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/*----- Registrierung Ende-------*/

/*----- Registrierung erfolgreich -----*/

.mainContentContainer{
  overflow-y: scroll;
  position: absolute;
  display:flex;
  flex-direction: column;
  height: 70.5%;
  width: 100%;
  top:200px;
}

.mainContentContainer{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.mainContentContainer::-webkit-scrollbar {
  display: none;
}

.titleContainer {
  padding-top: 35px;
  padding-left: 35px;
}

#registeredTitle {
  font-size: 30px;
}

.mainContent {
  padding-top: 25px;
  padding-left: 55px;
  padding-right: 50px;
}

#textFirstHalf, #cardID {
  display: inline;
}

#loginNowButton {
  width: auto;
  height: auto;
  background-color:#664220 ;
  color:white;
  font-size: 15px;
  padding: 10px 15px;
  text-align: center;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

/*----- Registrierung erfolgreich Ende -----*/

/*----- Abmelden -----*/

.mainContentContainer{
  overflow-y: scroll;
  position: absolute;
  display:flex;
  flex-direction: column;
  height: 70.5%;
  width: 100%;
  top:200px;
}

.mainContentContainer{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.mainContentContainer::-webkit-scrollbar {
  display: none;
}

.titleContainer {
  padding-top: 35px;
  padding-left: 35px;
}

#logOffTitle {
  font-size: 30px;
}

.mainContent {
  padding-top: 25px;
  padding-left: 55px;
  padding-right: 50px;
}

#mainText {
  display: inline;
}

.buttonContainer {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

#confirmButton, #abortButton {
  width: auto;
  height: auto;
  background-color:#664220 ;
  color:white;
  font-size: 15px;
  padding: 10px 15px;
  text-align: center;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

/*----- Abmelden Ende -----*/

/*----- Abmelden erfolgreich -----*/

.mainContentContainer{
  overflow-y: scroll;
  position: absolute;
  display:flex;
  flex-direction: column;
  height: 70.5%;
  width: 100%;
  top:200px;
}

.mainContentContainer{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.mainContentContainer::-webkit-scrollbar {
  display: none;
}

.titleContainer {
  padding-top: 35px;
  padding-left: 35px;
}

#logOffSuccessfulTitle {
  font-size: 30px;
}

.mainContent {
  padding-top: 25px;
  padding-left: 55px;
  padding-right: 50px;
}

#mainText {
  display: inline;
}

/*.buttonContainer -> siehe Abmelden*/

#backToHomeButton, #logInAgainButton {
  width: auto;
  height: auto;
  background-color:#664220 ;
  color:white;
  font-size: 15px;
  padding: 10px 15px;
  text-align: center;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

/*----- Abmelden erfolgreich Ende -----*/

/*Reservierung*/

#reservierung {
  position: absolute;
  top: 230px;
  left: 50px;
  width: 100vw;
}
#reservierung h1 {
  font-size: 40px;
  font-weight: normal;
}
#reservierung-left #möchten-sie {
  font-size: 24px;
  margin: 20px 0;
}
.beschreibung h2 {
  font-size: 22px;
  font-weight: normal;
}

#reservierung-left {
  margin-left: 40px;
  display: grid;
  width: 100%;
}
#reservierung-left .item {
  display: flex;
}
#reservierung-left hr {
  margin: 20px 0;
  width: 80%;
  background-color:#A78766;
  height: 2px;
  border: none;
}
#reservierung-left #erklärung {
  font-size: 20px;
  width: 80%;
  overflow: auto;
  margin: 20px 0;
}
#reservierung-left #erklärung a {
  text-decoration: none;
  color: #1b1f21;
}
#reservierung-left #erklärung :hover {
  text-decoration: underline;
}
#button-container {
  display: flex;
  width: 80%;
  justify-content: space-between;
}
#reservierung-left .beschreibung {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.b2 {
  text-align: center;
  vertical-align: center;
  line-height: 40px;
  height: 40px;
  width: 200px;
  border-width: 0;
  color: #fff;
}

.beschreibung .green {
  background-color: #70AD47;
}
.beschreibung .red {
  background-color: #F22C2C;
}
#button-container a {
  height: 25px;
  background-color: #664220;
  color: rgb(255, 255, 255);
  padding: 10px 15px;
  text-align: center;
  vertical-align: center;
  line-height: 25px;
  text-decoration: none;
  border-radius: 8px;
  border: 0;
}

/*Reservierung Ende*/

/*Verlängerung Start*/

#verlängerung {
  overflow: auto;
  display:flex;
  position: absolute;
  top: 230px;
  left: 50px;
  width: 100vw;
}

#verlängerung h1 {
  font-size: 40px;
  font-weight: normal;
}
#verlängerungContent {
  overflow: auto;
  position: fixed;
  margin-top: 40px;
  margin-left: 25px;
  display: grid;
  width: 100%;
}

#verlängerungContent #möchten-sie {
  font-size: 24px;
  margin: 20px 0;
}
.beschreibung h2 {
  font-size: 22px;
  font-weight: normal;
}

#verlängerungItem .beschreibung h3{
  font-weight: normal;
  margin-top: -100px;
}

#verlängerungContent .item {
  display: flex;
}

#verlängerungContent hr {
  margin: 20px 0;
  width: 80%;
  background-color:#A78766;
  height: 2px;
  border: none;
}

#verlängerungButtonContainer {
  margin-top: 25px;
  display: flex;
  width: 80%;
  justify-content: start;
}

#verlängerungButtonContainer #verlängerungButton1{
  margin-right: 20px;
  width: 110px;
}

#verlängerungButtonContainer #verlängerungButton2{
  width: 110px;
}

#verlängerungContent .beschreibung {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.b2 {
  text-align: center;
  vertical-align: center;
  line-height: 40px;
  height: 40px;
  width: 200px;
  border-width: 0;
  color: #fff;
}

.beschreibung .green {
  background-color: #70AD47;
}
.beschreibung .red {
  background-color: #F22C2C;
}
#verlängerungButtonContainer a {
  height: 25px;
  background-color: #664220;
  color: rgb(255, 255, 255);
  padding: 10px 15px;
  text-align: center;
  vertical-align: center;
  line-height: 25px;
  text-decoration: none;
  border-radius: 8px;
  border: 0;
}

#verlängerungErfolgreichButton1{
  width: 220px;
}
/*Verlängerung Ende*/

/*Largest Devices*/
@media screen and (max-width:1400px){
  #sidecandle{
    width: 12%;
  }
  .p1{
    max-width: 86%;
  }
  .p2{
    max-width: 86%;
  }
  .containerOfAll{
    width: 85%;
    left: 35px;
    height: 65%;
  }
  .containerOfAll .items .inputPlusMinus{
    left: 600px;
  }

  .main #reservieren{
    top: 600px;
    left: 100px;
  
  }

  .main{
    overflow-x: hidden;
    position: absolute;
    top:200px;
    right: 10px;
    height: 65%;
}
  
}

/*Large Devices*/
@media screen and (max-width:1200px){
  #sidecandle{
    width: 12%;
  }
  .p1{
    max-width: 86%;
  }
  .p2{
    max-width: 86%;
  }
  .containerOfAll{
    width: 85%;
    left: 35px;
    height: 500px;
  }
  .containerOfAll .items .inputPlusMinus{
    left: 600px;
  }

  .main #reservieren{
    top: 600px;
    left: 100px;
  
  }
  .main{
    overflow-x: hidden;
    position: absolute;
    top:200px;
    right: 10px;
    height: 65%;
}
}

/*medium Devices*/
@media screen and (max-width:1000px){
  #sidecandle{
    width: 14%;
  }
  .p1{
    max-width: 84%;
  }
  .p2{
    max-width: 84%;
  }
  .containerOfAll .items .inputPlusMinus{
    left: 500px;
}
.containerOfAll{
  width: 90%;
}

.main{
  
  height: 65%;
}
.containerofmeinebuecher .items .message{
  width: 400px;
}

}
/*small Devices*/
@media screen and (max-width:800px){
 
  #sidecandle{
    width: 16%;
  }
  .p1{
    max-width: 81%;
  }
  .p2{
    max-width: 81%;
  }
  
  .containerofbuecher .items .binPicture{
    left: 80%;
  }

  .containerofmeinebuecher .items .binPicture{
    left: 80%;
  }

  .containerOfAll .items .inputPlusMinus{
      left: 280px;
  }
  .containerOfAll{
    width: 90%;
  }
  .main #reservieren{
    top: 600px;
    left: 100px;
  
  }
  .main {
    height: 65%;
  
  }
  .main .containerOfAll .items .redbutton{
    width: 100px;
    height: 40px;
    top: 150px;
  }

  .containerofmeinebuecher .items .message{
    width: 240px;
  }
  /*Burger Menu*/
/*invisibility and deactivate buttons*/
  #uberuns{
    pointer-events: none;
    opacity: 0;
  }
    #abmelden{
    pointer-events: none;
    opacity: 0;
  }
  #buecher{
    pointer-events: none;
    opacity: 0;
  }
  #meinebuecher{
    pointer-events: none;
    opacity: 0;
  }

  #nav-toggle {
    opacity: 0;
    pointer-events: none;
  }
  .suchleiste{
    opacity: 0;
    pointer-events: none;
  }
  #buttonID{
    opacity: 0;
    pointer-events: none;
  }
  /*Reposition*/
  #erweitertesuche{
    position: fixed;
    right: 60px;
    top: 15px;
  }
  
  /*Burger Icon creation and position*/
  .icon-burger {
    display: none;
    position: fixed;
    top: 24px;
    right: 10px;
    transform: translateY(-50%);
    cursor:pointer;
  }
   .icon-burger .line {
    width: 30px;
    height: 5px;
    background-color: #fff;
    margin: 5px;
    border-radius: 3px;
    transition: all .3s ease-in-out;
  }
  nav .icon-burger {
		display: block;
	}
    /*Burger Icon rotation / Animation*/
	nav :checked ~ .icon-burger .line:nth-child(1) {
		transform: translateY(10px) rotate(225deg);
	}
	nav :checked ~ .icon-burger .line:nth-child(3) {
		transform: translateY(-10px) rotate(-225deg);
	}
	nav :checked ~ .icon-burger .line:nth-child(2) {
		opacity: 0;
	}

  #uberuns{
    position: fixed;
    left: 0px;
    top: 150px;
    text-align: center;
  }

#buecher{
  position: fixed;
  left: 50%;
  top: 50%;
}
#meinebuecher{
  position: fixed;
  left: 300px;
  top: 150px;
}

/*erweiterte Suche*/
.hauptcontainer .buchtitel{
  left:20px;
}
.hauptcontainer .buchtiteloptions{
  top: 110px;
  left:20px;
}

.hauptcontainer .und-wort1{
  top: 140px;
  left:20px;
}

.hauptcontainer .und-wort2{
  left:20px;
  top: 200px;
}

.hauptcontainer .autor{
  top: 140px;
  left:100px;
}

.hauptcontainer .autoroptions{
  top: 170px;
  left:20px;
}

.hauptcontainer .stichwort{
  top: 200px;
}

.hauptcontainer .stichwörteroptions{
  top: 230px;
  left:20px;
}

.hauptcontainer #weiteresuchkriterien{
  top: 270px;

}

.hauptcontainer .jahrvon{
  top: 300px;
}

.hauptcontainer .anfangsdatum{
  top: 330px;
  left: 20px;
 
}

.hauptcontainer .bis{
  top: 330px;
  left: 140px;
}

.hauptcontainer .endsdatum{
  top: 330px;
  left: 170px;
}

.hauptcontainer .sprache{
  top: 370px;
}

.hauptcontainer .spracheingabe{
    top: 400px;
    left:20px;
  
}

.hauptcontainer .verfügbarkeit{
  top: 430px;
  left: 20px;
}

.hauptcontainer .checkbox{
  top: 460px;
  left: 20px;
}

.hauptcontainer .kommentar{
  top:460px;
  left: 40px;
  font-size: 15px;
}

.hauptcontainer #suchen{
  top: 500px;
}
.hauptcontainer #suchfelderleeren{
  top: 500px;
}


}
/*extra small Devices*/
@media screen and (max-width:620px){
 
  #sidecandle{
    width: 16%;
  }

  .p1{
    max-width: 80%;
  }

  .p2{
    max-width: 80%;
  }

  .headerinItem{
    word-break: break-word;
    font-size: 15px;
    width: 200px;
  }

  .main .containerOfAll .items .redbutton{
    width: 100px;
    height: 40px;
  }
  
}


.fuss{
    height: 74px;;
    width: 100%;
    position: fixed;
    background-color: #24140d;
    display: flex;
    bottom: 0px;
    
}

#impressum{
  position: fixed;
  left: 0px;
  bottom: 12px;
  width: 120px;
  height: 35px;
  background-color:#664220 ;
  color:rgb(255, 255, 255);
  padding-right:10px;
  padding-left: 8px;
  padding-top: 15px;
  padding-bottom: 0px;
  text-align: center;
  text-decoration: none;
}

#kontakt{
position: fixed;
left: 150px;
bottom: 12px;
width: 120px;
height: 35px;
background-color:#664220 ;
color:rgb(255, 255, 255);
padding-right:10px;
padding-left: 8px;
padding-top: 15px;
padding-bottom: 0px;
text-align: center;
text-decoration: none;
}


#datenschutz{
position: fixed;
left: 300px;
bottom: 12px;
width: 120px;
height: 35px;
background-color:#664220 ;
color:rgb(255, 255, 255);
padding-right:10px;
padding-left: 8px;
padding-top: 15px;
padding-bottom: 0px;
text-align: center;
text-decoration: none;
}