:root {
    --background: #ececf1;
    --accent-color: #d2d5dd;
    --text: gray;
    --shadow: darkgray;
    --logo: black;
    --breadcrumb: #28ab76;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--background);
    color: var(--text);
    font-family: 'Azeret Mono', monospace, Arial;
    font-size: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.wrapper {
    width: 100vw;
    min-height: 100vh;
}

.navigationWrapper {
    width: 100vw;
    min-height: 75px;
    display: grid;
    grid-template-areas: "logo menu";
    grid-template-columns: 30% auto;
}

.breadcrumbWrapper {
    width: calc(100vw - 10px);
    min-height: 30px;
    font-size: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 0px 0px 10px;
}

.breadcrumbWrapper ol {
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 5px;
}

.breadcrumbWrapper ol li:not(li:last-child):after {
    content: " > ";
}

.breadcrumbWrapper ol li a {
    text-decoration: none;
    color: var(--breadcrumb);
    cursor: pointer;
}

.breadcrumbWrapper ol li a:hover {
    text-decoration: underline;
}

.contentWrapper {
    width: calc(100vw - 20px);
    min-height: 600px;
    padding: 10px;
    /*display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;*/
    display: grid;
    justify-items: center;
    align-items: start;
    grid-template-columns: 70%;
    justify-content: center;
}

.footerWrapper {
    width: calc(100vw - 20px);
    min-height: 10px;
    padding: 10px;
    display: grid;
    justify-items: center;
    align-items: start;
    grid-template-columns: 70%;
    justify-content: center;
}

.footerWrapper ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    border: 1px solid lightgray;
    width: calc(95% - 20px);
    min-height: 50px;
    border-radius: 7px;
    box-shadow: 0px 0px 11px lightgray;
    margin-bottom: 200px;
}

.footerWrapper ul li {
  width: auto;
  padding: 10px;
  display: flex;
  align-content: center;
  justify-content: flex-start;
}

.footerWrapper ul li a {
  color: var(--breadcrumb);
}

.footerWrapper ul li a:hover {
  color: darkgray;
}

.logoWrapper {
    color: var(--logo);
    font-size: 2rem;
    grid-area: "logo";
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    padding: 0px 0px 0px 10px;
}

.menuWrapper {
    grid-area: "menu";
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
}

.menuWrapper ul {
    list-style: none;
    margin: 0px;
    font-size: 1.5rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    gap: 14px;
}

.menuWrapper ul li {
    transition: 0.2s;
}

.menuWrapper ul li a {
    text-decoration: none;
    color: var(--text);
    transition: 0.2s;
    border-radius: 10px;
}

.menuWrapper ul li a:hover {
    /*text-decoration: underline;*/
    padding: 5px 10px;
    box-shadow: 0px 0px 10px lightgray;
    border: 1px solid lightgray;
}

.menuWrapper ul li:hover {
    transform: scale(1.05);
}

.login {
    width: 70%;
    margin: 10vh 0px 0px 0px;
    /*display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;*/
    display: grid;
    align-items: center;
}

.login form {
    border-radius: 7px;
    border: 1px solid var(--accent-color);
    min-height: 400px;
    /*display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;*/
    display: grid;
    align-content: center;
    box-shadow: 0px 0px 11px lightgray;
    grid-template-columns: 60%;
    justify-content: center;
}

.login fieldset {
    min-height: 100%;
    border: none;
    display: grid;
    align-content: center;
    align-items: center;
    /*max-width: 70%;*/
}

.login fieldset .control-group {
    margin: 0px 0px 1rem 0px;
    display: grid;
    align-content: center;
    align-items: center;
    justify-content: center;
    grid-template-columns: 100%;
}

.login fieldset .control-label {
    font-size: 1.5rem;
    margin: 0px 0px 10px 0px;
}

.login fieldset .controls {
    display: grid;
    align-content: center;
    align-items: center;
    justify-content: center;
    grid-template-columns: 100%;
}

.login fieldset .controls:not(:has(.password-group)) input {
    font-size: 1rem;
    border-radius: 5px;
    height: 2rem;
    border: 1px solid var(--accent-color);
}

.login fieldset .controls:has(.password-group) input {
    font-size: 1rem;
    border-radius: 5px;
    height: 2rem;
    border: 1px solid var(--accent-color);
}

.login fieldset .controls:has(.password-group) button {
    display: none;
}

.login fieldset .controls:has(button[type=submit]) button {
    border-radius: 5px;
    height: calc(2rem + 4px);
    border: 2px solid var(--breadcrumb);
    cursor: pointer;
    margin-top: 20px;
    background-color: transparent;
    color: var(--breadcrumb);
    transition: 0.2s;
}

.login fieldset .controls:has(button[type=submit]) button:hover {
  background-color: var(--breadcrumb);
  color: white;
}

.login fieldset .controls div {
    display: grid;
    align-content: center;
    align-items: center;
}

