/* we declare all variables first */
:root {
  --yellow: hsl(60, 100%, 50%);
  --logo-blue: hsl(194, 100%, 43%);
  --black: hsl(0,0%,20%);
  --white: hsl(0,0%,100%);
  --turquoise: hsl(171, 65%, 44%);
  --turquise-dark: hsl(172,100%,26%);
  --red: hsl(354,100%,39%);
  --blue: hsl(202,100%,38%);
  --orange: hsl(21, 84%, 55%);
  --grey: hsl(0,0%,36%);
  --light-grey: hsl(0,0%,98%);
  --border-grey: hsl(0,0%,93%);

  /* Sarah */
  --mullberry: hsl(319,65%,50%);
  --candlelight: hsl(49,100%,60%);
  --puertorico: hsl(171,65%,44%);
  --jaffa: hsl(25,100%,60%);

  /* colour scheme */
  --primary: var(--puertorico);
  --secondary:  var(--yellow);
  --link: var(--puertorico);
  --active: var(--mullberry);

  /* modular scale */
  --ratio: 1.25;
  --s-5: calc(var(--s-4) / var(--ratio)); /* .32768 */
  --s-4: calc(var(--s-3) / var(--ratio)); /* .4096rem */
  --s-3: calc(var(--s-2) / var(--ratio)); /* .512rem */
  --s-2: calc(var(--s-1) / var(--ratio)); /* .64rem */
  --s-1: calc(var(--s0) / var(--ratio)); /* .8rem */
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio)); /* 1.25rem */
  --s2: calc(var(--s1) * var(--ratio)); /* 1.5625rem */
  --s3: calc(var(--s2) * var(--ratio)); /* 1.953125rem */
  --s4: calc(var(--s3) * var(--ratio)); /* 2.44140625rem */
  --s5: calc(var(--s4) * var(--ratio)); /* 3.051757812rem */

  /* fonts */
  /*--sans-serif: Poppins, Helvetica, Arial, sans-serif;
  --serif: Vollkorn, Georgia, "TimesNewRoman", serif;*/
  --sans-serif: var(--nunito);
  --serif: Georgia, serif;
  --nunito: Nunito, sans-serif;
  --font-headers: var(--nunito);
  --font-body: var(--sans-serif);

  /* misc variables */
  --radius: 9px;

    /* Gin for anonymous */
  --gin-color-title: #222330;
  --gin-color-text: #222330;
  --gin-color-text-light: #545560;
  --gin-color-focus: rgba(0,125,250,.6);
  --gin-color-focus-border: rgba(0,0,0,.2);
  --gin-color-focus-neutral-rgb: rgba(0,0,0,.4);
  --gin-color-disabled: #8d8d8d;
  --gin-color-disabled-bg: #eaeaea;
  --gin-color-disabled-border: #c2c2c2;
  --gin-color-warning: #d8b234;
  --gin-color-warning-light: #efcf64;
  --gin-bg-warning: #605328;
  --gin-bg-warning-light: rgba(226,151,0,.08);
  --gin-color-danger: #cc3d3d;
  --gin-color-danger-lightest: #fdd9d9;
  --gin-color-danger-light: #f39b9d;
  --gin-bg-danger: #583333;
  --gin-bg-danger-light: rgba(222,117,96,.1);
  --gin-color-green: #058260;
  --gin-color-green-light: #32cea4;
  --gin-color-green-lightest: #adebdb;
  --gin-bg-green: #145242;
  --gin-bg-green-light: rgba(72,171,123,.1);
  --gin-color-info: #082538;
  --gin-color-info-light: #589ac5;
  --gin-bg-info: #122b3c;
  --gin-color-contextual: var(--gin-color-text);
  --gin-color-contextual-text: #eee;
  --gin-bg-input: #fff;
  --gin-bg-layer: #fff;
  --gin-bg-layer2: #edeff5;
  --gin-bg-layer3: #fff;
  --gin-bg-layer4: #e2e5ec;
  --gin-bg-secondary: var(--gin-bg-layer);
  --gin-bg-header: #eeeff3;
  --gin-pattern: var(--gin-border-color);
  --gin-pattern-fallback: var(--gin-bg-layer2);
  --gin-pattern-square: .5rem;
  --gin-font: Ginter,Inter,"Helvetica Neue",BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,sans-serif;
  --gin-font-size-xxs: .75rem;
  --gin-font-size-xs: small;
  --gin-font-size-s: .875rem;
  --gin-font-size: 1rem;
  --gin-font-size-m: var(--gin-font-size);
  --gin-font-size-l: 1.125rem;
  --gin-font-size-xl: 1.25rem;
  --gin-font-size-h3: 1.5rem;
  --gin-font-size-h2: 1.75rem;
  --gin-font-size-h1: 1.6rem;
  --gin-font-size-quote: 1.1em;
  --gin-font-weight-normal: 400;
  --gin-font-weight-semibold: 525;
  --gin-font-weight-bold: 575;
  --gin-font-weight-heavy: 625;
  --gin-spacing-xxs: .25rem;
  --gin-spacing-xs: .5rem;
  --gin-spacing-s: .75rem;
  --gin-spacing-m: 1rem;
  --gin-spacing-l: 1.5rem;
  --gin-spacing-xl: 2rem;
  --gin-spacing-xxl: 3rem;
  --gin-spacing-xxxl: 4rem;
  --gin-icon-color: #414247;
  --gin-icon-size-close: 20px;
  --gin-icon-size-toolbar-secondary: 17px;
  --gin-icon-size-toolbar: 17px;
  --gin-icon-size-sidebar-toggle: 21px;
  --gin-border-xxs: .125rem;
  --gin-border-xs: .25rem;
  --gin-border-s: .375rem;
  --gin-border-m: .5rem;
  --gin-border-l: .75rem;
  --gin-border-xl: 1rem;
  --gin-border-color: #d4d4d8;
  --gin-border-color-secondary: rgba(0,0,0,.08);
  --gin-border-color-layer: rgba(0,0,0,.08);
  --gin-border-color-layer2: #d4d4d8;
  --gin-border-color-table: rgba(0,0,0,.1);
  --gin-border-color-table-header: rgba(0,0,0,.2);
  --gin-border-color-form-element: #8e929c;
  --gin-easing: cubic-bezier(.19,1,.22,1);
  --gin-transition: .15s var(--gin-easing);
  --gin-transition-fast: .3s var(--gin-easing);
  --gin-shadow-l1: 0 1px 2px rgb(20 45 82 / 2%),0 3px 4px rgb(20 45 82 / 3%),0 5px 8px rgb(20 45 82 / 4%);
  --gin-shadow-l2: 0 1px 2px rgb(20 45 82 / 2%),0 3px 4px rgb(20 45 82 / 3%),0 5px 8px rgb(20 45 82 / 4%),0 20px 24px rgb(20 45 82 / 12%);
  --gin-height-sticky: 72px;
  --gin-toolbar-width-collapsed: 66px;
  --gin-toolbar-width: 256px;
  --gin-toolbar-bg-level2: #edeff5;
  --gin-toolbar-bg-level3: rgba(44,45,47,.05);
  --gin-sidebar-width: 320px;
  --gin-sidebar-offset: var(--gin-sidebar-width);
  --gin-switch: #26a769;
  --gin-shadow-button: #00000033;
  --gin-color-button-text: #fff;
}


