/* 
    Created on : 07.07.2022
    Author     : dbroistedt
*/

#placeholder_zusammensetzung *{
  margin: 0px;
  padding: 0px;
}
html #placeholder_zusammensetzung{
  font-family: sans-serif;
  font-size: 14px;
}
body #placeholder_zusammensetzung{
  padding: 0.5em;
}

#placeholder_zusammensetzung #container_zusammensetzung{
  background-color: #cccccc;
  padding: 1em;
}
#placeholder_zusammensetzung #search_zusammensetzung #filter_filterung, 
#placeholder_zusammensetzung #search_zusammensetzung #filter_sortierung, 
#placeholder_zusammensetzung #search_zusammensetzung #filter_zusammensetzungen{
  display: inline-block;
}
#placeholder_zusammensetzung #search_zusammensetzung label{
  display: inline-block;
  width: 60px;
}
#placeholder_zusammensetzung .button,
#placeholder_zusammensetzung select{
  background-color: #96b910;
  border: 2px solid #96b910;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  margin: 15px;
  display: inline-block;
  font-size: 1.05em;
}
#placeholder_zusammensetzung #search_zusammensetzung select{
  width: 200px;
}
#placeholder_zusammensetzung .button:hover{
  cursor: pointer;
}
#placeholder_zusammensetzung .button:hover,
#placeholder_zusammensetzung .button.active,
#placeholder_zusammensetzung select.active{
  background-color: #eee;
  color: #96b910;
}
#placeholder_zusammensetzung select.active{
  color: #78940c;
}
#placeholder_zusammensetzung #zusammensetzungen>div{
  padding-top: 3.5em;
}
#placeholder_zusammensetzung #zusammensetzungen>div>h2{
  text-align: center;
  margin-bottom: 45px;
  font-size: 2.25em;
}
#placeholder_zusammensetzung #rv_zusammensetzung>div:after,
#placeholder_zusammensetzung #vs_zusammensetzung>div:after,
#placeholder_zusammensetzung #pa_zusammensetzung>div:after{  
  content: '';  
  display: block;
  position: relative;
  height: 1px;
  width: 100%;
  clear: both;
  float: none;
}
#placeholder_zusammensetzung #zusammensetzungen .Vorsitz , 
#placeholder_zusammensetzung #zusammensetzungen .Regionalrat ,
#placeholder_zusammensetzung #zusammensetzungen .beratend {
  margin-bottom: 1.8em;
}
#placeholder_zusammensetzung #zusammensetzungen .Vorsitz .card:last-of-type('visible'){
  background-color: red !important;
}
#placeholder_zusammensetzung .card{
  display: block;
  position: relative;
  height: 125px;
  width: 400px;
  margin: 1em;
  
  background-color: #fefefe;
  /*! border: 1px solid #bbb; */  
  float: left;
}
#placeholder_zusammensetzung .card .picture{
  display: inline-block;
  float: left;
  width: 125px;
  height: 125px;
  margin-right: 1em;
  
  background-color: #c4c4c4;
  /*
  für TYPO3
  
    background-image: url('/fileadmin/dateien/bilder/gremien/personen/Dummy_Person.svg');
  */
  /*
  lokale oder separate Aufrufe
  
    background-image: url('../images/Dummy_Person.svg');
  */
  background-image: url('../images/Dummy_Person.svg');
  
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
}
#placeholder_zusammensetzung .card .contact{
  padding-top: 0.8em;
  padding-bottom: 0.5em;
}
#placeholder_zusammensetzung .card .funktion{  
  font-weight: bold;
}
.card .headline{
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.8em;
}
#placeholder_zusammensetzung .card .landkreis{  
}
#placeholder_zusammensetzung .card .institution{  
}
#placeholder_zusammensetzung .card .vertreter{  
  padding-top: 0.5em;
}
#placeholder_zusammensetzung .card .vertreter_label{  
}
#placeholder_zusammensetzung .card .vertreteranzeigename{  
}
#placeholder_zusammensetzung .card .typ1{
  display: none;
}

