/**
 * Content Types (nodes)
 *  - in Drupal a content type is a bunch of fields we use to enter and display
 *    content, such as pages, blog posts, forum posts and so on. Each of those
 *    is usually a content type you create in the Drupal admin.
 *  - an instance of a content type (e.g. a single blog post) is called a node,
 *    the root template is node.html.twig and the base selector is .node {}
 ============================================================================ */
.node {
  margin-bottom: 1.25em;
  padding: 1.25em;
  border-radius: 2px;
}

.node p:last-child {
  margin-bottom: 0;
}

.node__status {
  float: right;
}

.node--view-mode-full__title {
  margin: 0 0 1rem;
}

.node--view-mode-teaser ul:last-of-type {
  margin-bottom: 0;
}

.node__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 1rem 0;
}

.node__meta .field-type-image {
  margin: 0 0.75rem 0 0;
}

.node__meta .field-type-image__figure {
  margin: 0;
  padding: 0;
}

.node__meta .field-type-image img {
  width: auto;
  height: 3rem;
}

.node__meta article:empty {
  display: none;
}

.node .node__author:after {
  content: "-";
  display: inline-block;
}

.node__meta--has-author-picture .node__submitted {
  margin-top: 0.25rem;
}

.node__meta--has-author-picture .node__author:after {
  display: none;
}

.node__meta--has-author-picture .node__author,
.node__meta--has-author-picture .node__pubdate {
  margin: 0;
  display: block;
}

@media screen and (max-width: 60em) {
  .node .node__author:after {
    display: none;
  }
  .node .node__author,
  .node .node__pubdate {
    margin: 0;
    display: block;
  }
}

.node__links {
  clear: both;
}

.node--sticky {
  padding: 0;
}
/*# sourceMappingURL=node.css.map */






/*Amtsstrukturübersicht*/

.amtsverwaltung * {
  text-align: center;
}

.wrapper-fachaemter {
  margin: 12px;
}

.flex-container-fachaemter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 6px;

  background-color: transparent;
  /*background-color: DodgerBlue;*/
}

.wrapper-fachaemter > .flex-container-fachaemter {
   justify-content: center;
}


.flex-container-fachaemter > div {
  /*background-color: #f1f1f1;*/
  margin: 6px;
  /*padding: 10px;*/
  text-align: center;
  
}

.wrapper-fachaemter > .flex-container-fachaemter > div {
  max-width: 11em;
}

.amtsverwaltung h6 {
  font-family: 'Markazi Text', serif;
  font-size: 1.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  line-height: 22px;
  /*background-color: #adc941;
  color: #11474d; 
  color: #1f6677;*/
  border-bottom: 1px solid;
  padding-top:11px;
  padding-bottom: 11px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.amtsverwaltung ul {
  margin: 10px;
  padding: 0;
}

.amtsverwaltung li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.amtsverwaltung {
background-color: rgba(17, 72, 78, .1);
}

/*.amtsverwaltung,*/
.amtsdirektorin,
/*.wrapper-fachaemter,*/
.amtsleiter {
  background-color: rgba(15,102,114,0.7);
}

.lighter, .fachamt, .ext-amt {
  background-color: rgba(254, 254, 248, 0.8);
}

.lighter, .fachamt {
  box-shadow: 6px 6px 5px rgba(17, 72, 78, 1);

}

.ext-amt {
  /*box-shadow: 4px -4px 8px inset rgba(17, 72, 78, 1);*/
  border: 2px dashed black;
}

.ext-amt:first-of-type {
  margin-bottom: 12px;
}

.amtsdirektorin, .amtsleiter {
  color: rgba(254, 254, 248, 0.9);
}

#amt-contact-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

#amt-contact-wrapper .amt-contact-element {
 /* box-shadow: 2px 2px 2px black;*/
 /*background-color: rgba(255, 255, 255, 1)*/
}

#amt-contact-wrapper .amt-contact-element h4 {
  width: 100%;
  border-bottom: 1px solid;
  padding-left: 6px;
}

#amt-contact-wrapper .amt-contact-element .house-wrapper {
  display: flex;
  flex-wrap: nowrap;
}

#amt-contact-wrapper .amt-contact-element .house-contact {
  background-color: rgba(17, 72, 78, .2);
  padding: 6px;
  width: 190px;
} 

#amt-contact-wrapper .amt-contact-element .house-openings {
  padding: 6px;
} 

#amt-contact-wrapper * {
  margin: 0;
}

#amt-contact-wrapper .offseason {

  display:none;
}

#amt-contact-wrapper > p {
  flex-basis: 100%;
}

#amt-contact-wrapper > p:first-of-type {
  text-align: center;
}



/*Card-Design für Organisationen*/

 /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  padding: 24px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

@media screen and (min-width: 81.5em) {
  .card {
    
    width: 23vw;
    height: 23vw;
  }
}


/* This container is needed to position the front and back side */
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  border: 3px solid rgba(254, 254, 248, .9);
  box-shadow: 0px 5px 8px rgba(41,53,54,.6);
}

/* Position the front and back side */
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  background-repeat: no-repeat;
  background-position: center;

}

/* Style the front side (fallback if image is missing) */
.card-front {
  
  color: black;
}

.card h6.label {
  display: inline-block;
  background-color: rgba(41, 53, 54, .6);
  color: rgba(254, 254, 248, 1);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0;

}

/* Style the back side */
.card-back {
  background-color: rgba(255, 255, 253, 1);
  color: white;
} 


.flippable .card-inner {
  transition: transform .9s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flippable:hover .card-inner {
  transform: rotateY(180deg);
  text-shadow: none;
}

.flippable .card-back {
  transform: rotateY(180deg);  
}