/* modern css reset
   https://piccalil.li/blog/a-modern-css-reset/" */

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

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased; //smooth font in webkit
  -moz-osx-font-smoothing: grayscale; //smooth font in firefox
}

body.gin--horizontal-toolbar {
  min-height: calc(100vh - 54px);
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

p {
  margin-bottom: var(--s1);
}

ul {
  padding: 0 var(--s1);
}

img {
  max-width: 100%; /* never scale-up images */
  display: block; /* get rid of weird gap at bottom */
  height: auto; /* to keep aspect ratio */
  border-radius: var(--radius); /* to avoid pointy corners */
}

input,
button,
textarea,
select {
  font: inherit;
}
/* Let Form inputs never have more than 100% width */
.view-filters input {
  width: 100%;
}
/* make view filterws always span a complete row */
.view-filters {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* end css reset */

/* Fonts */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 125 950;
  font-stretch: 75% 125%;
  src: local(''),
       url('../fonts/Nunito-VariableFont_wght.woff2') format('woff2-variations'),
       url('../fonts/Nunito-VariableFont_wght.ttf') format('truetype-variations');
  font-display: swap;
}

/* General Stuff */
html, body, .dialog-off-canvas-main-canvas, .grid { /* make sure grid is fullscreen */
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--s0);
  line-height: var(--s2);
  background: var(--white);
  width: 100vw;
  min-height: 100%;
}

/* limit body line length sensibly */
.field--name-body {
  max-width: 75rem;
}

.block-views {
  margin-top: var(--s5);
}

