*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Reset margins */
body,
p,
figure,
picture {
  margin: 0;
}

/* this is necessary since bootstrap is creating extra margins */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html, body {
  height: 100%; 
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on Safari */ 
}

/* don't delete this for now - fix for ancient problem on main and section css */

section.section_main_remove_1 { 
	flex: auto;
	height: 100%;
	overflow: auto;
  margin: 0;
}

main.section_main_remove_2 { height: 100%; }

/* different opacitys */
.opacity1 { opacity: 1; }
.opacity09 { opacity: 0.9; }
.opacity08 { opacity: 0.8; }
.opacity07 { opacity: 0.7; }
.opacity06 { opacity: 0.6; }
.opacity05 { opacity: 0.5; }
.opacity04 { opacity: 0.4; }
.opacity03 { opacity: 0.3; }
.opacity02 { opacity: 0.2; }
.opacity01 { opacity: 0.1; }
.opacity0 { opacity: 0; }

/* look at container #container */
dl { margin: 0; }

.hover:hover { color: var(--cic) !important; }

.active { color: var(--cic); }

.a-box a:active { color: var(--cic) !important; }

/* contact form pop up fix */
form {
  float: initial !important;
  width: initial !important;
  font-family: initial !important;
  font-weight: initial !important;
}

input[type="text"] { height: initial !important; }

/* style the scrollbar */

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-thumb {
  background: #ababab;
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box; /* make the border work */
}

::-webkit-scrollbar-thumb:hover{ border: 0; }

::-webkit-scrollbar-track { background: transparent; }

/*
  Because of the side toolbar machine css is imported to the front end code. This is not something we wish to do
  and because of that we use this block of code to eliminate unnecessary side effects caused by machine
  if we come up with a better solution let's delete this section..
*/

p {
  font-size: initial !important;
  color: inherit !important;
  font-weight: initial !important;
  margin-bottom: initial !important;
  line-height: initial !important;
}

/* fixes the margins on block text  */
.wrapper {
  padding-left: 0;
  padding-right: 0;
  display: initial !important;
  width: 100% !important;
  margin: initial !important;
  max-width: initial !important;
}

/* this is necessary to push the indicator below the pop up contact formula */
.carousel-indicators { z-index: 3; }

.flex-center {
  display: flex;
  align-items: right;
  flex: auto;
}

/* IMAGES
============================================= */

div.container a.navbar-brand > img {
  display: inline;
  margin-right: 4px;
  margin-top: -2px;
}

