/*
main stylesheets for pompedia.de
based on uikit.css https://getuikit.com

to overwrite uikit classes: use same name uk-…
custom ids or classes: use prefix pom-

*/

/* globals */

:root {
  --blue: #1e90ff;
  --basegrey: #575756;

--white : hsla(0, 0%, 100%, 1);
--gray3 : hsla(0, 0%, 97%, 1);
--gray5 : hsla(0, 0%, 95%, 1);
--gray10: hsla(0, 0%, 90%, 1);
--gray20: hsla(0, 0%, 80%, 1);
--gray30: hsla(0, 0%, 70%, 1);
--gray40: hsla(0, 0%, 60%, 1);
--gray50: hsla(0, 0%, 50%, 1);
--gray60: hsla(0, 0%, 40%, 1);
--gray70: hsla(0, 0%, 30%, 1);
--gray80: hsla(0, 0%, 20%, 1);
--gray90: hsla(0, 0%, 10%, 1);
--black : hsla(0, 0%, 0%, 1);

--pom-green: #3b8f65;
--pom-red: #c45e5e;
--pom-light: #f9f9f7;
--pom-bright: #f4f3ef;
--pom-medium: #efeee8;
/* --pom-dark: #e5e3d9; */
--pom-dark: #d0cfca;

}

* {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-style: normal;  
}

html {
  height: 100%;
}
body {
  min-height: 100%;
  background-color: var(--pom-light);
}



/* typography */

/* ibm-plex-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ibm-plex-sans-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-sans-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/ibm-plex-sans-v19-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-sans-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/ibm-plex-sans-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* material-symbols-outlined-regular - latin */
/* search for icons: */
/* https://fonts.google.com/icons?selected=Material+Symbols+Outlined:search:FILL@0;wght@300;GRAD@-25;opsz@48 */
@font-face {
  font-display: swap;
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/material-symbols-outlined-v100-latin-200.eot'); /* IE9 Compat Modes */
  src: url('../fonts/material-symbols-outlined-v100-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/material-symbols-outlined-v100-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/material-symbols-outlined-v100-latin-200.woff') format('woff'), /* Modern Browsers */
       url('../fonts/material-symbols-outlined-v100-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/material-symbols-outlined-v100-latin-200.svg#MaterialSymbolsOutlined') format('svg'); /* Legacy iOS */
}

body, div, p, td, li, h1, h2, h3, h4, h5, h6, label, input {
  font-family: 'IBM Plex Sans';
}
blockquote, em, i {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  color: inherit;
}

.material-symbols-outlined {
  position: relative;
  display: inline-block;
  top:9px;
  padding-right: 7px;
  font-family: 'Material Symbols Outlined';
  font-size:30px;
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' -25,
  'opsz' 30
}

/* grid & layout */

/* topbar */

#pom-topbar {
  box-sizing: border-box;
  width: 100%;
  background-color: var(--pom-medium);
  height: 80px;
}

#pom-toplogo-container {
  padding:17px 0 0 30px;
}

#pom-hamburger-container {
  padding:25px 30px 0 0;
}
#pom-hamburger-container a {
  color: var(--pom-red);
}
#pom-toplogo {
  width: 100%;
  max-width:200px;
}

#pom-topmenu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#pom-topmenu li {
  float: left;
  line-height: 80px;
}

#pom-topmenu li a {
  display: block;
  color: var(--gray70);
  text-align: center;
  padding: 0 10px 0 10px;
  text-decoration: none;
  transition: 0.3s;
}

#pom-topmenu li a:hover {
  background-color: var(--gray5);
  transition: 0.3s;
}

/* sidebar */

#pom-sidebar-left {
    position: fixed;
    top: 80px;
    bottom: 0;
    box-sizing: border-box;
    width: 200px !important;
    /* padding: 40px 40px 60px 40px; */
    border-right: 1px #e5e5e5 solid;
    overflow:auto;
    background-color: var(--white);
}

@media (min-width: 900px) {
    #pom-sidebar-left {
        width: 300px !important;
    }
}

/* @media (min-width: 960px) {
    #pom-sidebar-left + #pom-main {
        padding-left:240px
    }
}

@media (min-width: 1200px) {
    #pom-sidebar-left + #pom-main {
        padding-left:40px
    }
}

@media (min-width: 1400px) {
    #pom-sidebar-left {
        width: 300px !important;
    }
    #pom-sidebar-left + #pom-main {
        padding-left:40px
    }
} */

/* sidebar filter buttons background */
#pom-sidebar-header {
  background-color: white;
  padding: 10px 10px 10px 10px;
  border-bottom: 1px solid #ddd;
}
@media (min-width: 900px) {
    #pom-sidebar-header {
    padding: 15px 45px 15px 45px;
        
    }
}


#pom-sidebar-filters {
  background-color: white;
  padding: 10px 10px 10px 10px;
}
@media (min-width: 900px) {
    #pom-sidebar-filters {
        
        padding: 0 45px 45px 45px;
    }
}

.filter-button {
  background-color: var(--pom-green);
  transition: 0.4s;
  padding: 0 0 0 0;
}
.filter-button:hover {
  background-color: var(--pom-red);
  transition: 0.4s;
}

.clear-button {
  font-size:10px;
  line-height:10px;
  padding:3px;
}

.strong-switch {
  font-size:10px;
  line-height:15px;
  padding:3px;
}

.uk-checkbox:checked, .uk-checkbox:indeterminate, .uk-radio:checked {
    background-color: var(--pom-red);
    border-color: transparent;
}