/* make inline-labels display inline */
.field-label-inline {
  display: inline;
}

/* Utility classes */
.float-right {
  float: right;
}

/* Headlines */
h1, h2, h3, h4, h5 {
  font-family: var(--font-headers);
  line-height: 1.15;
  margin-bottom: var(--s1);
  clear: both;
}
h1 {
  font-size: var(--s3);
  margin-bottom: var(--s2);
  font-weight: 500;
}
h2 {
  font-size: var(--s2);
  font-weight: 600;
}
h3 {
  font-size: var(--s1);
  font-weight: 600;
}
h4 {
  font-size: var(--s0);
}

/* Links */
a {
  color: var(--link);
  font-weight: bold;
  text-decoration: none;
}
a:hover, a.is-active {
  color: var(--active);
  text-decoration: underline;
}

/* overriding weird W3C Paragraph setting */
.p-container a {
  display: inline-block;
}
.node-readmore {
  display: block !important;
  margin-top: var(--s0);
}

/* Kampagnenseiten Paragraph settings */
.viewsreference--view-title { /* same as h2 */
  font-size: var(--s2);
  font-weight: 600;
}

/* SVG Logo Startseite */
svg {
  /*max-height: 450px;*/
  width: 100%;
  max-width: 60rem;
}
@media screen and (max-width: 767px) {
  svg {
    max-height: 300px;
  }
}
#g50 {
  fill: var(--primary);
}
svg a {
  font-weight: normal;
}
svg a:hover {
  text-decoration: none;
}
svg a:hover text {
  fill: var(--active) !important;
  flex-grow: 3; 
}

/* Layout */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "Header"
    "Title"
    "Hero"
    "Content"
    "Menu"
    "Footer";
}

.page-node-614 .grid {
  grid-template-areas:
    "Header"
    "Title"
    "Content"
    "Menu"
    "Footer";
  grid-template-rows: minmax(min-content,max-content);
}

/* make all grid elements flex */
.grid > * {
  display: flex;
  flex-direction: column;
}

.content {
  grid-area: Content;
  padding: var(--s0);
  min-width: 0;
  min-height: 0;
}
.hero, .complementary_top {
  grid-area: Hero;
}

.left--sidebar {
  grid-area: Menu;
  align-items: normal;
}
footer, .site-footer {
  grid-area: Footer;
  align-items: normal;
  align-self: end;
}

#block-social-media-icons,
#block-socialmediafooter {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s5);
  padding-bottom: var(--s5);
}

/* hide menus on mobile */
.menu--main, .menu--footer {
  display: none;
}

/* Spendenpage */
.view-foerderer {
  font-size: var(--s0);
}
.foerderer {
  font-size: var(--s0);
  margin-bottom: calc(var(--s5)*1.2);
  line-height: 1.2;
}

.foerderer img {
  margin-top: var(--s0);
}

/* Erdfest Single Page */
.content-grid {
  display: grid;
  grid-gap: var(--s1);
  grid-template-areas:
    "body"
    "initraeger"
    "aside";
}

section.body {
  grid-area: body;
}

.page-node-1 section.body,
.page-node-6 section.body {
  grid-area: span 2 / span 2;
}

.field--name-field-initiativtraeger-in {
  grid-area: initraeger;
  display: flex;
  gap: var(--s1);
  flex-direction: column;
  padding: var(--s1);
  margin: var(--s1) 0;
  border: 7px dotted var(--mullberry);
}
.initraeger-visitenkarte{
  clear: both;
  display: grid;
  /*gap: var(--s1);*/
  padding: var(--s1);
  margin: var(--s1) 0;
  border: 7px dotted var(--mullberry);
  border-radius: 13px;
  grid-template-areas:
    "headline headline"
    "titel synergie"
    "ansprechpartner synergie"
    "address synergie"
    "website synergie"
    "email synergie"
    "telefon synergie"
    "links links";
}
.initraeger-visitenkarte h3 {
  grid-area: headline;
}
.initraeger-visitenkarte .field--name-field-website {
  grid-area: website;
}
.initraeger-visitenkarte .field--name-field-adresse {
  grid-area: address;
}
.initraeger-visitenkarte img {
  grid-area: synergie;
  justify-self: flex-end;
  align-self: end;
}
.initraeger-visitenkarte .field--name-field-links,
.initraeger-visitenkarte .field--name-field-impressionen,
.initraeger-visitenkarte .erdfeste {
  grid-area: links;
  margin-top: 1rem;
}
.erdfeste .fieldset-wrapper {
  display: flex;
  justify-content: space-between;
}
.initraeger-visitenkarte .field--name-field-e-mail {
  grid-area: email;
}
.initraeger-visitenkarte .field--name-field-telefon {
  grid-area: telefon;
}
.initraeger-visitenkarte .field--name-field-ansprechpartner-in,
.initraeger-visitenkarte  .field--name-node-title {
  grid-area: ansprechpartner;
}
.initraeger-visitenkarte  .field--name-node-title {
  grid-area: titel;
}