.coop-image {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* BUTTONS
============================================= */

.button-layout > a {
  font-size: 16px !important;
  color: inherit !important;
}

.button-layout > div > a {
  font-size: 16px !important;
  color: inherit !important;
}

.button-layout > div > div > a {
  font-size: 16px !important;
  color: inherit !important;
}
.button-layout:hover {
  color: var(--cic) !important;
}

button {
  line-height: initial !important;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  overflow: visible;
  padding: 0;
  -webkit-appearance: button;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

button:hover { color: var(--cic); }

button[aria-expanded="true"] i.fa-caret-down { display: block; }

button[aria-expanded="false"] i.fa-caret-down { display: none; }

button[aria-expanded="true"] i.fa-caret-right { display: none; }

.button-layout {
  background-color: rgb(25, 25, 25);
  width: 100%;
  max-width: 450px !important;
  border: none;
  color: var(--white);
  margin: 0;
  padding: 5px 0;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-top: 1px solid var(--cic);
  border-bottom: 1px solid var(--cic);
  -webkit-user-select: text; /* fixes the text select problem on safari */
}

.button:hover { color: var(--cic) !important; }

@media screen and (max-width: 864px) {
  .button-layout {
    width: 100%;
    max-width: 450px !important;
  }
}

/* FORMS
============================================= */

.hide { display: none; }

aside { border-color: #000000; }

.proj-bar { border-color: var(--cic); }

/* global css for tables ============================== */

/* colors white mode and dark mode - stays on master because they don't change - don't delete */
.coop-table-row:nth-of-type(even)>.coop-table-col {
	background-color: #393536;
	color: #fefefe;
}

/* this creates the vertical lines  */
.coop-table-row:nth-of-type(even)>.coop-table-col {
	border-right: 1px solid #999;
}

/* changes the spacing on left and right */
.coop-table-row>.coop-table-col {
	padding: 0 10px !important;
}

/* css for the labels 
====================================  */

:root {
  /* label colors */
  --label-neu: #343a40;
  --label-verkauft: rgb(139, 37, 0);
  --label-premium: #fd7e14;
}

/* coop-label */
.coop-label {
  position: absolute;
  z-index: 9;
  margin-top: 30px;
  width: 50%;
  font-size: 32px;
  line-height: 32px;
  padding: 0 5px;
  text-transform: uppercase;
}

.coop-label.keine { display: none; }

.coop-label.neu {
  color: #fff;
  background-color: var(--label-neu);
  text-align: center;
}

.coop-label.verkauft {
  color: #fff;
  background-color: var(--label-verkauft);
  text-align: center;
  font-size: 11px;
  line-height: 2.1;
}

.coop-label.premium {
  color: var(--white);
  background-color: var(--label-premium);
  text-align: center;
}

/* grid global wrapper 
====================================  */

@media (max-width: 6000px) {
  .grid-global-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(auto, 1440px) auto;
    grid-template-rows: auto;   
    gap: 0px 0px;
    grid-template-areas: ". grid-global-wrapper-inner .";
  }

  .grid-global-wrapper-inner { grid-area: grid-global-wrapper-inner; }
}

@media (max-width: 1600px) {
  .grid-global-wrapper {
    position: relative;
    grid-template-columns: 80px minmax(auto, 1440px) 80px;    
  }
}

@media (max-width: 1280px) {

  .grid-global-wrapper { grid-template-columns: 64px minmax(auto, 1152px) 64px; }
}

@media (max-width: 960px) {

  /* this fixes the issue with pop ups not showing correctly on iphones - the code coming from boostrap is breaking it */
  .modal-backdrop { position: relative !important; }

  .grid-global-wrapper { grid-template-columns: 48px minmax(auto, 864px) 48px; }
}

@media (max-width: 640px) {

  .grid-global-wrapper { grid-template-columns: 32px minmax(auto, 576px) 32px; }
}

@media (max-width: 480px) {

  .grid-global-wrapper { grid-template-columns: 19px minmax(auto, 442px) 19px; }
}

/* global container 
====================================  */

#container {  
  display: flex;
  flex-direction: column;
  height: 100vh; 
  width: 100%;  
  top: 0;
  left: 0; 
}

/* use this if you ever need the header to scrool with content - class in layout.phtml */
  /* .sticky-header {
    overflow: scroll;
  }

  .sticky-header > section.bgc {
    overflow: initial;
  } */
 
@media only screen and (min-width: 1600px) {
  .kom-img {
    background: url(../img/netzhinterfisch.png) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 350px !important;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    margin: 30px 0;
    overflow: auto;
  }

  .h-indent {
    float: left;
    padding: 7px 30px 2px 0;
    margin: 0;
    text-align: left;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }

  .region-chain {
    max-width: 100vw;
    padding: 0;
    column-count: 2;
    column-gap: 30px;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-align: justify;
  }

  .l2-autor { margin-bottom: 40px !important; }
}

@media only screen and (max-width: 1599px) {

  .region-chain #page1 { margin-bottom: 2rem; }

  .region-chain #page2 { margin-top: 2rem; }

  .region-chain #page3 { margin-top: 2rem; }

  .l2-autor { margin-bottom: 40px !important; }

  .kom-img {
    background: url(../img/netzhinterfisch.png) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 350px !important;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    margin: 30px 0;
    overflow: auto;
  }

  .h-indent {
    float: left;
    padding: 7px 30px 2px 0;
    margin: 0;
    text-align: left;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }

  .region-chain {
    max-width: 100vw;
    padding: 0;
    column-count: 2;
    column-gap: 20px;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-align: justify;
  }
}

@media screen and (max-width: 960px) {
  .region-chain {
    column-count: 1 !important;
    -moz-column-count: 1 !important;
    -webkit-column-count: 1 !important;
  }
}

@media screen and (max-width: 578px) {

  .wrapper { padding: 0; }
}

.image {
  position: relative;
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
}

.ipad { display: none; }

.n1 {
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
  width: 100%;
  height: 100%;
}

.aside { flex: 1 0 0; }

.flex-0 {
  flex: auto;
  padding: 20px 5px;
  height: auto;
}

.proj-content {
  -webkit-column-gap: 2em;
  column-gap: 2em;
  margin-top: 30px;
  margin-bottom: 40px;
  -webkit-column-count: 2;
  column-count: 2;
  text-align: justify;
}

.proj-map { padding: 0 0 3rem; }

/* coop slider */
.coop-slider-image {
  /* height: 450px; */
  /* height: 100vh; */
  width: 100%;
  background-size: cover;
  background-position: center;
}

.carousel-item { width: 100%; }

.dropdown-toggle::after { display: none; }

.l2-avatar {
  width: 70%;
  height: 120px;
  background-size: contain;
  background-repeat: no-repeat;
}

.l2-autor {
  border-top: 1px solid var(--line-color);
  opacity: 0.6;
  width: 70%;
  text-align: right !important;
}

.c1 { column-count: 1; }

.c2 { column-count: 2; }

.c3 { column-count: 3; }

.sp { padding: 30px; }

.w100 { width: 100px; }

.position-bottom { bottom: 0; }

.kom-img-2 {
  background: url(../img/netzhinterfisch.png) no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
  min-height: 450px;
  overflow: auto;
}

.mt30 { margin-top: 30px; }

.mt11 { margin-top: 11px; }

.mt15 { margin-top: 15px; }

#Datenschutz {
  overflow: scroll;
  padding-top: 100px;
  display: none;
  position: fixed;
  top: 0;
  padding-bottom: 30px;
  max-height: 90%;
}

