/*
 Theme Name:   Basis & Woge - Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

/*
// Fonts are handled and preloaded from Yabe Webfont
// yabes font.css is altered for the variable Roboto Declaration. So no Plugin Updates or changes!
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E30-8s51ostz0rdg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E3_-gs51ostz0rdg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} */

/* If we’re loading an italic-only font file, we need to use font-style: italic;. If we’re loading a font file with a slant axis, we have to specify the low and high degree values, such as font-style: oblique 0deg 10deg;

Due to some inconsistencies with how browsers handle variable font files that contain both italic and upright variants (and also files that contain both italic and slant axes), in these scenarios it’s best to omit the font-style line completely. */
/* 
  @font-face {
  font-family: 'FAMILY_NAME';
  font-stretch: PERCENTAGE_RANGE_LOW_TO_HIGH; / * Note that font-stretch is a % of normal width * /
  font-style: NORMAL_OR_ITALIC; / * See note above * /
  font-weight: NUMERIC_RANGE_LOW_TO_HIGH;
  src: url(FONT_FILE_NAME.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url('/basiswoge/wp-content/uploads/.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} */

/* if bricks styles set to "external file" we need to redeclare all the variables
:root {
  --bw-color-primary: #db3204; neu 4.25: #cf4b0f - low contrast, changed to #ce4a0f
  --bw-color-secondary: #002e4e;
  --bw-color-third: #24cdfb;
  --bw-color-bg-light: #fefefe;
  --bw-color-fourth: #ff5829;
}
*/

