/* ROOT */
:root {
  --custom-dark: #393939;
  --custom-medium: #cbba93; /* #b2b2b2 */
  --custom-red: #f23b3b; /* #f23b3b */
  --custom-red-hover: #e52d2d;

  --custom-primary-bg: var(--custom-red); /* #cbba93 */
  --custom-primary-bg-hover: var(--custom-red-hover);
  --custom-primary-text: var(--bs-white);

  --custom-shadow-sm: 1px 3px 10px rgba(0,0,0,0.03); /* 1px 3px 10px rgba(0,0,0,0.15) */
  --custom-shadow-sm-hover: 10px 30px 100px rgba(0,0,0,0.3); /* 10px 30px 100px rgba(0,0,0,0.3) */


  --bs-font-sans-serif: "Barlow", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1.2rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-heading-color: inherit;
  --bs-accordion-active-bg: rgba(255,255,255,0);
  --bs-border-color: var(--custom-light-color);

  --bs-primary: var(--custom-red);
  --bs-primary-rgb: 242,59,59;

  --bs-dark: var(--custom-dark);
  --bs-dark-rgb: 57,57,57;

  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
}



 /* TYPOGRAPHY */
.h1, h1,
.h2, h2 {
  color: #393939;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2.5rem;
  text-transform: lowercase;
}
.h3, h3 {
  font-weight: 700;
}
.h5, h5 {
  font-size: var(--bs-body-font-size);
}
.h6, h6 {
  font-weight: 700;
}
.p, p {
  color: #393939;
  font-size: var(--bs-body-font-size);
  font-weight: 500;
  margin-bottom: 1.5rem;
}
a:link {
    color: #f23b3b;
    /* font-size: 1rem; */
    font-weight: 700;
    text-decoration: none;
}
a:visited {
    color: #e52d2d;
}
a:hover {
    color: #e52d2d;
}
a:active {
    color: #e52d2d;
}
hr {
    display: none;
}
.table, table,
.tr, tr,
.td, td {
  font-size: var(--bs-body-font-size);
  font-weight: 500;
}
.lead {
  font-size: 1.2rem;
  font-weight: 400;
}
.nav-main .nav-item {
  margin-bottom: 0.25rem;
}
.nav-main .nav-item a {
  color: #393939;
  font-size: 2rem;
  font-weight: 400;
  text-transform: lowercase;
}
.nav-main .nav-item a.active {
  font-weight: 700;
}
.nav-footer .nav-item {
  margin-top: 0.75rem;
}
.nav-footer .nav-item a {
  font-size: var(--bs-body-font-size);
}
@media (min-width: 1200px) {
  /*
  .h1, h1 {
    font-size: 2.5rem;
  }
  .h2, h2 {
    font-size: 1.5rem;
  }
  .h3, h3 {
    font-size: 1.5rem;
  }
  */
}
@media (min-width: 1400px) {
  .h1, h1,
  .h2, h2 {
    font-size: 2.75rem;
  }
  .h5, h5 {
    font-size: 1.25rem;
  }
  .lead {
    font-size: 1.4rem;
  }
  .nav-main .nav-item a {
    font-size: 2.25rem;
  }
}





/* BUTTONS */
.btn,
a.btn:link,
a.btn:visited {
    background-color: var(--custom-primary-bg);
    color: var(--custom-primary-text);
    border: none;
    cursor: pointer;
    font-weight: 700;
    outline: 0;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    border-radius: 0.2rem;
    display: block;
    font-size: var(--bs-body-font-size);
    margin-top: 2rem;
    padding: 1rem 2rem;
}
.btn:hover,
a.btn:focus,
a.btn:active {
    background-color: var(--custom-primary-bg-hover);
    color: var(--custom-primary-text);
}





/* FORM */
form {
    margin-top: 2rem;
}
label {
    display: block;
    margin-bottom: 0.5rem;
    width: 100%;
}
input, select, textarea {
    border: none;
    border-bottom: 3.5px solid #f4f4f4;
    /* border-left: 3.5px solid #f4f4f4; */
    color: #393939;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    min-height: 2rem;
    outline: 0;
    padding: 0.25rem 0rem;
    transition: all 0.6s ease-in-out;
    width: 100%;
}
input:active, input:focus, select:active, select:focus, textarea:active, textarea:focus {
    border-bottom: 3.5px solid #f23b3b;
    /* border-left: 3.5px solid #f23b3b; */
    outline: 0;
    transition: all 0.4s ease-in-out;
}
input {
}
.selectcontainer {
    width: 100%;
    overflow:hidden;
}
select {
    appearance: none;
    background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center;
    background-position: calc(100% - 6rem);
    width: calc(100% + 6rem);
}
option {
}
textarea {
    min-height: 4.5rem;
    resize: vertical;
}





/* SELECTION */
::-moz-selection { /* Code for Firefox */
  color: var(--custom-primary-text);
  background: var(--custom-primary-bg);
}
::selection {
  color: var(--custom-primary-text);
  background: var(--custom-primary-bg);
}




/* NAVIGATION */
.navigation .nav-container {
  width: var(--bs-offcanvas-width);
  right: 0px;
  padding-top: 6rem;
  padding-bottom: 6rem;
  /* opacity: 0.6; */
}
@media (min-width: 1400px) {
  .navigation,
  .navigation .nav-container {
    left: 0px;
    width: var(--bs-offcanvas-width);
  }
}
@media (min-width: 1700px) {
}
@media (min-width: 1840px) {
}