.login .com-users-login__options {
    display: grid;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.login .com-users-login__options a {
    margin: 20px 0px 0px 0px;
    color: var(--breadcrumb);
    text-align: center;
}

.login .com-users-login__remember {
    cursor: pointer;
}

#user-registration fieldset {
    border: 1px solid var(--accent-color);
    padding: 10px;
    display: grid;
    border-radius: 7px;
    min-height: 15vh;
    align-content: center;
    justify-content: center;
    align-items: center;
    grid-template-columns: 100%;
    margin: 10vh 0px 0px 0px;
}

#user-registration .controls {
    display: grid;
    align-content: center;
    align-items: center;
    justify-content: center;
    grid-template-columns: 100%;
}

#user-registration fieldset .controls input {
    font-size: 1rem;
    border-radius: 5px;
    height: 2rem;
    border: 1px solid var(--accent-color);
    width: calc(100% - 6px);
}

#user-registration .controls button {
    border-radius: 5px;
    height: calc(2rem + 4px);
    border: 2px solid var(--breadcrumb);
    cursor: pointer;
    margin-top: 20px;
    background-color: transparent;
    color: var(--breadcrumb);
    transition: 0.2s;
}

#user-registration .controls button:hover {
  background-color: var(--breadcrumb);
  color: white;
}

.reset {
  width: 70%;
}

.remind {
  width: 70%;
}

.logout div, .logout, .logout form {
  display: grid;
  align-items: center;
  grid-template-columns: 100%;
  justify-content: center;
  justify-items: center;
  width: 100%;
}

.logout button {
  border-radius: 5px;
  height: calc(2rem + 4px);
  border: 2px solid var(--breadcrumb);
  cursor: pointer;
  margin-top: 20px;
  width: 70%;
  background-color: transparent;
  color: var(--breadcrumb);
  transition: 0.2s;
}

.logout button:hover {
  background-color: var(--breadcrumb);
  color: white;
}

.blog {
    display: grid;
    justify-content: center;
    align-items: center;
    gap: 25px;
    justify-items: center;
    flex-wrap: wrap;
    /*grid-template-columns: 70%;*/
}

.blog-items {
    /*border: 1px solid var(--accent-color);
    border-radius: 7px;
    box-shadow: 0px 0px 11px lightgray;
    width: 95%;*/
    width: 100%;
    display: grid;
    align-items: center;
    justify-items: center;
    justify-content: center;
    gap: 20px;
    grid-template-columns: 97%;
}

.blog-item {
    display: grid;
    justify-content: center;
    align-content: center;
    justify-items: center;
    grid-template-areas: "pic content";
    grid-template-columns: 30% 70%;
    width: 100%;
    border: 1px solid var(--accent-color);
    box-shadow: 0px 0px 11px lightgray;
    border-radius: 7px;
    transition: 0.2s;
}

.blog-item:hover {
  transform: scale(1.03);
}

.blog-item:last-child {
  margin-bottom: 40px;
}

.item-image {
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    grid-area: pic;
}

.com-content-article .item-image img {
    max-width: 300px;
    height: auto;
    border-radius: 10px;
}

.blog-item .item-image img {
    width: 70%;
    height: auto;
    border-radius: 10px;
}

.item-content {
    grid-area: content;
    width: 100%;
}

.item-content > * {
    display: none;
}

.item-content .page-header, .item-content .article-info {
    display: block;
}

.item-content .page-header a {
  color: var(--breadcrumb);
  width: calc(100% - 10px);
  display: block;
  font-size: 1.5rem;
  word-break: break-word;
  padding: 5px;
}

.item-content .article-info a {
  color: var(--breadcrumb);
}

.item-page {
  width: 95%;
  border-radius: 10px;
  border: 1px solid lightgray;
  box-shadow: 0px 0px 10px lightgray;
  padding: 10px;
}

.item-page .page-header {
  font-size: 1rem;
}

.item-page .article-info {
  font-size: 1rem;
}

.item-page .com-content-article__body {
  font-size: 1rem;
  margin: 55px 0px;
  word-break: break-word;
}

.item-page .com-content-article__body a {
  color: var(--breadcrumb);
}

.item-page .com-content-article__body:before {
  font-size: 1rem;
  content: "Beschreibung:";
}

.item-page .pagenavigation {
  display: none;
}

.item-page .icons {
  display: none;
}

.com-content-article img {
    width: 70%;
    height: auto;
    aspect-ratio: 0;
    border-radius: 10px;
}

.com-content-category-blog .btn-primary {
  display: none;
}

.tag-category {
  width: 100%;
}

.com-tags__items form {
  display: none;
}