:root {
  --icon-phone: url("data:image/svg+xml,%3Csvg height='512' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m358.901799 447.994594c-19.52 0-46.94-7.063872-88-30.003872-49.93-28-88.55-53.85-138.21-103.38-47.8799998-47.85-71.1799998-78.83-103.7899998-138.17-36.83999998-67-30.55999998-102.1200001-23.53999998-117.1300001 8.35999998-17.94 20.69999998-28.67 36.64999998-39.32 9.0595014-5.9356449 18.6467022-11.02382414 28.64-15.19999999 1-.43 1.93-.84 2.76-1.21 4.95-2.23 12.45-5.6 21.95-2 6.3399998 2.38 11.9999998 7.25 20.8599998 15.99999999 18.17 17.92 43 57.83 52.16 77.43 6.15 13.2100001 10.22 21.9300001 10.23 31.7100001 0 11.45-5.76 20.28-12.75 29.81-1.31 1.79-2.61 3.5-3.87 5.16-7.61 10-9.28 12.89-8.18 18.05 2.23 10.37 18.86 41.24 46.19 68.51s57.31 42.85 67.72 45.07c5.38 1.15 8.33-.59 18.65-8.47 1.48-1.13 3-2.3 4.59-3.47 10.66-7.93 19.08-13.54 30.26-13.54h.06c9.73 0 18.06 4.22 31.86 11.18 18 9.08 59.11 33.59 77.14 51.78 8.77 8.84 13.66 14.48 16.05 20.81 3.6 9.53.21 17-2 22-.37.83-.78 1.74-1.21 2.75-4.209223 9.975499-9.327469 19.542501-15.29 28.58-10.63 15.9-21.4 28.21-39.38 36.58-9.232773 4.367102-19.337082 6.579449-29.55 6.473872z' fill='%23002e4e' transform='translate(34 24)'/%3E%3C/svg%3E");
  --icon-phone-o: url("data:image/svg+xml,%3Csvg height='512' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m358.901799 447.994594c-19.52 0-46.94-7.063872-88-30.003872-49.93-28-88.55-53.85-138.21-103.38-47.8799998-47.85-71.1799998-78.83-103.7899998-138.17-36.83999998-67-30.55999998-102.1200001-23.53999998-117.1300001 8.35999998-17.94 20.69999998-28.67 36.64999998-39.32 9.0595014-5.9356449 18.6467022-11.02382414 28.64-15.19999999 1-.43 1.93-.84 2.76-1.21 4.95-2.23 12.45-5.6 21.95-2 6.3399998 2.38 11.9999998 7.25 20.8599998 15.99999999 18.17 17.92 43 57.83 52.16 77.43 6.15 13.2100001 10.22 21.9300001 10.23 31.7100001 0 11.45-5.76 20.28-12.75 29.81-1.31 1.79-2.61 3.5-3.87 5.16-7.61 10-9.28 12.89-8.18 18.05 2.23 10.37 18.86 41.24 46.19 68.51s57.31 42.85 67.72 45.07c5.38 1.15 8.33-.59 18.65-8.47 1.48-1.13 3-2.3 4.59-3.47 10.66-7.93 19.08-13.54 30.26-13.54h.06c9.73 0 18.06 4.22 31.86 11.18 18 9.08 59.11 33.59 77.14 51.78 8.77 8.84 13.66 14.48 16.05 20.81 3.6 9.53.21 17-2 22-.37.83-.78 1.74-1.21 2.75-4.209223 9.975499-9.327469 19.542501-15.29 28.58-10.63 15.9-21.4 28.21-39.38 36.58-9.232773 4.367102-19.337082 6.579449-29.55 6.473872z' fill='%23db3204' transform='translate(34 24)'/%3E%3C/svg%3E");
  --icon-mail: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23002e4e' transform='translate(52 110)'%3E%3Cpath d='m412.6 35.3-107.6 109.6c-.8.8-.8 2 0 2.8l75.3 80.2c5.1 5.1 5.1 13.3 0 18.4-2.5 2.5-5.9 3.8-9.2 3.8s-6.7-1.3-9.2-3.8l-75-79.9c-.8-.8-2.1-.8-2.9 0l-18.3 18.6c-15.3 15.5-35.6 24.1-57.4 24.2-22.1.1-43.1-9.2-58.6-24.9l-17.6-17.9c-.8-.8-2.1-.8-2.9 0l-75 79.9c-2.5 2.5-5.9 3.8-9.2 3.8s-6.7-1.3-9.2-3.8c-5.1-5.1-5.1-13.3 0-18.4l75.3-80.2c.7-.8.7-2 0-2.8l-107.7-109.6c-1.3-1.3-3.4-.4-3.4 1.4v219.3c0 17.6 14.4 32 32 32h352c17.6 0 32-14.4 32-32v-219.3c0-1.8-2.2-2.6-3.4-1.4z'/%3E%3Cpath d='m208 183.1c14.8 0 28.7-5.8 39.1-16.4l156.9-159.7c-5.5-4.4-12.3-7-19.8-7h-352.3c-7.5 0-14.4 2.6-19.8 7l156.9 159.7c10.3 10.5 24.2 16.4 39 16.4z'/%3E%3C/g%3E%3C/svg%3E");
} 

body {
  font-family: 'Roboto-Flex', roboto,-apple-system,"system-ui",Segoe UI,helvetica,arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
  color: #002e4e;
  background-color: #fefefe;
  line-height: 1.2;
}

svg:not(:root) {
  overflow: hidden;
  color: blue;
}