/* pom sidebar right */

.uk-offcanvas-overlay::before {
  background: rgba(0,0,0,.3);
}

#pom-sidebar-right .uk-offcanvas-bar {
  background-color: var(--pom-dark);
}
#pom-sidebar-right .uk-offcanvas-bar a{
  color: #666;
  text-transform: uppercase;
}

#pom-sidebar-right .uk-offcanvas-bar a,
#pom-sidebar-right .uk-offcanvas-bar a:active,
#pom-sidebar-right .uk-offcanvas-bar a:focus {
   outline: none;
}

#pom-sidebar-right .uk-offcanvas-bar li.uk-active a{
  color: #000;
  font-weight: bold;
}

/* pom main */

#pom-main {
  margin-top:45px;
  padding-left:200px;
}
@media (min-width: 900px) {
    #pom-main {
      padding-left:300px;
    }
}

#pom-main .uk-container{
  background-color: #fff;
  padding-top:35px;
  padding-bottom:90px;
  margin-bottom:90px;
}

#pom-main a{
  color: var(--pom-red);
  text-decoration: none;
  transition: 0.3s;
}

#pom-main a:hover{
  color: var(--pom-green);
  text-decoration: underline;
  transition: 0.3s;
}

.pom-info {
  background-color: var(--pom-bright);
  border: 1px solid var(--pom-dark);
  padding:60px;
}

#infinite-container .uk-card img {
  width: 100%;
  min-width: 100%;
  height: auto;
}

/* filter list */

.pom-filterlist, 
.pom-filterlist ul, 
.pom-filterlist ul ul {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}

.pom-filterlist h3 {
  font-size: 18px;
  margin: 15px 0 5px 0;
  padding:15px 0 0 0;
  border-top: 1px solid #eee;
}
.pom-filterlist h4 {
  font-size: 15px;
  margin: 10px 0 5px 0;
}

label.checkbox-color {
  text-transform: uppercase;
  font-size: 12px;
  border: 2px solid #555;
  border-radius: 5px;
  display: inline-block;
  padding:2px 5px 2px 5px;
  margin-bottom: 5px;
  color:#aaa;
}

input.checkbox-color {
    display: none;
}

input[type=checkbox].checkbox-color:checked + label.checkbox-color {
    color: #eee;
    background-color: var(--pom-red);
}


/* genral filter (checkbox) */

label.checkbox-cloud {
    text-transform: uppercase;
    font-size: 12px;
    border: 1px solid #999;
    border-radius: 5px;
    display: inline-block;
    padding:2px 5px 2px 5px;
    margin-bottom: 5px;
    color:#aaa;
  }
  
input.checkbox-cloud {
    display: none;
}
  
input[type=checkbox].checkbox-cloud:checked + label.checkbox-cloud {
    color: #eee;
    background-color: var(--pom-red);
    border-color: transparent;
}

label.color-geaedert {
  border-color: #00aa00;
}
label.color-gelb {
  border-color: #e8e346;
}
label.color-gelbgruen {
  border-color: #cde846;
}
label.color-hellgelb {
  border-color: #fafa98;
}
label.color-rot {
  border-color: #d41111;
}
label.color-weiss {
  border-color: #ffffff;
}
label.color-weissgelb {
  border-color: #fcfb9a;
}
label.color-weissgruen {
  border-color: #d3f7ba;
}
label.color-braun {
    border-color: #A52A2A;
}

label.color-braungelb {
    border-color: #CC9966;
}

label.color-braunrot {
    border-color: #993333;
}

label.color-dunkelbraun {
    border-color: #654321;
}

label.color-dunkelgelb {
    border-color: #9B870C;
}

label.color-dunkelrot {
    border-color: #8B0000;
}

label.color-gelborange {
    border-color: #FFAE42;
}

label.color-grau {
    border-color: #808080;
}

label.color-graubraun {
    border-color: #736357;
}

label.color-graugruen {
    border-color: #5E716A;
}

label.color-gruen {
    border-color: #008000;
}

label.color-hellbraun {
    border-color: #D2B48C;
}

label.color-hellgruen {
    border-color: #90EE90;
}

label.color-hellrot {
    border-color: #FFCCCB;
}

label.color-keine {
    border-color: #FFFFFF;
}

label.color-purpurrot {
    border-color: #9B1C31;
}
/* size */

.checkboxes-size {
  /* border: 1px solid #ddd; */
  margin-top:-30px;
  margin-left:-3px;
}

label.checkbox-size {
  text-transform: uppercase;
  font-size: 12px;
  display: inline-block;
  margin-bottom: 5px;
  color:#aaa;
}

label.checkbox-size span {
  padding:0;
}

input.checkbox-size {
    display: none;
}

input[type=checkbox].checkbox-size:checked + label.checkbox-size {
    color: #000;
}

label.checkbox-size span.size-xs {
  font-size:20px;
}
label.checkbox-size span.size-s {
  font-size:24px;
}
label.checkbox-size span.size-m {
  font-size:28px;
}
label.checkbox-size span.size-l {
  font-size:32px;
}
label.checkbox-size span.size-xl {
  font-size:36px;
}
label.checkbox-size span.size-xxl {
  font-size:40px;
}


/* login page */

.login-logo {
  margin-bottom:15px;
}

.login-button {
  background-color: var(--pom-red);
  transition: 0.4s;
}
.login-button:hover {
  background-color: var(--pom-green);
  transition: 0.4s;
}