.field--name-field-impressionen .field__item__label {
  margin-top: var(--s1);
  font-weight: bold;
}

/* responsive Grid from mobile upwards  */
@media (min-width: 900px) {
  body {
    font-family: var(--sans-serif);
    font-size: var(--s1);
    line-height: var(--s3);
  }
  .grid {
    display: grid;
    height: 100vh;
    padding: 0 var(--s1);
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "Header Header"
      "Menu Hero"
      "Menu Content"
      "Footer Content";
    position: relative;
  }
  /* Erdfest Single Page */
  .content-grid {
    display: grid;
    grid-gap: var(--s1);
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "body aside"
      "initraeger initraeger";
  }
  .page-node-614 .grid {
    grid-template-areas:
      "Header Header"
      "Menu Content"
      "Footer Content";
  }
  .block-system-main-block,
  .views-element-container {
    max-width: 120rem;
  }
  .grid > .region-title {
    grid-area: Content;
  }
  .grid > .content {
    grid-area: Content;
    align-items: normal;
    overflow: auto;
  }
/*  .left--sidebar {
    padding-top: var(--s5);
  }*/
  #block-social-media-icons {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .grid > footer {
    justify-content: flex-end;
    grid-area: Footer;
  }
  .content {
    font-size: var(--s1);
    padding: var(--s5) calc(var(--s5) * 2);
    /*padding-right: calc(var(--s4) * 4);*/
    /*border-left: 1px solid #000;*/
    min-width: 0;
    min-height: 0;
  }
  .site-logo {
    width: 250px;
  }
  /* show normal menus and hide mobile trigger */
  .menu--main, .menu--footer {
    display: block;
  }
  .responsive-menu-toggle-wrapper {
    display: none;
  }
  #block-benutzermenu .menu li {
    font-size: var(--s1);
  }
}

/* override social styling */
  .region-title .cover-wrap {
    min-height: 0;
  }
  .region-title .cover {
    padding: 0;
  }
  .region-title .cover .page-title {
    text-shadow: none;
    text-align: left;
    margin: 0;
    padding: 0;
    width: 100%;
  }

/* Menus */
ul.menu {
  margin: 0;
  line-height: 1; /* just to make sure menu items are controlled */
}
.menu li {
  font-size: var(--s2);
  /*border-bottom:  1px solid #000;*/
  padding: 0;
}

.menu li a {
  color:  var(--black);
  text-decoration: none;
  display: block;
  padding: var(--s-1) var(--s2);
  font-weight: normal;
}
.menu li a:hover {
  color: var(--active);
}

/* dangerous!: trying to tweak submenu */
ul.menu .menu {
  margin-top: var(--s-1);
  padding-left: var(--s1);
}

/* dangerous! overwriting standard collapsed menu with submenu */
.menu-item--collapsed,
.menu-item--expanded {
  list-style-type: none;
  list-style-image: none;
}

.menu--main {
  padding-top: var(--s5);
}
.menu--footer {
  margin: var(--s1) 0;
}

.menu--footer li {
  font-size: var(--s1);
}

.menu--footer li a { 
  padding: calc(var(--s1)/2) var(--s2);
}

.menu li .menu li {
  font-size: var(--s1);
  border-bottom: 0;
}
.menu li .menu li a {
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s1);
}
.menu li .menu li a:first-of-type {
  padding-top: 0;
}

.node-readmore {
  display: block !important;
  margin-top: var(--s0);
}

/* Branding Header */
.header {
  grid-area: Header;
}

.region-branding,
.region--branding {
  /*  display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;*/
    display: grid;
    grid-template-areas:
      "user account"
      "logo menu"
      "slogan slogan";
  }

@media screen and (min-width: 768px) {
  .region-branding,
  .region--branding {
  /*  display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;*/
    display: grid;
    grid-template-areas:
      "logo slogan user"
      "logo slogan account";
  }
}
#block-slogan {
  font-size: var(--s0);
  padding: var(--s1);

  grid-area: slogan;
  /*margin-left: auto;
  border: 7px dotted var(--mullberry);
  border-top: 0;
  border-radius: 13px;*/
}