.sr-only {
  clip: rect(0,0,0,0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* basics + resets */
p, h3, h4, blockquote, address {
  font-family: 'Roboto-Flex';
  font-style: normal;
  font-weight: 400;
}

p,
.bw-fontsize-m,
.brxe-text-basic li {
  font-size: 1rem;
}

.brxe-text-basic h2 {
  margin-bottom: 2rem;
}
.brxe-text-basic h3 {
  margin-bottom: 1rem;
}

.bw-single-framed .brxe-text-basic h3 {
  color: var(--bw-color-primary);
  margin-bottom: .1rem;
}

.bw-single-framed .brxe-text-basic h2 {
  color: var(--bw-color-primary);
  font-size: 1.4rem;
  margin-bottom: .1rem;
}

@media screen and (max-width: 834px){ 
  .bw-single-framed .brxe-text-basic h2 {
    font-size: 1.2rem;
  }
}

/* default class for search and other pages without specific template */
.layout-default,
.bricks-archive-title-wrapper {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.bricks-archive-title-wrapper {
  padding-left: 15px;
  padding-right: 15px;
} 

.search-results .bricks-layout-wrapper {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
}

.bw-koop p:has(img) {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  place-items: center;
}

.bw-koop img {
  max-height: 110px;
  width: auto;
}

.bw-lead-block {
  color: var(--bw-color-primary);
  font-size: 1rem;
  text-align: center;
  align-items: center;
  gap: 2rem;
  margin: 0 0 60px 0;
  padding: 0 1rem;
  width: 836px !important; /* overwrite brxe-container or set inline, 800+padding */
}

@media screen and (max-width: 834px){ 
  .bw-lead-block {
    padding: 0 2rem;
  }
}

/* Layout  and Helper classes */
.bw-u-100widthheight {
  width: 100%;
  height: 100%;
}

.bw-u-horizontal-spacing {
  padding: 0 1rem;
  /* other breakpoints? */
}

/* main content block standard pages 
 * set class on brxe-block, not on container for better width support
*/
.bw-page-main {
  text-align: center;
  gap: 2rem;
  margin: 30px 0 60px 0;
  padding: 0 1rem;
  width: 836px;
}
.bw-page-main_leftalign {
  text-align: left;
}
.bw-page-main > .brxe-text-basic {
  align-self: center;
}
@media screen and (max-width: 834px) { 
  .bw-page-main {
    width: 576px;
  }
}
/* menues 
  #bw-main-menu -> desktop + mobile main menu wrapper
  .bricks-nav-menu -> ul desktop main + footer
  .bricks-mobile-menu-wrapper -> nav mobile main
  .bricks-nav-menu-wrapper -> nav desktop main + footer
  #menu-hauptmenue-1 -> ul mobile main
  #menu-hauptmenue -> ul desktop main
  .menu-item -> li jeglicher menue items
*/
#menu-hauptmenue .menu-item a {
  font-size: 1.36rem;
  text-transform: uppercase;
  color: var(--bw-color-secondary);
  line-height: 1rem;
}
#menu-hauptmenue .menu-item a:hover,
#menu-hauptmenue .menu-item a:active {
  color: var(--bw-color-primary);
}

/* clickable tel number header - more styles Bricks inline */
#bw-menu-phone {
  font-size: 1.36rem;
  color: var(--bw-color-primary);
  position: relative;
  padding:  0 30px 0 40px;
  display: block;
}

#bw-menu-phone::before {
  position: absolute;
  content: "";
  color: inherit;
  left: 0;
  top: 5px;
  width: 30px;
  height: 30px;
  background-position: 0 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-image: var(--icon-phone-o);
}

/* smaller font sizes + no icon to prevent line break */
@media screen and (max-width: 1100px) {
  #bw-menu-phone,
  #menu-hauptmenue .menu-item a {
    font-size: 1.2rem;
  }
  #bw-menu-phone {
    padding: 0;
  }
  #bw-menu-phone::before {
    width: 0;
    height: 0;
    background-image: none;
  }
}

@media screen and (max-width: 834px) { 
  #bw-main-menu .bricks-mobile-menu-wrapper {
    margin-top: var(--header-height);
    padding-bottom: var(--header-height);
    border-right: 1px solid #f5f5f5;
  }
}


/* buttons - more styles directly defined via bricks builder */
.brxe-button {
  transition: transform 0.4s;
}
.brxe-button:hover {
  transform: scale(1.1);
}
.brxe-button:focus {
    outline: 2px dashed var(--bw-color-secondary);
}
.button-inline {
  text-decoration: none;
  margin: 0.5rem 0;
}

/* iframe Spendenform */
#bfs-net-tool {
  padding-bottom: 190% !important;
}
@media screen and (max-width: 840px) {
  #bfs-net-tool {
    padding-bottom: 300% !important;
  }
}

/* project teaser grid with categories */

#bw-projectcategories.is-not-visible {
  display: none;
}

.bw-category-heading {
  width: 100%;
  text-align: center;
  margin: 3rem 0 2rem 0;
  position: relative;
}

.bw-category-heading:after {
    border-bottom: 3px solid var(--bw-color-secondary);
    content: "";
    margin: 0 auto;
    position: absolute;
    top: 55%; 
    left: 0; 
    right: 0;
    width: 100%;
    z-index: -1;
}