.btn-success {
  background-color: #57a900;
  background-image: -moz-linear-gradient(top, #70d900, #57a900);
  background-image: -ms-linear-gradient(top, #70d900, #57a900);
  background-image: -webkit-gradient(
    linear,
    0 0,
    0 100%,
    from(#70d900),
    to(#57a900)
  );
  background-image: -webkit-linear-gradient(top, #70d900, #57a900);
  background-image: -o-linear-gradient(top, #70d900, #57a900);
  background-image: linear-gradient(top, #70d900, #57a900);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#70d900',
  endColorstr='#57a900', GradientType=0);
}

.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
  background-color: #57a900;
}

.coopNotificationWrapper {
  display: none;
  position: fixed;
  background: rgba(255, 255, 255, 0.8);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.open .dropdown-menu { display: block; }

.hidden { display: none; }

.mobile-show { display: none; }

.transBG { background-color: transparent; }

.schwarzBG { background-color: #000; }

.whiteBG { background-color: #fff; }

.orangeBG { background-color: #ff9614; }

.grey1BG { background-color: #14140f; }

.grey2BG {
  background-color: #28281e;
}
.red2BG {
  background-color: rgb(150, 0, 0);
}
.red3BG {
  background-color: rgb(100, 0, 0);
}
.red4BG {
  background-color: rgb(80, 0, 0);
}

.io-bt1 {
  border-top: 1px solid #e8c500;
}
.whiteTXT {
  color: #fff;
}
.redTXT,
.error {
  color: red;
}

.redBTB {
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

.schwarzBTB {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

.reboot {
  font-size: 1em !important;
  line-height: 1.5em !important;
  font-weight: 100 !important;
}
.reboot font {
  font-size: 1em !important;
  line-height: 1.5em !important;
  font-weight: 100 !important;
}

.suw-slogan {
  width: 100%;
  border-bottom: 1px solid var(--cic);
  float: right;
  height: 34px;
}

.suw-folder {
  position: fixed;
  border-top: 1px solid #fff;
  bottom: 0;
  padding-bottom: 10px;
  width: 100%;
  height: 110px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 100;
  overflow: hidden;
  background-color: #000;
}

.suw-folder-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 0 15px;
}

.suw-folder-sec {
  display: flex;
  width: 250px;
}

.div-folder-image {
  width: 100px;
  height: 68px;
  background: url("../img/profilb_ronny.png") no-repeat center;
  background-size: cover;
  float: left;
}

.div-folder-image-acitve {
  border: 1px solid var(--cic);
}

.suw-figure {
  max-width: 150px;
  padding: 0 0 0 10px;
  float: right;
  -ms-flex-item-align: end;
  align-self: flex-end;
  height: 62px;
  overflow: hidden;
}

.suw-fig-caption-1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 0 6px 10px;
  text-align: left;
  color: #908270;
  font-size: 16px;
}

.suw-fig-caption-2 {
  white-space: initial;
  padding: 0 0 0 10px;
  text-align: left;
  font-size: 12px;
}

.l4-right-inner h3 {
  color: #908270;
  font-size: 1em;
  font-weight: 700;
  text-decoration: none;
}

.l4-autor {
  text-align: right;
}

.l4-right-teaser {
  border-bottom: 1px solid var(--cic);
}

.navbar-nav {
  flex-direction: row;
}

.agbbtn {
  background-color: #000;
  border-top: 1px solid var(--cic);
  border-bottom: 1px solid var(--cic);
  font-size: 10px;
  color: #fff;
  position: relative;
  width: 100%;
}

.closebtn {
  position: fixed;
  cursor: pointer;
  top: 57px;
  right: 15px;
  border: 1px solid var(--cic);
  background-color: #000;
  text-decoration: none;
  font-weight: lighter;
  color: #fff;
  font-size: 12px;
  line-height: 12px;
  width: 100px;
  height: 16px;
  z-index: 9999;
  display: none;
}

.modalbtn {
  width: 100%;
  background-color: #000;
  border: 1px solid var(--cic);
  font-size: 10px;
  color: #fff;
}

.proj-bar,
.expYelBar {
  border: 1px solid var(--cic);
  width: 100%;
  text-align: center;
}
.proj-bar h2,
.expYelBar h1 {
  font-size: 1.5rem;
  margin-bottom: 0;
}

.l4-left-inner h2,
.l4-left-inner h1,
.l4-right-inner-content h1,
.l4-right-inner-content h2,
.l4-mid-inner h1,
.l4-mid-inner h2 {
  text-align: center;
}

.mainWrapperInner {
  font-weight: 300;
}

.magazine-wrapper .container-fluid:first-child,
.mainWrapperInner .container-fluid:first-child {
  padding: 0 6rem 0 6rem;
}

/* i've commented white-space: nowrap; because it was forcing the text inside the menus to go out of it */

.nav-item {
  /* white-space: nowrap; */
  font-size: 0.5rem;
  hyphens: none; 
}

.nav-link {
  font-size: 16px;
  color: rgb(150, 150, 150);
  padding: 0;
  display: unset;
}

.nav-link.active { color: var(--cic) !important; }

@media screen and (max-width: 1152px) {
  .aside {
    flex: 1 0 0;
  }

  .nav-item {
    padding: 0.3rem 0 !important;
    margin-top: 0;
  }

  .wrapper {
    width: 100%;
  }

  .c2 {
    column-count: 2;
  }

  .c3 {
    column-count: 2;
  }
}

@media all and (min-width: 864px) {
  .aside-0,
  .aside-2 {
    text-align: left;
    background: deepskyblue;
    justify-content: center;
    display: flex;
    flex-direction: column;
  }

  .aside-1 {
    padding: 0 30px;
    display: flex;
    flex-direction: column;
  }

  .aside-2 {
    background: #142329;
  }

  .bm {
    flex: 0 !important;
  }

  .middle {
    padding: 20px 5px;
  }

  h1 {
    margin: 0;
    vertical-align: center;
  }

  .aside {
    background-size: cover;
    background-position: center;
  }

  .t-70 {
    position: relative;
    top: 70px;
  }

  .b-70 {
    position: relative;
    bottom: 70px;
  }

  .middle h1 {
    font-size: 40px;
  }

  .aside .image:first-child {
    margin-right: 15px;
  }

  .aside .image:last-child {
    margin-left: 15px;
  }

  .h1-wrapper-bottom {
    bottom: 45px;
  }

  .h1-wrapper-top {
    top: 45px;
  }

  header .lined {
    height: 45px !important;
  }

  .image {
    background-position: center;
    background-size: cover;
  }

  .desktop {
    display: none;
  }

  .aside {
    border: none !important;
    display: flex;
    flex: 7;
  }

  .ipad {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-flow: column wrap;
  }

  .middle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
  }
}

@media screen and (max-width: 567px) {
  .proj-content {
    -webkit-column-gap: 2em;
    column-gap: 2em;
    margin-top: 30px;
    margin-bottom: 40px;
    -webkit-column-count: 1;
    column-count: 1;
    text-align: justify;
  }

  #proj-meta {
    margin: 0;
    margin-top: 30px;
  }

  .object-address {
    margin-bottom: 45px;
  }
}