/**************
  Zusammensetzungen List 
***************/
#placeholder_zusammensetzung #zusammensetzungen.list_ausgabe .card{
  display: block;
  float: none;
  clear: both;
  width: 98%;
  height: auto;
  padding: 0.5em;
  margin: 0;
}
#placeholder_zusammensetzung #zusammensetzungen.list_ausgabe .card:nth-child(even){
  background-color: #ddd;
  border: initial;
}
#placeholder_zusammensetzung #zusammensetzungen.list_ausgabe .card:nth-child(odd){
  background-color: #fefefe;
}
#placeholder_zusammensetzung #zusammensetzungen.list_ausgabe .card .picture{
  display: none;
}
#placeholder_zusammensetzung #zusammensetzungen.list_ausgabe .card .contact>div{
  display: inline-block;
}
#placeholder_zusammensetzung #zusammensetzungen.list_ausgabe .card .contact .headline{
  min-width: 250px;
}
#placeholder_zusammensetzung #zusammensetzungen.list_ausgabe .card .contact .funktion{
  min-width: 175px;
}
#placeholder_zusammensetzung #zusammensetzungen.list_ausgabe .card .contact .institution_wrapper{
  min-width: 350px;
}
#placeholder_zusammensetzung #zusammensetzungen.list_ausgabe .card .contact .vertreter{
  
}
#placeholder_zusammensetzung #zusammensetzungen.list_ausgabe .card .contact .landkreis{
  
}

#placeholder_zusammensetzung #zusammensetzungen.list_ausgabe .card.even{
  background-color: #ddd !important;
  border: initial;  
}
#placeholder_zusammensetzung #zusammensetzungen.list_ausgabe .card.odd{
  background-color: #fefefe !important;
}

#placeholder_zusammensetzung .active{
    background-color: #96b910;
}


/************
    Toggle Input
*************/

#placeholder_zusammensetzung .toggle {
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 62px;
  height: 32px;
  display: inline-block;
  position: relative;
  border-radius: 50px;
  overflow: hidden;
  outline: none;
  border: none;
  cursor: pointer;
  background-color: #707070;
  transition: background-color ease 0.3s;
  margin-left: 2.5em;
}
#placeholder_zusammensetzung .toggle:before {
  content: "on off";
  display: block;
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 28px;
  background: #fff;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  font: 10px/28px Helvetica;
  text-transform: uppercase;
  font-weight: bold;
  text-indent: -22px;
  word-spacing: 37px;
  color: #fff;
  text-shadow: -1px -1px rgba(0,0,0,0.15);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}
#placeholder_zusammensetzung .toggle:checked {
  background-color: #96b910;
}
#placeholder_zusammensetzung .toggle:checked:before {
  left: 32px;
}


/**********************************************************************
***    Animation beim Laden von Daten
**********************************************************************/
#placeholder_zusammensetzung #ladebalken{
    v-width: 100%;
    v-height: 100%;
    background-color: rgba(55,55,55,0.8);                   
}

/* von Brandon Mathis
    https://codepen.io/imathis/pen/ZYEWrw
    <div class='tetrominos'>
        <div class='tetromino box1'></div>
        <div class='tetromino box2'></div>
        <div class='tetromino box3'></div>
        <div class='tetromino box4'></div>
    </div>
*/
#placeholder_zusammensetzung .tetrominos {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-112px, -96px);
    z-index: 9999;
  }

#placeholder_zusammensetzung .tetromino {
    width: 96px;
    height: 112px;
    position: absolute;
    transition: all ease 0.3s;
    background: url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 684"%3E%3Cpath fill="%23010101" d="M305.7 0L0 170.9v342.3L305.7 684 612 513.2V170.9L305.7 0z"/%3E%3Cpath fill="%23fff" d="M305.7 80.1l-233.6 131 233.6 131 234.2-131-234.2-131"/%3E%3C/svg%3E') no-repeat top center;
}

#placeholder_zusammensetzung .box1 {
  -webkit-animation: tetromino1 1.5s ease-out infinite;
          animation: tetromino1 1.5s ease-out infinite;
}