#block-erdling-sitebranding {
  grid-area: logo;
}

#block-socialerdfest-accountheaderblock {
  grid-area: account;
}

#block-benutzermenu {
  grid-area: user;
  margin-left: auto;
  align-self: center;
}
#block-benutzermenu .menu {
  display: flex;
}
#block-benutzermenu .menu li {
  font-size: var(--s0);
}
#block-benutzermenu .menu li a {
  color: var(--link);
  font-size: var(--s1);
}
#block-benutzermenu .menu li a:hover {
  color: var(--active);
}

#block-slogan p {
  margin: 0;
}
.slogan {
  line-height: var(--s1);
  margin: 0;
}

.site-logo {
  display: block;
  max-width: 80%;
  line-height: 1;
  padding: var(--s1);
  margin: 0;
}

.site-logo:hover {
  background: transparent;
}

.site-name, .node__meta {
  display: none;
}

/* Frontpage Hack */

/* general modal Header */
.ui-dialog .ui-dialog-title {
  font-size: unset;
  font-weight: unset;
  color: unset;
}
.ui-dialog .ui-dialog-titlebar {
  background: var(--turquoise) !important;
  color: var(--white);
  padding: var(--s0) !important;
  font-weight: bold !important;
  font-size: 1.424rem;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}
.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  top: 50%;
  opacity: .8;
  margin: 0 var(--gin-spacing-l);
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--white);
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick {
  width: 100%;
  height: 100%;
  top: 0;
  margin: 0;
  transform: none;
  background: #fff;
  -webkit-mask-image: url(/themes/contrib/gin/dist/media/sprite.svg#close-view);
  mask-image: url(/themes/contrib/gin/dist/media/sprite.svg#close-view);
  -webkit-mask-size: var(--gin-icon-size-close) var(--gin-icon-size-close);
  mask-size: var(--gin-icon-size-close) var(--gin-icon-size-close);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
}

.node--type-medienpartner-in .node__content {
  display: grid;
  grid-template-areas:
  "Body Body"
  "Link Link"
  "Pic Logo"
  "Name Logo";
}
.node--type-medienpartner-in .field--name-body {
  grid-area: Body;
  line-height: var(--s2);
}
.node--type-medienpartner-in .field--name-field-website {
  grid-area: Link;
  margin-bottom: var(--s1);
}
.node--type-medienpartner-in .field--name-field-mitarbeiterbild {
  grid-area: Pic;
}
.node--type-medienpartner-in .field--name-field-ansprechpartner-in {
  grid-area: Name;
}
.node--type-medienpartner-in .field--name-field-logo {
  grid-area: Logo;
  justify-self: center;
  align-self: center;
}

@media (max-width: 48em) {
  .node--type-medienpartner-in .node__content {
  grid-template-areas:
    "Logo"
    "Body"
    "Link"
    "Pic"
    "Name";
}
  .ui-dialog:not(.ui-dialog-off-canvas) {
    min-width: 250px !important;
    max-width: 98vw !important;
  }
}

.path-frontpage .field--name-field-svg-logo {
  display: flex;
  justify-content: center;
}

#block-views-block-wall-of-friends-block-1 {
  width: 100%;
}

#block-views-block-wall-of-friends-block-1 a:hover,
#svg8 a:hover {
  text-decoration: none;
  background: none;
}
.block-nativegrid.is-b-masonry {
  grid-auto-rows: 0;
}

/* slick slideshow customizations */
.slick-arrow::before {
  color:  var(--link);
}
.slick-arrow:hover::before {
  color:  var(--active) !important;

}
.slick-down {
  background: var(--active);
}
.slick-down::before, .slick-down::after {
  color: var(--black);
}

/* CKEditor Styles */

.intro {
  line-height: var(--s2);
  display: block;
}

q.french::before {
  content: "»";
}

q.french::after {
  content: "«";
}

/* Card Teaser */
.card-teaser, .cards ul,
.cards .view-content,
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.block-views-blockerdfeste-block-1 cards {
  gap: 0;
  justify-content: safe center;
}
.view-filters .form--inline {
  display: flex;
  align-items: center;
}
li.card {
  /*border: 1px solid var(--black);*/
  /*box-shadow: 1px 1px 4px var(--grey);
  border-radius: 3px;*/
  flex-direction: column;
  flex: 1 0 auto;
  max-width: 372px;
  /*width: min-content;
  padding: var(--s0);*/
  display: flex;
  flex-direction: column;
}
li.card:last-of-type { flex-grow: 0; }