.com-tags__items ul {
    list-style: none;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.com-tags__items ul li {
    border: 1px solid lightgray;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 10px;
    border-radius: 7px;
    box-shadow: 0px 0px 11px lightgray;
    height: 50px;
    transition: 0.2s;
}

.com-tags__items ul li:hover {
    transform: scale(1.005);
}

.com-tags__items ul li h3{
    color: var(--breadcrumb);
    margin: 0px;
    width: 100%;
    display: block;
    height: 100%;
}

.com-tags__items ul li h3 a{
    color: var(--breadcrumb);
    margin: 0px;
    width: 100%;
    display: block;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

@media only screen and (max-device-width: 735px) {
  .footerWrapper ul li {
  width: calc(100% - 20px);
  padding: 10px;
  display: flex;
  align-content: center;
  justify-content: center;
}
    .navigationWrapper {
        grid-template-areas: "logo" "menu";
        grid-template-columns: 100%;
    }

    .contentWrapper{
          grid-template-columns: 100%;
    }
  
    .logoWrapper {
        justify-content: center;
        padding: 0px 0px 0px 0px;
        font-size: 5rem;
    }

    .logoWrapper img {
      width: 4rem;
      height: auto;
    }
  
   .com-tags__items ul {
    list-style: none;
    width: 90%;
    padding: 0px;
    margin: auto;
   }
  
   .menuWrapper ul {
      font-size: 3.5rem;
      margin: 25px 0px 25px 0px;
      gap: 40px 40px;
   }

   .breadcrumbWrapper {
      font-size: 2rem;
      padding: 10px 0px 10px 40px;
      width: calc(100% - 40px);
   }

  .login {
    width: 95%;
    margin: 3vh 0px 0px 0px;
  }
  
  .blog-items {
    grid-template-columns: 100%;
  }
  
  .login form {
    height: 40vh;
    grid-template-columns: 100%;
  }

  .login fieldset {
    min-height: 100%;
    border: none;
  }

  .login fieldset .control-group {
    margin: 0px 0px 4rem 0px;
  }

  .login fieldset .control-label {
    font-size: 3.5rem;
  }

  .login fieldset .controls:not(:has(.password-group)) input {
    font-size: 3rem;
    height: 4rem;
  }

  .login fieldset .controls:has(.password-group) input {
    font-size: 3rem;
    height: 4rem;
  }

  .login fieldset .controls:has(.password-group) button {
    height: calc(4rem + 4px);
    font-size: 2rem;
    border: 5px solid var(--breadcrumb);
  }

  .login fieldset .controls:has(button[type=submit]) button {
    height: calc(4rem + 4px);
    margin-top: 60px;
    font-size: 2rem;
    border: 5px solid var(--breadcrumb);
  }
  
  .login .com-users-login__remember input {
    transform: scale(2.5);
    margin: 12px 20px;
    float: left;
  }

  .login .com-users-login__remember label {
    font-size: 2rem;
  }

  .login .com-users-login__options {
    font-size: 3rem;
  }

  .blog {
    grid-template-columns: 97%;
  }
  
  #user-registration fieldset{
    padding: 20px;
    margin: 1vh 0px 0px 0px;
    display: grid;
    align-content: center;
    justify-content: center;
    align-items: center;
    grid-template-columns: 100%;
    border: none;
    min-height: 1vh;
  }

  #user-registration .controls {
    display: grid;
    align-items: center;
    grid-template-columns: 100%;
    justify-content: center;
    justify-items: center;
    width: 100%;
  }
  
  /*.reset {
    display: grid;
    align-content: center;
    justify-content: center;
    align-items: center;
    grid-template-columns: 100%;
    width: 100%;
  }*/

 #user-registration div, #user-registration {
    display: grid;
    align-content: center;
    justify-content: center;
    align-items: center;
    grid-template-columns: 100%;
 }

  #user-registration fieldset legend {
    font-size: 2rem;
    display: grid;
    align-content: center;
    justify-content: center;
    align-items: center;
    grid-template-columns: 100%;
    display: none;
  }
  
  #user-registration fieldset label{
    font-size: 2rem;
  }
  
  #user-registration fieldset .controls input {
    font-size: 3rem;
    height: 4rem;
    width: calc(100% - 6px);
  }

  #user-registration .controls button {
    height: calc(4rem + 4px);
    font-size: 2rem;
    width: 100%;
    border: 5px solid var(--breadcrumb);
  }

  .logout button {
    height: calc(4rem + 4px);
    font-size: 2rem;
    width: 95%;
    border: 5px solid var(--breadcrumb);
  }

  .item-content {
    font-size: 1.5rem;
  }

  .item-content .page-header a {
    font-size: 2.5rem;
  }

  .item-page .page-header {
    font-size: 1.5rem;
  }

  .item-page .article-info {
    font-size: 1.5rem;
  }

  .item-page .com-content-article__body {
    font-size: 1.8rem;
  }

  .item-page .com-content-article__body:before {
    font-size: 1.8rem;
  }

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

  .com-content-article img {
    width: 100%;
  }

  .com-tags__items ul li {
    padding: 0px 0px 0px 25px;
    height: 170px;
  }

  .com-tags__items ul li h3{
    color: var(--breadcrumb);
    margin: 0px;
    width: 100%;
    display: block;
    height: 100%;
    font-size: 2.5rem;
  }

  .footerWrapper {
    grid-template-columns: 100%;
}

.footerWrapper ul {
  font-size: 2.5rem;
  padding: 30px 10px 30px 10px;
  width: 95%;
  margin: 20px auto 200px auto;
    }
}

.footerWrapper ul li a {
  
}

}