.bw-category-heading > span {
  background: var(--bw-color-bg-light); 
  padding: 0 20px; 
}

/* FF width: fit-content not working, set explicit width for 1/2/3 cols! 
 * 3col big 1460 - 1510: 1510
 * 2col big 1510 - 1020px: 960, 
 * 2col small: 
*/

.bw-teaser-wrapper {
  width: 460px;
  height: 100%;
}

/* border only needed for shadow */
.bw-teaser {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  width: 100%;
  position: relative;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.60);
  font-size: 16px;
}

/* better BPs: 1020px would be perfect!
 + px font-sizes for fixed teaser layout */
@media screen and (max-width: 834px){
  .bw-teaser-wrapper {
    width: 340px;
  }
  .bw-teaser {
    font-size: 12px;
  }
}

.bw-teaser_head {
  background-color: var(--bw-color-secondary);
  text-align: center;
  min-height: 30px;
  width: 100%;
  color: #ffffff;
  border: 6px solid var(--bw-color-secondary);
  border-top-left-radius: 50px;
  padding: 0.75rem .5rem .5rem;
}
.bw-teaser_job .bw-teaser_head {
  background-color: var(--bw-color-primary);
  border-color: var(--bw-color-primary);
}

.bw-teaser_head > h3 {
  color: var(--bw-color-third);
}
.bw-teaser_job .bw-teaser_head > h3 {
  color: #ffffff;
}

.bw-teaser_subline {
  color: #ffffff;
}

.bw-teaser_body {
  flex-grow: 3;
  background-color: #fff;
  border: 6px solid var(--bw-color-secondary);
  border-bottom-right-radius: 50px;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.1rem 1.5rem 1.1rem;
}
.bw-teaser_job .bw-teaser_body {
  border-color: var(--bw-color-primary);
}

/* colored border */
.bw-teaser_body {
  position: relative;
}

.bw-teaser_project .bw-teaser_body:after {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 60px;
  height: 60px;
  content: '';
  border-bottom-right-radius: 50px;
  border-bottom: 6px solid transparent;
  border-right: 6px solid transparent;
}

.ambulante-hilfen .bw-teaser_body:after {
  border-color: #af214d;
}
.anlaufstellen .bw-teaser_body:after {
  border-color: #187774;
}
.beratungsstellen .bw-teaser_body:after {
  border-color: #187743;
}
.bildungsprojekte .bw-teaser_body:after {
  border-color: #557e12;
}
.stationaere-hilfen .bw-teaser_body:after {
  border-color: #ffbc14;
}
.schulprojekte .bw-teaser_body:after {
  border-color: #701977;
}
.traegereigener-wohnraum .bw-teaser_body:after {
  border-color: #ce4a0f;
}
.sozialraeumliche-angebote-bezirk-altona .bw-teaser_body:after {
  border-color: #e4aF1b;
}
.sozialraeumliche-angebote-bezirk-mitte .bw-teaser_body:after {
  border-color: #e4801b;
}
.sozialraeumliche-angebote-bezirk-nord .bw-teaser_body:after {
  border-color: #c1c723;
}

.bw-shorttext {
  padding: 1rem 0;
}

.bw-teaser_address {
  margin-top: auto;
}

.bw-teaser_button {
  position: absolute;
  bottom: -20px;
  left: calc(50% - 80px);
}
.bw-teaser_button2 {
  position: absolute;
  bottom: -20px;
  left: calc(50% - 55px);
}
@media screen and (max-width: 834px) {
  .bw-teaser_button {
    left: calc(50% - 60px);
  }
  .bw-teaser_button2 {
    left: calc(50% - 45px);
  }
}

.bw-teaser_project .bw-teaser_bodytop {
  display: flex;
  justify-content: space-between;
}

/* Icons */
.bw-icon_phone,
.bw-icon_mail {
  position: relative;
  padding-left: 32px;
  display: block;
}