@media screen and (min-width: 40em) {
  li.card {
    flex: 1 0 calc(50% - var(--s1));
  }
}
@media screen and (min-width: 60em) {
  li.card {
    flex: 1 0 calc(32% - var(--s1));
  }
}
@media screen and (min-width: 120em) {
  li.card {
    flex: 1 0 calc(25% - var(--s1));
  }
}

li.card h3 {
  margin: var(--s1) 0;
  font-size: var(--s2);
}
li.card img {
  /*clip-path: url('../img/clip-paths.svg#second');
  max-width: 100%;*/
  border: 5px solid transparent; /* to avoid jumping on hover */
}
li.card.even img {
  /*clip-path: url('../img/clip-paths.svg#first');
  transform: scale(1.1);*/
}
li.card img:hover {
  /*clip-path: url('../img/clip-paths.svg#first');*/
  /*clip-path: circle(50%);*/
  /*transform: scale(1.1);*/
  border: 5px solid var(--mullberry);
}
li.card.even img:hover {
  /*clip-path: url('../img/clip-paths.svg#second');*/
  /*transform: scale(0.9);*/
}

/* Hide Caption in Media display Erdfest-Impressionen view */
.view-erdfeste .field--name-field-media-caption {
  display: none;
}

/* Quickfix! Hide media contextual link in flex view  */
.card .contextual-links {
  display: none;
}
.card .open .contextual-links {
  display: block;
}

/*li.card .field--name-body p:first-child {
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
li.card .field--name-body p:not(:first-child),
li.card .field--name-body ul {
  display: none;
}*/
li.card .field--name-node-link {
  align-self: flex-end;
  margin-top: auto;
  padding-top: var(--s1); 
}

.page-node-type-erdfest .leaflet-container {
  margin-top: var(--s1);
}

/* Initiativraum Single Page */
.field--name-field-bilder {
  float: left;
  min-width: 0 !important;
  margin: .5rem 1rem 1rem 0;
}

.aside, 
.photoswipe-gallery {
  grid-area: aside;
  gap: var(--s5);
  display: flex;
  flex-direction: column;
  max-width: 372px;
}

.page-node-2 .aside {
  max-width: none;
  gap: 0;
}

.page-node-2 iframe {
  width: 100%;
  min-height: 475px;
}

/* CKEditor Styles */

.intro {
  line-height: var(--s2);
  display: block;
}

section.body {
  grid-area: body;
}

aside.aside {
  grid-area: aside;
}

.field--name-field-initiativtraeger-in {
  grid-area: initraeger;
  display: flex;
  flex-direction: column;
}

.field--name-field-ansprechpartner-in, .field--name-field-adresse, .field--name-field-e-mail, .field--name-field-telefon, .field--name-field-links {
 grid-area: initraeger;
}

.page-node-type-erdfest .leaflet-container {
  margin-top: var(--s1);
}

/* without community functions, don't pull aside up */
@media (min-width: 900px) {
  .socialerdfest--sky.path-user .sidebar-left .region--complementary, .socialerdfest--sky.path-group .sidebar-left .region--complementary {
    top: 0;
  }
}
/* Image / Video mit Caption */
.figure-captioned {
  display: grid;
  margin: 0;
  grid-template-areas: 
    "figure-img"
    "figure-caption";
}
.figure-captioned .field--name-field-ort-image {
  grid-area: figure-img;
  line-height: 1;
} 

.figure-captioned .field--name-field-kommentar {
  grid-area: figure-caption;
  font-size: var(--s0);
  margin: -.2rem 0 1.6rem;
  padding: var(--s-1);
  line-height: 1.2;
  color: var(--grey);
  font-style: italic;
}
.figure-captioned .field--name-field-kommentar p:first-of-type {
  margin-top: 0;
}

/* Initiativraum Single Page */
.field--name-field-bilder {
  float: left;
  min-width: 0 !important;
  margin: .5rem 1rem 1rem 0;
}

/* Wall of Friends */
#block-views-block-wall-of-friends-block-1--2 h2 {
 text-align: center;
 border-top: 1px solid #000;
 padding-top: var(--s2);
 padding-bottom: var(--s1);
}
.buttonbox {
  float: right;
  padding-right: 10%;
  width: 20%;
}
.left {
  float: left;
  width: 70%
}
.button {
  border: 1px solid #000;
  padding: var(--s1);
  margin-bottom: var(--s1);
  display: block;
  width: 100%;
}
.flow {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  padding-inline-start: 0;
}
.flow li {
  list-style: none;
  flex: 1 0 auto; /* 1 0 640px */
  width: 280px;
  min-height: 100px;
  margin-bottom: var(--s1);
  align-items: center;
  display: flex;
  justify-content: center;
}