#placeholder_zusammensetzung .box2 {
  -webkit-animation: tetromino2 1.5s ease-out infinite;
          animation: tetromino2 1.5s ease-out infinite;
}

#placeholder_zusammensetzung .box3 {
  -webkit-animation: tetromino3 1.5s ease-out infinite;
          animation: tetromino3 1.5s ease-out infinite;
  z-index: 2;
}

#placeholder_zusammensetzung .box4 {
  -webkit-animation: tetromino4 1.5s ease-out infinite;
          animation: tetromino4 1.5s ease-out infinite;
}

@-webkit-keyframes tetromino1 {
  0%, 40% {
    /* compose logo */
    /* 1 on 3 */
    /* L-shape */
    transform: translate(0, 0);
  }
  50% {
    /* pre-box */
    transform: translate(48px, -27px);
  }
  60%, 100% {
    /* box */
    /* compose logo */
    transform: translate(96px, 0);
  }
}

@keyframes tetromino1 {
  0%, 40% {
    /* compose logo */
    /* 1 on 3 */
    /* L-shape */
    transform: translate(0, 0);
  }
  50% {
    /* pre-box */
    transform: translate(48px, -27px);
  }
  60%, 100% {
    /* box */
    /* compose logo */
    transform: translate(96px, 0);
  }
}
@-webkit-keyframes tetromino2 {
  0%, 20% {
    /* compose logo */
    /* 1 on 3 */
    transform: translate(96px, 0px);
  }
  40%, 100% {
    /* L-shape */
    /* box */
    /* compose logo */
    transform: translate(144px, 27px);
  }
}
@keyframes tetromino2 {
  0%, 20% {
    /* compose logo */
    /* 1 on 3 */
    transform: translate(96px, 0px);
  }
  40%, 100% {
    /* L-shape */
    /* box */
    /* compose logo */
    transform: translate(144px, 27px);
  }
}
@-webkit-keyframes tetromino3 {
  0% {
    /* compose logo */
    transform: translate(144px, 27px);
  }
  20%, 60% {
    /* 1 on 3 */
    /* L-shape */
    /* box */
    transform: translate(96px, 54px);
  }
  90%, 100% {
    /* compose logo */
    transform: translate(48px, 27px);
  }
}
@keyframes tetromino3 {
  0% {
    /* compose logo */
    transform: translate(144px, 27px);
  }
  20%, 60% {
    /* 1 on 3 */
    /* L-shape */
    /* box */
    transform: translate(96px, 54px);
  }
  90%, 100% {
    /* compose logo */
    transform: translate(48px, 27px);
  }
}
@-webkit-keyframes tetromino4 {
  0%, 60% {
    /* compose logo */
    /* 1 on 3 */
    /* L-shape */
    /* box */
    transform: translate(48px, 27px);
  }
  90%, 100% {
    /* compose logo */
    transform: translate(0, 0);
  }
}
@keyframes tetromino4 {
  0%, 60% {
    /* compose logo */
    /* 1 on 3 */
    /* L-shape */
    /* box */
    transform: translate(48px, 27px);
  }
  90%, 100% {
    /* compose logo */
    transform: translate(0, 0);
  }
}

/**********
  responsive breakpoints
***********/
@media all and (max-width: 900px){
  #placeholder_zusammensetzung .card .contact>div{
    display: block !important;
    min-width: initial !important;
  }
}
@media all and (min-width: 1px) and (max-width: 480px) {
  #placeholder_zusammensetzung #zusammensetzungen > div > h2 {
    font-size: 1.7em;
  }
  #placeholder_zusammensetzung .card{
    width: 340px;
    height: 115px;
    margin-left: 0px;
    margin-right: 0px;
    font-size: 0.9em;
  }
  #placeholder_zusammensetzung .card .picture{
    width: 115px;
    height: 115px;
  }
  #placeholder_zusammensetzung #zusammensetzungen.list_ausgabe .card .contact .institution_wrapper {
    min-width: 0px;
  }
}