/* OFFCANVAS */
@media (min-width: 1400px) {
  .offcanvas.offcanvas-end {
    position: relative;
  }
  .offcanvas {
    visibility: visible;
  }
  .offcanvas.offcanvas-end {
    transform: inherit;
  }
}
@media (min-width: 1700px) {
}
@media (min-width: 1840px) {
}






 /* SECTION */
section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
main section:nth-of-type(2n) {
  background-color: var(--bs-light);
}
@media (min-width: 1400px) {
  section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}




/* CONTAINER */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  --bs-gutter-x: 3rem;
}
@media (min-width: 1840px) {
  .container.container-wide {
    max-width: 1800px;
    padding-left: 6rem;
    padding-right: 6rem;
  }
}



/* TABLE */
table {
  border: none !important;
}




/* CARD */
.card {
  --bs-card-border-color: transparent;
  --bs-card-border-width: 0px;
  box-shadow: var(--custom-shadow-sm);
  top: 0rem;
  border-radius: .6rem;
  overflow: hidden;
}
.card.transition-shadow {
  transition: box-shadow .8s ease-out;
}
.card.transition-position {
  transition: top .4s ease-out;
}
.card.transition-shadow.transition-position {
  transition: box-shadow .8s ease-out, top .4s ease-out;
}
.card.hover-bg:hover {
  background-color: var(--custom-primary-bg);
  color: var(--custom-primary-text);
}
.card.hover-bg:hover p {
  color: var(--custom-primary-text);
}
.card:hover.transition-shadow {
  box-shadow: var(--custom-shadow-sm-hover);
}
.card:hover.transition-position {
  top: -1rem;
}
.card:hover.transition-shadow.transition-position {
  box-shadow: var(--custom-shadow-sm-hover);
  top: -0.5rem; /* -1rem */
  z-index: 5;
}
/*
.card .card-img-top {
  overflow: hidden;
}
.card img {
  transform: scale(1);
  transform-origin: center;
  transition: transform .4s ease-out;
}
.card:hover img {
  transform: scale(1.02);
}
*/



 /* ACCORDION */
.accordion {
  --bs-accordion-btn-icon-width: 1.75rem;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f23b3b' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f23b3b' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.accordion-item {
   background-color: transparent;
}
.accordion-button {
  font-size: var(--bs-body-font-size);
  color: var(--bs-body-color);
  background-color: transparent;
}
.accordion-button:not(.collapsed) {
  background-color: var(--custom-light-color);
  color: var(--bs-body-color);
}
.accordion-button:focus {
  box-shadow: none;
}
.accordion-body {
  background-color: var(--custom-light-color);
}



/* CALLOUT */
.callout {
  /*
  border-left: 5px solid var(--custom-medium);
  */
  position: relative;
  padding-left: 1.75rem;
}
.callout::before {
  content: ' ';
  position: absolute;
  top: 0.4rem;
  left: 0rem;
  height: calc(100% - 0.7rem);
  width: 0.3rem;
  background-color: var(--custom-medium);
}



/* TIMELINE */
.accordion {
  overflow: hidden;
}
.timeline-circle {
  position: relative;
}
.timeline-circle::before {
  content: " ";
  position: absolute;
  top: calc(1rem - 1px);
  left: -1px;
  width: 2px;
  height: 1500px;
  background-color: var(--custom-red);
  display: block;
  z-index: 2;
}
/* Letztes Accordion-Item ohne Linie (Workaround) */
div.accordion-item:not(:first-child):last-child .timeline-circle::before {
  background-color: #fff;
  z-index: 4;
}
main section:nth-of-type(2n) div.accordion-item:not(:first-child):last-child .timeline-circle::before {
  background-color: var(--bs-light);
  z-index: 4;
}
.timeline-circle::after {
  content: " ";
  position: absolute;
  top: 0.25rem;
  left: calc(-0.6rem - 1px);
  width: 1.4rem;
  height: 1.4rem;
  background-color: var(--custom-red);
  display: block;
  border-radius: 50%;
  opacity: 1;
  z-index: 5;
  border: 3px solid #fff;
}




/* DEKO */
.deko-linie {
  position: relative;
}
.deko-linie::before {
  content: " ";
  position: absolute;
  top: -4.5rem;
  left: 50%;
  width: 3px;
  height: 3rem;
  background-color: red;
  display: block;
}
@media (min-width: 1400px) {
  .deko-linie::before {
    top: -9rem;
    height: 6rem;
  }
}





/* PROJEKTE */
/*
.projekte div.col:nth-child(3n-1) .card {
  margin-top: 6rem;
}
.projekte div.col:nth-child(3n) .card {
  margin-top: -9rem;
}
*/
/*
.projekte {
  background-image: url("/site/templates/styles/assets/kiwihug-zGZYQQVmXw0-unsplash.jpg");
}
*/
@media (min-width: 1400px) {
  .versatz .row  {
    margin-bottom: 8rem;
  }
  .versatz div.col:nth-child(3n-1) .card {
    transform: translateY(8rem);
  }
  .versatz div.col:nth-child(3n) .card {
    transform: translateY(-8rem);
  }
}
@media (min-width: 1700px) {
}
@media (min-width: 1840px) {
}



/* ARBEITSZEUGNISSE */
@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1020px; /* 1320px */
  }
}
@media (min-width: 1700px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1320px; /* 1320px */
  }
}