@media screen and (min-width: 640px) {
  .flow li {
    flex: 0 0 calc(50% - 1em);
  }
}
@media screen and (min-width: 960px) {
  .flow li {
    flex: 0 0 calc(25% - 1em);
  }
}

/* Erdfest Formular */

.page-node- .form-type-vertical-tabs {
  padding: 0;
}

/* Kartenseite */
.gogocarto {
  padding: 0;
}
.gogocarto iframe {
  height: 100%;
  min-height: 60vh;
}
.path-erdfest-orte .content {
  padding: 0;
}
.path-erdfest-orte .block-system-main-block,
.path-erdfest-orte .views-element-container {
  max-width: none;
  height: 100%;
}
.path-erdfest-orte h1 {
  display:none;
}

.gogo-load-css .gogocarto-container #element-info-bar .collapsible-body .img-container, 
.gogo-load-css .gogocarto-container #element-info-bar .collapsible-body .img-overlay {
  height: 27%;
}

/* Kernteam View */
.block-views-blockkernteam-kernteam .cards {
  flex-wrap: wrap;
}
.block-views-blockkernteam-kernteam .card {
  flex: 1 0 20%;
  max-width: 310px;
  min-width: 220px;
  word-wrap: break-word;
}
.block-views-blockkernteam-kernteam img:hover {
  /*clip-path: url(/themes/custom/erdling/img/clip-path.svg#svgClip);*/
  transform: none;
}
.block-views-blockkernteam-kernteam .contextual-links {
  display: none;
}

/*---------------------------
  Social Icons
----------------------------*/

.social-icons {
  text-align: right;
  margin: .5rem 1rem .5rem 0;
  display: inline-block;
}

.social-icons ul {
  margin: 0;
}

.social-icons li {
  display: inline-block;
  margin-left: 1rem;
}

.social-icons li a {
  width: 30px;
  color: var(--black);
  padding: 5px 6px;
  display: block;
  overflow: hidden;
  line-height: 100%;
  text-align: center;
}

.social-icons li a:hover {
  color: var(--active);
}

/* Media Formats */

.field--name-field-linktext,
.field--type-fontawesome-icon,
.media--type-document {
  display: inline-block;
}
/* not ideal, as needs to be kept in sync with image styles,
 but necessary for caption width */
.media--view-mode-small {
  max-width: 220px;
}
.media--view-mode-medium {
  max-width: 372px;
}
.media--view-mode-big {
  max-width: 480px;
}

.field--name-field-media-image:not(:first-of-type) {
  margin-top: var(--s1);
}

/* Caption Style */

.field--name-field-media-caption,
.blazy__caption  {
  font-size: var(--s0);
  margin: -.5rem .5rem .5rem .5rem;
}

.field--name-field-media-caption p,
.blazy__caption p {
  line-height: 1.2;
  margin: var(--s-1) 0;
}

/* same margin-bottom without caption */
.media--blazy {
  margin-bottom: var(--s3);
}

/* Website Feedback */
.website-feedback-toggle-wrapper {
  z-index: 1;
  background: var(--white);
}
.button.button-website-feedback {
  font-size: var(--s0);
  font-weight: bold;
}

.website-feedback-form input {
  max-width: 100%;
}
.website-feedback-form input.button {
  max-width: 100%;
  margin-left: 0;
}

/* Responsive mobile mmenu */

.responsive-menu-toggle-icon span.label {
  color: var(--link);
}

.responsive-menu-toggle-icon::before,
.responsive-menu-toggle-icon::after,
.responsive-menu-toggle-icon span.icon {
  background: var(--link);
}

.responsive-menu-toggle-wrapper {
  grid-area: menu;
  align-self: center;
  margin-left: auto;
}

.responsive-menu-toggle-icon span.label {
  right: 40px;
  left: unset;
}

/* Open Social Styling */