.bw-icon_phone::before,
.bw-icon_mail::before {
  position: absolute;
  content: "";
  color: inherit;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  background-position: 0 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

@media screen and (max-width: 834px){
  .bw-icon_phone,
  .bw-icon_mail {
    padding-left: 26px;
  }
  .bw-icon_phone::before,
  .bw-icon_mail::before {
    width: 18px;
    height: 18px;
  }
}

.bw-icon_mail::before {
  background-image: var(--icon-mail);
}
.bw-icon_phone::before {
  background-image: var(--icon-phone);
}

/* Social Icons on project detail page */
a[class^="bw-icon-"], a[class*=" bw-icon-"] {
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 1rem 0.5rem 0 0;
}

.bw-icon-facebook {
  background-image: url('icon-fb.png');
}
.bw-icon-tiktok {
  background-image: url('icon-tiktok.png');
}
.bw-icon-instagram {
  background-image: url('icon-insta.png');
}

ul.bw-socials {
  list-style-type: none;
  margin: 0;
  padding: 0;
}


/* Project filter */
#toggle-filter {
  position: relative;
}

#toggle-filter:after {
    position: absolute;
    content: "ANGEBOTSFILTER";
    color: inherit;
    left: -80px;
    top: 40px;
    width: 200px;
    height: 30px;
    font-size: 1.36rem;
    font-family: "Barlow Condensed";
    text-align: center;
}

#bw-filter-wrapper {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.5s ease-out;
}

#bw-wrapper-ani.brx-open #bw-filter-wrapper {
  max-height: 100%;
  opacity: 1;
}

.bw-filter {
  justify-content: space-between;
  flex-direction: row;
}

.bw-filter .options-wrapper > li {
  font-size: 16px;
  line-height: 1.4;
}

:where(.brxe-form.bw-filter) .options-wrapper input {
  margin-right: 8px;
  padding: 0;
}
.filterbtn > label {
  padding: 0;
}

.bw-filter .label.labelformgroup {
  font-family: 'Barlow Condensed';
  font-size: 1.36rem;
  text-transform: none;
  font-weight: 400;
}

.bw-filter .form-group:not(:last-child) {
  padding-right: 2%;
}
.bw-filter .form-group:nth-child(1) {
  width: 35%;
}
.bw-filter .form-group:nth-child(2) {
  width: 34%;
}
.bw-filter .form-group:nth-child(3) {
  width: 27%;
}
@media (max-width: 834px) {
  .bw-filter .form-group:not(:last-child) {
    padding-right: 1%;
  }
  .bw-filter .form-group:nth-child(1) {
    width: 48%;
  }
  .bw-filter .form-group:nth-child(2) {
    width: 48%;
  }
  .bw-filter .form-group:nth-child(3) {
    width: 100%;
  }
}
@media (max-width: 484px) {
  .bw-filter .form-group:nth-child(1),
  .bw-filter .form-group:nth-child(2) {
    width: 100%;
  }
}

/* hide - show isotope container */
.isotope-container {
  position: absolute !important;
  opacity: 0;
  left: -9999px;
  transition: opacity 1.5s ease-out;
}
.isotope-container.is-visible {
  position: relative !important;
  opacity: 1;
  left: 0;
}

/* plugin lightweight accordion */
.lightweight-accordion:not(:has(+ .lightweight-accordion)) {
  margin-bottom: 2rem;
}
.lightweight-accordion {
  margin-bottom: 0.125rem;
}
.lightweight-accordion .lightweight-accordion-title {
  display: list-item;
  padding: .75rem 0;
  font-weight: bold;
  cursor: pointer;
  font-family: "Barlow Condensed";
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.2;
}
@media (max-width: 834px) {
  .lightweight-accordion .lightweight-accordion-title {
        font-size: 1.2rem;
    }
}
.lightweight-accordion .lightweight-accordion-title p,
.lightweight-accordion .lightweight-accordion-title span,
.lightweight-accordion .lightweight-accordion-title h3 {
  display: inline;
}
.lightweight-accordion summary {
  display: list-item;
  white-space: pre-wrap;
}
.lightweight-accordion .lightweight-accordion-body {
  padding: 0 0 0 1.5rem;
}
.lightweight-accordion details[open] summary ~ * {
  animation: lwopen 1s ease-in-out;
}
@keyframes lwopen {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}