/* Account Header Block User Menu */
.block-account-header-block .navbar-nav {
  justify-content: flex-end;
}
.navbar-nav li {
  margin: 0 !important;
}
.navbar-user > li > a, .navbar-user > li > button, .navbar-user .navbar-nav > li > a, .navbar-user .navbar-nav > li > button {
  padding: 13px 10px 8px;
  height: 50px;
}
.navbar-nav__icon {
  fill: var(--primary);
}
.navbar-nav__icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  pointer-events: none;
}
.navbar-nav > li > a, .navbar-nav > li > button {
  line-height: 24px;
}
[role="button"] {
  cursor: pointer;
}
.sr-only {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  word-wrap: normal;
  margin: -1px;
  padding: 0;
  clip: rect(0,0,0,0);
  border: 0;
}
.fa-sr-only, .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}
.navbar-user .dropdown-menu {
  right: 0;
  left: auto;
}
.dropdown-menu {
  border-radius: 3px;
}
.dropdown-menu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 185px;
  max-width: 500px;
  padding: 5px 0;
  margin: 2px 0 0;
    margin-top: 2px;
  list-style: none;
  font-size: 0.875rem;
  text-align: left;
  background-color: #fff;
  -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.16),0 6px 12px rgba(0,0,0,0.32);
  box-shadow: 0 0 6px rgba(0,0,0,0.16),0 6px 12px rgba(0,0,0,0.32);
  background-clip: padding-box;
}
.dropdown-menu li > a, .dropdown-menu li > span {
  padding: 8px 10px;
  display: block;
  clear: both;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #555555;
}


/* Bootstrap Accordion */

@media (min-width: 768px)
.paragraph > .paragraph__column {
  float: left;
  width: 100%;
}
.panel-default {
  border-color: #ddd;
}
.panel-default > .panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05);
  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
    border-bottom-color: transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}
.paragraph.paragraph--type--bp-accordion .panel-heading a {
  display: block;
  padding: 10px;
}
.collapse {
  display: none;
}
.collapse.in {display:block}
tr.collapse.in {display:table-row}
tbody.collapse.in {display:table-row-group}
.collapsing {position:relative;height:0;overflow:hidden;-webkit-transition-property:height, visibility;-o-transition-property:height, visibility;transition-property:height, visibility;-webkit-transition-duration:.35s;-o-transition-duration:.35s;transition-duration:.35s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}

/* erdling public form styling */

.form-item label {
  display: table;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: 0.889rem;
  font-weight: bold;
  line-height: 1.125rem;
  border-radius: var(--radius);
}

form .field--name-field-initiativtraeger-in {
  padding: 0;
  border: 0;
}

.form-element,
.form-text {
  max-width: 100%;
  min-height: 3rem;
  padding: calc(0.75rem - 1px) calc(1rem - 1px);
  color: #232429;
  border: 1px solid #919297;
  font-size: 1rem;
  line-height: 1.5rem;
  -webkit-appearance: none;
  appearance: none;
}

.form-element:hover {
  border-color: var(--black);
  box-shadow: inset 0 0 0 1px #232429;
}

.form-element:focus {
  border-color: var(-primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

form .button {
  width: auto;
  border: 0;
  background: var(--primary);
  color: var(--white);
  font-weight: bold;
}

button, input, optgroup, select, textarea, fieldset, .form-element {
  border-radius: var(--radius);
}

/* remove strange padding under CKE */
.path-node .filter-wrapper {
  padding: 0;
}

.path-node form {
  max-width: 900px;
}

.path-node .cke_bottom {
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.path-node .cke_inner {
  border-radius: var(--radius);
}

.path-node .cke {
  border-radius: var(--radius);
}

/* give some breathing space under Videos in CKEditor */
.field--name-field-media-video-file {
  margin-bottom: var(--s0);
}

.path-node .container-inline {
  display: flex;
}
.path-node .js-form-type-checkbox {
  display: flex;
}
.path-node .form-checkbox {
  margin-right: var(--s3);
}

/* Webform */
.webform-submission-form {
  max-width: 50rem;
}
.webform-actions {
  display: flex;
  justify-content: space-between;
}
fieldset {
  border: 1px solid #aaa;
  margin: 0 2px;
    margin-top: 0px;
    margin-bottom: 0px;
  padding: 0.35em 1.5rem 0.75em;
}
.progress-step.is-active .progress-marker::before {
  background-color: var(--puertorico);
}

.form-type-checkbox, .form-type-radio {
  display: flex;
  flex-wrap: wrap;
}

.form-item label {
  max-width: 90%
}

.form-type-checkbox .description,
.form-type-radio .description {
  width: 100%;
  flex: 1 0 auto;
}

input[type="checkbox"] ~ label, input[type="radio"] ~ label {
  width: auto;
  padding-left: 0.4em;
}