/* !---- A base ________ */

/* !---- A1 font-face ---- */

/* barlow-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/barlow-v12-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/barlow-v12-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;g
  font-weight: 300;
  src: url('../fonts/barlow-v12-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/barlow-v12-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/barlow-v12-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/barlow-v12-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/barlow-v12-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/barlow-v12-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/barlow-v12-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/barlow-v12-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* !---- A2 variables ---- */

/* !spacing */
:root {
  --padding: 1.5rem;
}

/* !colors */
:root {
  --color-black: #353535;
  --color-white: #F1F4F9; /* #f2f0ed; /* #F1F5F9; */
  --color-grey: #c1c1c1;
  --color-blue: #186083; /* #336E9E; */
  --color-yellow: #e2871d;
  --color-red: #e14b4b; /* #B86161; /* #E6A335; /* #f69c09; /* #B86161; */
  --color-orange: #E6A335;
  --color-bright-red: #dc121e;
  --color-light: #efefef;
  --color-green: #A7CD28;
  --color-dark-green: #86a82d;
  --color-orange: #FAB759;
}

/* !places */
:root {
  --color-background: var(--color-white);
  --color-text: var(--color-black);
  --color-links: var(--color-dark-green);
  --color-tabs: #f2eee6;
}

/* !fonts */
:root {
  --font-family-sans: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-mono: "Overpass Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  --font-family-serif: Georgia, serif;
}

/* !---- A3 html & body ---- */

html {
  /* colors */
  color: var(--color-text);
  background: var(--color-background);

  /* fonts */
  font-family: var(--font-family-sans);
  font-size: 18px;

  /* scrolling */
  scroll-behavior: smooth;
  scroll-padding-top: 2.2rem;
}

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

* {
  box-sizing: border-box;
}


/* !---- A4 reset & helpers ---- */

.visually-hidden {
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
  clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
  clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
  white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

* {
  margin: 0;
  padding: 0;
}
hr {
  border: 0;
  background: currentColor;
  height: 2px;
  width: 1.5rem;
  margin-top: 1rem;
}
.align-center {
  text-align: center;
}
.margin-s {
  margin-bottom: .75rem;
}

.align-center {
  text-align: center;
}

.centering-wrapper,
.centering-wrapper a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border: none;
}

.intro {
  max-width: 40rem;
}
.intro *:not(:last-child) {
  margin-bottom: 1em;
}

.cta {
  background: var(--color-black);
  color: var(--color-white);
  display: inline-flex;
  justify-content: center;
  padding: .75rem 1.5rem;
  border: 4px solid var(--color-white);
  outline: 2px solid var(--color-black);
}

.box {
  background: var(--color-light);
  padding: 1.5rem;
  border: 4px solid var(--color-white);
  outline: 2px solid var(--color-light);
}

#scrolltotop {
    display: none;
}

.scrolltotop-visible #scrolltotop {
    display: block;
    color: var(--color-dark-purple);
    position: fixed;
    bottom: 1.8rem;
    right: 0.8rem;
}

.notopmargin {
  margin-top: 0 !important;
}

@media screen and (max-width: 1080px) {
  .hideonmobile {
    display: none !important;
  }
}

@media screen and (max-width: 959px) {
  .nobottompadding {
    padding-bottom: 0 !important;
  }
  .notoppadding {
    padding-top: 0 !important;
  }
}

/* !---- B typography ________ */

/* !---- B1 headings ---- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-sans) !important;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* !h1 */
h1 {
  color: var(--color-black);
  margin-bottom: 4rem;
  font-size: 2.8rem;
  line-height: 1.1;
}
.text h1,
.page-home .text h1,
.page-home .h1 p,
.h1,
.intro {
  display: flex;
  font-size: 3.4rem;
  font-weight: 500;
  margin-bottom: 4rem;
  line-height: 1.25;
  align-items: center;
}
.page-home #page .h1 p {
  line-height: 1.2;
  margin-bottom: 0;
}
#hero h1.claim {
  color: var(--color-links);
}
.subpage .h1 h1 {
  margin-top: 2.4rem;
  margin-bottom: 2rem;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.subpage.template-newsitem h1 {
  margin-top: 3.4rem;
  margin-bottom: 3rem;
  font-size: 2.4rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 1px;
}
.subpage.template-note .h1 h1 {
  margin-top: 2.4rem;
  margin-bottom: 2rem;
  font-size: 2.4rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 1px;
}
@media screen and (max-width: 1199px) {
  h1 {
    font-size: 2rem;
  }
}

@media screen and (max-width: 959px) {
  .text h1,
  .h1,
  .intro {
    font-size: 2.4rem;
    margin-bottom: 3rem;
  }
  .page-home .h1,
  .page-home .h1 p {
    font-size: 2.4rem;
    margin-bottom: 2rem;
  }
  .page-home #page .h1 p {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 480px) {
  .text h1,
  .page-home .text h1,
  .page-home .h1 p,
  .h1,
  .intro {
    font-size: 1.8rem;
    margin-bottom: 3rem;
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  .page-home #page .h1 p {
    margin-bottom: 0;
  }
  #hero h1.claim {
    margin-bottom: 1rem;
  }
}

@media (max-width: 440px) {
  h1.note-title {
    font-size: 1.4rem;
    line-height: 1.4;
  }
}

@media screen and (max-width: 380px) {
  .text h1,
  .page-home .text h1,
  .page-home .h1 p,
  .h1,
  .intro {
    font-size: 1.6rem;
    margin-bottom: 2rem;
  }
}

/* !h2 */
.text h2,
.h2,
h2 {
  font-weight: 600;
  margin-bottom: 1.25rem;
  color: var(--color-headlines);
  font-family: var(--font-family-sans);
  font-size: 1.8rem;
  line-height: 1.24;
}
.page-home h2,
.page-home .h2 {
  font-size: 1.6rem;
}
h2#introheading {
  font-size: 1.4rem;
  line-height: 1.4;
}
@media screen and (max-width: 959px) {
  h2#introheading {
    margin-top: 1rem;
  }
  .section .text h2 {
    margin-bottom: 2rem;
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}
@media screen and (max-width: 700px) {
  .text h2,
  .h2 {
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: var(--color-headlines);
    font-family: var(--font-family-sans);
    font-size: 1.6rem;
    line-height: 1.24;
  }
}

@media screen and (max-width: 480px) {
  h2.note-subheading {
    font-size: 1.1rem;
    line-height: 1.24;
  }
}


@media screen and (max-width: 400px) {
  .section .text h2 {
    margin-bottom: 1rem;
  }
}

/* !h3 */
.text h3,
.h3,
h3,
.text .block-type-heading h3 {
  font-size: 1rem;
  font-weight: bold;
  margin-top: .6rem;
  margin-bottom: .6rem;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.normalpage .text h3 {
  margin-top: 1.6rem;
  margin-bottom: 1.2rem;
  font-weight: 800;
}

/* !h4 */
h4 {
  font-weight: 800;
  margin-bottom: 1rem;
}

/* !---- B2 all things text ---- */

.text,
p {
  font-family: var(--font-family-sans);
  line-height: 1.5em;
}
.text p {
  margin-bottom: 1rem;
}
.text :first-child {
  margin-top: 0;
}
/* .text :last-child {
  margin-bottom: 0;
} */

.page-angstpatienten .text :last-child,
.page-kinderzahnarzt .text :last-child {
  margin-bottom: 1.4rem;
}

.text .codeblock {
  display: grid;
}
.text code {
  font-family: var(--font-family-mono);
  font-size: 1em;
  background: var(--color-light);
  padding: 0 .5rem;
  display: inline-block;
  color: var(--color-black);
}

.text pre {
  margin: 3rem 0;
  background: var(--color-black);
  color: var(--color-white);
  padding: 1.5rem;
  overflow-x: scroll;
  overflow-y: hidden;
  line-height: 1.5rem;
}
.text pre code {
  padding: 0;
  background: none;
  color: inherit;
}

.text hr {
  margin: 2rem 0;
  padding: 1.4rem 0;
  background: none;
}

.text dt {
  font-weight: 600;
}

.text blockquote {
  font-size: .94rem;
  line-height: 1.325em;
  border-left: 2px solid var(--color-links);
  padding-left: 1rem;
  margin: 3rem 0;
  max-width: 25rem;
}
.text blockquote footer {
  font-size: .875rem;
  font-style: italic;
}

strong,
b {
  font-weight: normal;
  color: var(--color-red);
}

small {
  font-size: inherit;
  color: var(--color-text-grey);
  font-weight: 400;
}

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

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


/* !---- B3 lists ---- */

.text ul,
.text ol {
  margin-bottom: 1rem;
  margin-left: 1rem;
}
.text ul ol,
.text ul ul,
.text ol ul,
.text ol ol {
  margin-bottom: 0;
}
.text figure ul {
  line-height: 0;
  display: grid;
  gap: 1.5rem;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); /* minmax(10rem, 1fr)); */
}

li {
  list-style: none;
}
.text ul>li {
  list-style: disc;
}
.text ol>li {
  list-style: decimal;
}
.text figure ul li {
  list-style: none;
}
.block-type-list li {
  margin-bottom: .4rem;
}
.block-type-list li strong {
  display: block;
  margin-bottom: 0 !important;
}

.text ul p,
.text ol p {
  margin-bottom: 0;
}

/* !---- B4 links ---- */

a {
  color: currentColor;
  text-decoration: none;
}
a.schoener-link {
  /* text-transform: uppercase;
  font-size: .9rem;
  letter-spacing: 1px; */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-links);
  text-underline-offset: 6px;
}
.text a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-links);
  text-underline-offset: 6px;
}
.text a:hover,
.text a:hover h2 {
  color: var(--color-links);
  transition: color .2s;
}
.text a.mehrlink {
  text-decoration-style: solid;
}
.gotolink {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  text-decoration-color: grey;
  text-decoration-thickness: 2px;
}

/* !reasonable word breaks */
.main .column.text a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* !link mit pfeil */
a.linkmitpfeil {
  position: relative;
  display: inline-block;
  text-decoration: none;
  border: none;
  margin-bottom: 1rem;
}
a.linkmitpfeil:after {
  background-image: url('../images/linkmitpfeil.svg');
  background-size: 2rem 1.4rem;
  background-repeat: no-repeat;
  display: inline-block;
  width: 2rem;
  height: 1.4rem;
  content: "";
  position: absolute;
  bottom: .4rem;
  right: -3rem;
  z-index: 70;
}

@media screen and (max-width: 420px) {
  a.linkmitpfeil:after {
    right: 0;
  }
}

/* !---- C components ________ */

/* !---- C1 buttons ---- */

button {
  font: inherit;
  background: none;
  border: 0;
  color: currentColor;
  cursor: pointer;
}

input:checked {
  /* Adds "selected" indicator to this element */
  border-bottom: 5px solid green;
}

/* !---- C2 images, video, maps & iframes ---- */

img {
  width: 100%;
  vertical-align: bottom;
}

.block-type-image img {
  border-radius: 4px;
}

.video,
.img {
  position: relative;
  display: block;
  --w: 1;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  background: var(--color-black);
  width: 60%;
  margin: 0 auto;
}

.img img,
.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.img[data-contain] img {
  object-fit: contain;
}

.img-caption,
.video-caption {
  padding-top: .25rem;
  padding-bottom: .75rem;
  color: var(--color-black);
  line-height: 1.5em;
  font-style: italic;
  font-size: .8rem;
}

.column img {
  max-height: 100%;
  border-radius: 7px;
}

.text figure a {
  border: none;
}
.text figure {
  margin: 1.4rem 0 1.4rem;
}
/* .page-home .text figure {
  margin: 0;
} */

.map {
  --w: 2;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  position: relative;
  overflow: hidden;
  background: var(--color-black);
}
.map iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#main .consent-gate {
  box-sizing: border-box;
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
}

@media screen and (max-width: 420px) {
  .consent-gate .consent-gate-vendor-name {
    font-size: 1.2rem;
  }
}

/* !---- C3 blog in general ---- */

.pagination {
  display: flex;
  padding-top: 6rem;
}

.pagination>span {
  color: var(--color-text-grey);
}

.pagination>* {
  padding: .5rem;
  width: 3rem;
  text-align: center;
  border: 2px solid currentColor;
  margin-right: 1.5rem;
}

.pagination>a:hover {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.note-excerpt {
  line-height: 1.5em;
  background-color: white;
  border-radius: 10px;
}

.note-excerpt-wrapper {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .8rem 1rem .8rem 1rem;
}

.note-excerpt header {
  margin-bottom: .4rem;
}

.note-excerpt figure {
  margin-bottom: .5rem;
}

.note-excerpt-title {
  font-weight: 600;
  line-height: 1.34;
  margin-top: 0;
  margin-bottom: .4rem;
}

.note-excerpt-text h3 {
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.template-beteiligte .note-excerpt-text h3,
.template-home .note-excerpt-text h3,
.template-zugaenge .note-excerpt-text h3  {
  hyphens: none;
}

@media screen and (min-width: 1201px) and (max-width: 1500px) {
  .template-zugaenge .note-excerpt-text h3  {
    font-size: .9rem;
    letter-spacing: 1px;
  }
}

.note-excerpt-date {
  color: var(--color-black);
}

.note-excerpt a:hover h3.note-excerpt-title {
  color: var(--color-red);
}

.note-excerpt-function {
  line-height: 1.2;
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.template-notes .note-veranstaltung-meta,
.template-zugaenge .note-veranstaltung-meta,
.template-home .note-veranstaltung-meta {
  padding: 0 1rem .8rem 3.8rem;
}

.template-zugaenge a.singlekachellink:hover .note-veranstaltung-meta {
  color: var(--color-black);
}

.template-note .note-veranstaltung-meta {
  margin-bottom: 1rem;
}

/* !tags in general */

.blog-section .teasertags ul {
  margin: 0;
  display: flex;
  gap: .4rem;
  margin-bottom: .8rem;
}

.teasertags ul li {
  list-style: none;
}

.blog-section .teasertags ul {
  margin: 0;
  display: flex;
  gap: .4rem;
  margin-bottom: .8rem;
}

.teasertags ul li {
  list-style: none;
}

.teasertags ul li a,
.tagliste ul li a {
  border: 1px solid #C7DFF2;
  font-size: .7rem;
  font-family: var(--font-family-mono);
  background-color: #D9E6F2;
  color: var(--color-black);
  padding: 5px 9px 4px;
  letter-spacing: 1px;
  border-radius: 18px;
  cursor: pointer;
}

.tagliste ul li a {
  display: inline-block;
  margin-bottom: 4px;
}

.teasertags ul li a:hover,
.teasertags ul li a.thechosen,
.tagliste ul li a:hover,
.tagliste ul li a.thechosen {
  color: var(--color-red);
  border: 1px solid var(--color-red);
  text-decoration: none;
}

.tagliste ul li a.tagback {
  display: none;
}

.tagliste ul li a.thechosen.tagback {
  display: inline-block;
}

.tagliste ul li a.thechosen.tagnoback {
  display: none;
}

/* .thechosen {
  text-decoration: underline;
} */

@media screen and (max-width: 480px) {
  .teasertags ul li a,
  .tagliste ul li a {
    line-height: 1.8;
  }
}

/* tags on mobile */

.filter-mobile {
  display: none;
}

@media screen and (max-width: 959px) {
  #page .content-grid {
    display: flex;
    flex-direction: column-reverse;
  }
  .filter-desktop {
    display: none;
  }
  .filter-mobile {
    display: block;
    margin-bottom: 4rem;
  }
  #page .filter-mobile .filter-mobile-title .accordion__trigger {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  #page .filter-mobile .glossarlink {
    padding-bottom: 1rem;
  }
 #page .filter-mobile .accordion__panel[aria-hidden="false"] {
        padding: .3rem 0;
  }
  #page .filter-mobile .filter-mobile-content .filter-wrapper {
    margin-top: .2rem;
    margin-left: 0;
    background-color: white;
    padding: .4rem 1rem;
    border-radius: 7px;
  }
}

/* !---- D blocks ________ */

.blocks {
  height: 100%;
}

/* !---- D1 block testimonial ---- */

.testimonial {
  display: block;
  background-color: white;
  padding: 1.6rem 2rem;
  border-radius: 4px;
  margin-top: 2rem;
  margin-bottom: 2rem;
  box-sizing: border-box;
}
.testimonial-wrapper {
  display: flex;
  flex-direction: row;
  margin-bottom: 1rem;
}
.testimonial-bild img {
  height: 5rem;
  border-radius: 400px;
}
.testimonial-person {
  font-size: 1.2rem;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 0 !important;
  padding-left: 2rem;
}
.testimonial-person span {
  font-weight: 400;
  font-size: .8rem;
}
.testimonial-text {
  font-style: italic;
}

@media screen and (max-width: 700px) {
  .testimonial-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
  }
  .testimonial-bild img {
    height: 7rem;
    width: auto !important;
    border-radius: 400px;
    margin-bottom: 1rem !important;
  }
  .testimonial-person {
    padding-left: 0;
  }
}

/* !---- D2 block bildlink ---- */

.block-type-bildlink {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 959px) {
  .block-type-bildlink {
    height: 100%;
    display: block;
    align-items: center;
    justify-content: center;
  }
  .bildlink a {
    max-width: 40%;
    margin: 0 auto;
    display: block;
  }
}

.bildlink a img {
  border-radius: 8px;
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 500px) {
  .bildlink a {
    max-width: 80%;
    margin: 0 auto;
    display: block;
  }
}

/* !---- D3 block accordion ---- */

.block-type-akkordeon {
  /* background-color: var(--bg-blue); */
  padding: .4rem .4rem .2rem 0;
}

.accordion {
  position: relative;
}

.accordionblock {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 14px;
}

.accordionblock > li {
  margin: 0;
}

.accordionblock > li:before {
  content: "\200B";
  position: absolute;
}

.accordion__heading {
  font-size: inherit;
  margin: -1px 0 0;
}

.accordion__heading button.accordion__trigger {
  -webkit-appearance: none;
  border: none;
  box-shadow: none;
  cursor: pointer;
  display: block;
  font-size: 1rem;
  letter-spacing: 3px;
  line-height: 144%;
  margin: 0;
  padding: var(--space-s) 2rem var(--space-s) 1.4rem;
  text-align: left;
  width: 100%;
  z-index: 2;
}

.accordion__heading button.accordion__trigger {
  letter-spacing: 0;
  text-transform: none;
}

.accordion__heading .accordion__trigger:after {
  display: none;
}

.accordion__heading .accordion__trigger:before {
  content: '↓';
  height: 1.6rem;
  margin: auto;
  position: absolute;
  color: var(--color-links);
  left: 0;
  bottom: -2rem;
  transition: transform .2s ease-in-out;
  transform-origin: center center;
  transform: rotate(0deg);
  width: .6rem;
}

.accordion__heading .accordion__trigger[aria-expanded="true"]:before {
  transform: rotate(180deg);
  /* content: '↑'; */
}

.accordion__trigger:hover:after,
.accordion__trigger:focus:after,
.accordion__trigger[aria-expanded="true"]:after {
  border-top-color: var(--color-red);
}

.accordion__trigger[aria-expanded="true"]:after {
  transform: rotate(180deg);
}

.accordion__trigger:hover,
.accordion__trigger:focus {
  color: var(--color-black);
  outline: none;
}

.accordion__trigger[aria-disabled="true"]:hover {
  background-color: #1b75bc;
  color: #fff;
  cursor: not-allowed;
}

.accordion__trigger[aria-disabled="true"]:focus {
  background-color: #0a2a42;
}

@media screen and (max-width: 769px) {
  .accordion__trigger {
    font-size: 18px;
    line-height: 1.5;
  }
}

.accordion__panel {
  background-color: inherit;
  max-height: 0vh;
  overflow: hidden;
  /* padding: 0.001em 1rem; */
  position: relative;
  visibility: hidden;
  z-index: 1;
  transition:
    max-height .2s ease-in-out,
    padding-top .2s ease-in-out,
    padding-bottom .2s ease-in-out;
}

.accordion__panel > :last-child {
  margin-bottom: 0;
}

.accordion__panel[aria-hidden="false"] {
  max-height: 100vh;
  overflow: auto;
  padding: 0;
  visibility: visible;
  background-color: transparent;
  border-radius: 4px;
  border-top: none;
  margin-bottom: 0;
  padding-top: 1rem;
}

#content-accordion .accordion__panel[aria-hidden="false"] {
  max-height: 100vh;
  overflow: auto;
  padding: 1rem 1.3rem 1.6rem;
  visibility: visible;
  background-color: var(--bg-blue);
  margin-top: .6rem;
  border: 0.4px solid #85cfe7;
  border-radius: 4px;
}

@media screen and (max-width: 600px) {
  .accordion__panel[aria-hidden="false"] {
    padding: 1.6rem 0;
    max-height: 400vh;
  }
  .accordion__panel p {
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

.accordion__trigger[aria-expanded="true"] {
  color: var(--color-black);
}

#headerdefault button.accordion__trigger {
  background-color: transparent;
  border: 0.4px solid #85cfe7;
  border-radius: 4px;
}

#headerdefault button.accordion__trigger[aria-expanded="true"] {
  border-bottom: none;
}

h4.accordion__heading {
  text-transform: uppercase;
  color: var(--color-black);
  font-family: 'Pressura';
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: 1px;
  margin-top: .4rem;
  background-color: var(--bg-blue);
}

h4.accordion__heading button {
  text-align: left;
  font-weight: 400;
  line-height: 1.5;
}

#content-accordion h4.accordion__heading {
  text-transform: uppercase;
  color: var(--color-black);
  font-family: 'Pressura';
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: 1px;
  margin-top: .4rem;
  background-color: transparent;
}

#content-accordion h4.accordion__heading button {
  padding: var(--space-2xs) var(--padding) var(--space-2xs) 1.4rem;
  border: none;
  margin-bottom: .8rem;
}

#faq.gridpwrapper > h2 {
  margin-bottom: 2rem;
}

#faq-block .accordion,
.block-type-akkordion .accordionblock {
  margin-top: 0;
  margin-bottom: 0;
}

.block-type-akkordion .accordionblock {
  margin-top: 0.2rem;
  margin-bottom: 2.4rem;
}

#faq-block .accordion .accordion__trigger,
.block-type-akkordion .accordionblock .accordion__trigger {
  background-color: transparent;
  border-radius: 18px;
  margin-top: 14px;
  margin-bottom: 0;
  padding: 0;
  font-family: var(--font-family-headings);
  width: 100%;
  text-align: left;
}

#faq-block .accordion .accordion__trigger[aria-expanded="true"],
.block-type-akkordion .accordionblock .accordion__trigger[aria-expanded="true"] {
  border-radius: 18px 18px 0 0;
}

#faq-block .accordion .accordion__panel,
.block-type-akkordion .accordionblock .accordion__panel {
  transition: all .2s;
}

#faq-block .accordion .accordion__panel[aria-hidden="false"],
.block-type-akkordion .accordionblock .accordion__panel[aria-hidden="false"] {
  border: none;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  /* background: rgba(255, 255, 255, 1);
  border-radius: 0 18px 18px 18px; */
}

#faq-block .accordion p,
.block-type-akkordion p {
  font-size: 18px;
  margin-bottom: 1.2rem;
  line-height: 1.5;
}

#faq-block .accordion p:last-child,
.block-type-akkordion p:last-child {
  margin-bottom: 0;
}

#faq-block .accordion p a,
.block-type-akkordion p a {
  padding-bottom: 2px !important;
}

#faq-block .accordion ul,
.block-type-akkordeon ul {
  list-style: disc;
  margin-bottom: 1rem;
}

#faq-block .accordion ul > li,
.block-type-akkordion ul > li {
  list-style: disc;
  margin-bottom: 0.4rem;
  padding-left: 1rem;
  margin-left: 1rem;
  line-height: 1.5;
  font-size: 18px;
}

@media screen and (max-width: 440px) {
  .accordion__heading button.accordion__trigger {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}


/* !---- D4 block icon ---- */

.iconblock,
.iconblock a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.iconblock.horizontal,
.iconblock.horizontal a {
  flex-direction: row;
  text-decoration: none;
}

.iconblock.vertical,
.iconblock.vertical a {
  flex-direction: column;
  text-decoration: none;
}

.iconblock.vertical a:hover,
.iconblock.horizontal a:hover {
  color: var(--color-black);
}

.iconblock img {
  display: block;
  height: 3.4rem;
  width: auto;
  margin-bottom: 1.2rem;
}

.iconblock.horizontal img {
  padding-right: 2rem;
}

.iconblock .icontitle {
  display: block;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: .6rem;
}

.block-type-iconblock .iconblock a .icontitle,
.block-type-iconblock .iconblock a .icontext {
  text-decoration: none;
}

.block-type-iconblock .iconblock a:hover .icontitle {
  color: var(--color-red);
}

.iconblock.horizontal .icontitle {
  text-align: left;
}

.iconblock .icontext {
  text-align: center;
  line-height: 1.4;
}

.iconblock.horizontal .icontext {
  text-align: left;
}

@media screen and (max-width: 959px) {
  .block-type-iconblock .iconblock {
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 700px) {
  .iconblock .icontitle {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: .6rem;
  }
}

/* !---- D5 block button ---- */

.block-type-button {
  text-align: center;
}

a.buttonblock {
  display: inline-block;
  text-decoration: none;
  padding: 1rem 2rem .8rem;
  background-color: var(--color-red);
  border-radius: 8px;
  color: white;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: var(--font-family-mono);
  transition: background-color .4s;
}

a:hover.buttonblock {
  background-color: var(--color-bright-red);
  color: white;
}

@media screen and (max-width: 959px) {
  .block-type-button a.buttonblock {
    margin-top: 1.4rem;
    margin-bottom: 1rem;
  }
}

/* !---- D6 block gallery ---- */

.blocks .block-type-gallery figure ul {
  display: block;
  columns: 3;
}

.blocks .block-type-gallery img {
  margin-bottom: 2rem;
}

@media screen and (max-width: 1080px) {
  .blocks .block-type-gallery figure ul {
    columns: 2;
  }
}

@media screen and (max-width: 700px) {
  .blocks .block-type-gallery figure ul {
    columns: 1;
  }
}

/* !---- E layout ________ */

.main {
  padding: 4.2rem 2.4rem 3rem;
  box-sizing: border-box;
}
.template-beteiligte .main {
  padding: 4.2rem 2.4rem 5rem;
}
.content-wrapper {
  display: flex;
  flex-direction: row-reverse;
  gap: 4rem;
  justify-content: space-between;
}

.filter-wrapper {
  display: block;
  /* width: 20%; */
  margin-bottom: 2rem;
  margin-left: 1rem;
  height: 100%;
}

.filter-wrapper article {
  position: sticky;
  top: 10rem;
  /* border: 2px solid #E6A335;
  border-radius: 9px;
  padding: 1.2rem 2rem 1.4rem; */
}

.filter-wrapper .tagliste ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

h1.h1 img {
  display: block;
  width: 3.8rem;
  margin-right: 1.4rem;
  margin-top: .2rem;
}

.subcat {
  margin-top: 4rem;
}

.dieergebnisse.subcat {
  margin-top: 0;
}

.subcat:first-child {
  margin-top: 0;
}

.subcat h2 {
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 6px;
  font-size: 1.4rem;
  color: var(--color-black);
}

.dieergebnisse .subcat {
  position: relative;
}

.dieergebnisse .headingwrapper {
  position: absolute;
  top: -2rem;
  left: -8vw;
  transform-origin: right;
  rotate: -90deg;
  width: 30px;
  height: 84px;
  display: flex;
  justify-content: flex-end;
  border-right: 3px solid var(--color-dark-green);
  padding-right: 1rem;
}

.dieergebnisse h2 {
  display: inline-block;
  color: var(--color-dark-green);
}

.subcat ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
  grid-column-gap: 2rem;
  grid-row-gap: 1rem;
  margin-left: 0;
}

.subcat ul.kachelwrapper {
  margin-left: 0;
}

.dieergebnisse {
  /* width: 70%; */
}

.icon-column img {
  width: 4rem;
  margin-top: 6px;
  margin-left: 20px;
}
.template-home .icon-column img {
  display: none;
}

@media (max-width: 1500px) {
  .icon-column img {
    margin-left: 0;
  }
}

@media (max-width: 1300px) {
  .icon-column img {
    margin-top: 14px;
    width: 3rem;
  }
}

@media (max-width: 959px) {
  .main > .icon-grid {
    display: flex;
    gap: 1rem;
  }
  .page-home .main > .icon-grid {
    gap: 0;
  }
  .template-glossar main .icon-grid {
    gap: 0;
  }
}

@media screen and (max-width: 2000px) {
  .content-wrapper {
    display: flex;
    flex-direction: row-reverse;
    gap: 4rem;
    justify-content: space-between;
  }
  .subcat ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
    margin-left: 0;
  }
  /* .page-home #veranstaltung > ul,
  .page-home #zugaenge > ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid;
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
    margin-left: 0;
  } */
}

@media screen and (max-width: 1200px) {
  .subcat ul {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    display: grid;
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
    margin-left: 0;
  }
  .dieergebnisse .headingwrapper {
    width: 10px;
  }
}

@media (max-width: 959px) {
  .main {
    padding: 4.2rem 2.4rem 3rem 2.4rem;
  }
  .template-projekte .main,
  .template-beteiligte .main,
  .template-zugaenge .main {
    padding: 4.2rem 2.4rem 3rem 3.4rem;
  }
  .dieergebnisse .headingwrapper {
    left: -3.4rem;
    top: -.7rem;
    height: 34px;
  }
  .icon-column img {
    margin-top: 7px;
    width: 2.4rem;
  }
}

@media (max-width: 480px) {
  .main {
    padding: 4.2rem 1rem 3rem 1rem;
  }
  .template-projekte .main,
  .template-beteiligte .main,
  .template-zugaenge .main {
    padding: 4.2rem 1rem 3rem 1rem;
  }
  .dieergebnisse .headingwrapper {
    position: relative;
    rotate: none;
    transform-origin: left;
    justify-content: flex-start;
    border-right: none;
    border-left: 3px solid var(--color-dark-green);
    padding-left: 1rem;
    left: auto;
    top: auto;
    width: auto;
    margin-bottom: 1rem;
  }
  .dieergebnisse h2 {
    font-size: 1.1rem;
  }
  .icon-column img {
    margin-top: 0;
    width: 2.4rem;
  }
}

/* !---- E1 the flex ---- */

.useflex {
  display: flex;
}

.flexgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 3%;
  row-gap: 2.4rem;
  justify-content: center;
}

.flexgrid .column {
  width: 60%;
}

.flexgridcolumn {
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.flexgridrow {
  width: 100%;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
}

/* !---- E2 the grid ---- */

.grid {
  --columns: 12;
  --gutter: 1.4rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 1fr;
  width: 100%;
}
@media screen and (max-width: 959px) {
  .grid {
    --columns: 12;
    --gutter: 3rem;
    display: grid;
    grid-gap: 0;
    grid-template-columns: 1fr;
    width: 100%;
  }
}

.template-blocks .grid.section-blocks,
.template-about .grid.section-blocks {
  width: auto;
  margin-top: 2.4rem;
}

.bereichlogos .logogrid {
  --columns: 7;
  --gutter: 1px !important;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: minmax(2.5rem, 2.5rem) 1fr 1fr 1fr 1fr minmax(2.5rem, 2.5rem);
  width: 100%;
}

.bereichlogos .logogrid-mobile {
  display: none;
}

.grid>.column {
  margin-bottom: 0;
}

.grid>.column.nomargin {
  margin-bottom: 0;
}

.autogrid {
  --gutter: 3rem;
  --min: 10rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}

@media screen and (min-width: 60rem) {
  body {
    --padding: 3rem;
  }
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .grid>.column {
    grid-column: span var(--columns);
  }
}

.sectionwrapper {
  display: flex;
  justify-content: center;
}

.section {
  margin: 1rem 0;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  box-sizing: border-box;
  max-width: 64rem;
}

.page-home .section {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.subpage .main .sectionwrapper .section {
  max-width: 48rem;
}

.section-fullwidth {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  max-width: 100%;
}

.section.nomargin {
  margin: 0;
}

.section-logo {
  background-color: var(--color-white);
  margin-top: 0;
}

/* .sticky .section-logo  {
  margin: 1rem 0 0;
} */

@media screen and (max-width: 1200px) {
  .page-home .section {
    --gutter: 1.4rem !important;
  }
}

@media screen and (max-width: 959px) {
  .section {
    margin: 1rem 0;
    border-radius: 4px;
  }
  .headergrid {
    grid-template-columns: repeat(12, 1fr);
    position: relative;
  }
}

@media screen and (max-width: 700px) {
  section {
    padding-left: 0;
    padding-right: 0;
  }
  .section.nomargin {
    /* padding: 1rem 1rem 0 !important; */
    box-sizing: border-box;
  }
}

@media screen and (max-width: 650px) {
  .bereichlogos .logogrid-desktop {
    display: none;
  }
  .bereichlogos .logogrid-mobile {
    --columns: 4;
    --gutter: 1px !important;
    display: grid;
    grid-gap: var(--gutter);
    grid-template-columns: minmax(2rem, 2rem) 1fr 1fr minmax(2rem, 2rem);
    width: 100%;
  }
}

/* !---- E3 the header ---- */

#header {
  position: sticky;
  top: 0;
  padding: 0 2.4rem 0;
  box-sizing: border-box;
  height: 8rem;
  background-color: var(--color-white);
  z-index: 999;
  transition: all .3s;
}

#header.sticky {
  height: 8rem;
  padding-top: 1rem;
  border-bottom: .8px solid var(--color-black);
  /* background-color: white; */
}

.page-home #header {
  /* height: auto; */
  box-shadow: none;
}

/* .page-home #header.sticky {
  height: 7rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
} */

.column-logo {
  z-index: 0;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  /* width: 20%; */
}

.menucolumn {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.column-mobile {
  display: flex;
  z-index: 99;
  position: relative;
}

#thelogo {
  height: 100%;
}

.logo {
  display: block;
  font-family: var(--font-family-sans);
  font-size: 1.8rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-black);
  z-index: 0;
  padding-left: 6rem;
  transition: max-width .3s;
  margin-top: 1rem;
  max-width: 15rem;
}

/* .logo img {
  width: 40%;
  max-width: 4rem;
  transition: all .3s;
} */

.page-home .logo img,
.subpage .logo img {
  transition: all .3s;
  /* margin-top: .8rem;
  margin-bottom: .4rem; */
}

.logowrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-transform: uppercase;
}

.logowrapper em {
  font-size: 1.2rem;
  font-weight: 800;
  font-style: normal;
}

#header.sticky .logo {
  margin-top: 0;
  height: 100%;
  transition: all .2s;
  font-size: 1rem;
}

/* .page-home #header.sticky .logo img,
.subpage #header.sticky .logo img {
  width: auto;
  margin-top: 0;
  height: 74%;
  transition: all .3s;
} */

#themenu {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-menu {
  background-color: var(--color-black);
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 999;
}

.column-menu {
  position: relative;
}

.section-menu .column-menu .logo {
  display: none;
  transition: all .4s;
}

.section-menu.sticky .column-menu .logo {
  display: block;
  position: absolute;
  left: 2rem;
  top: 0;
  width: 2rem;
}

.menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
}

.menu a,
.languages ul li {
  font-size: 1rem;
  font-family: var(--font-family-sans);
  padding-right: .2rem;
  display: block;
  /* text-transform: uppercase; */
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--color-black);
  opacity: .6;
}

.languages ul li:last-child {
  padding-right: 0;
}

.menu a[aria-current] {
  /* color: var(--color-links); */
  /* text-decoration: underline;
  text-decoration-color: var(--color-links);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px; */
  opacity: 1;
}

.menu a:hover,
.languages ul li a:hover {
  /* color: var(--color-links); */
  text-decoration: none;
  opacity: 1;
}

.menu a {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.menu a img,
.mobilenav a .menuicon img {
  width: 2.5rem;
  max-height: 2rem;
}

#header.sticky .menu a {
  padding-top: .4rem;
  padding-bottom: .4rem;
}

#submenu {
  display: flex;
  justify-content: flex-end;
}

#header.sticky #submenu {
  margin-bottom: 9px;
}

.languages ul {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .8rem;
  margin-top: 1rem;
  transition: margin .4s;
}

#header.sticky .languages ul {
  margin-bottom: 0;
  margin-top: .2rem;
}

.languages ul li,
.languages ul li a {
  color: var(--color-grey);
}

.languages ul li.active a {
  color: var(--color-dark-green);
}

.languages ul li:first-child::after {
  content: "/";
}

.social {
  height: 100%;
  display: flex;
  padding-left: .8rem;
  padding-top: .1rem;
  gap: .6rem;
}

.socialwrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sociallogowrapper {
  margin-top: 1rem;
}

.social a {
  padding: 0;
}

@media (max-width: 1200px) {
  .headerfirstcolumn {
    display: none;
  }
  .menucolumn {
    grid-column: span 9 !important;
  }
  /* .languages ul li:first-child {
    width: 2rem;
  } */
}

@media (max-width: 1080px) {
  #header {
    height: 4.4rem;
  }
  #header.sticky {
    height: 5.4rem;
  }
  .column-logo {
    align-items: flex-start;
    flex-direction: row-reverse;
    gap: 2rem;
    grid-column: span 4 !important;
  }
  .logo {
    padding-left: 0;
    min-width: 8rem;
    max-width: 10rem;
  }
  #header.sticky .logo {
    max-width: 8rem;
  }
  .languages {
    display: none;
  }
  .mobilenav .languages {
    display: block;
  }
}

@media (max-width: 959px) {
  #header {
    padding: 0 2rem 0;
  }
  .column-logo {
    position: absolute;
    left: 0;
    align-items: flex-start;
    flex-direction: row-reverse;
    gap: 2rem;
    grid-column: span 4 !important;
  }
  .logo {
    max-width: 10rem;
  }
}

@media (max-width: 480px) {
  #header {
    padding: 0 1rem 0;
  }
}

/* footer */

.footer {
  padding: 2rem 3rem;
}

.footer:before {
    content: "";
    display: block;
    width: 3.5rem;
    height: 3px;
    background: var(--color-black);
    margin-bottom: 1.5rem;
}

.footermenu {
  margin-top: 2rem;
}

.footermenu ul {
  height: 100%;
  display: flex;
  gap: 1rem;
  font-family: var(--font-family-sans);
  justify-content: flex-end;
  align-items: flex-end;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
}

@media (max-width: 959px) {
  .footer {
    padding: 2rem 2.4rem;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: 2rem 1rem;
  }
}


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

  .menu-default {
    display: none;
  }

  .footermenu li {
      margin-left: 0;
      margin-right: 12px;
  }

}

/* !---- E5 the kacheln ---- */

.singlekachel {
  /* border: 2px solid #E6A335; */
  padding: 0;
  margin-bottom: .8rem;
  border-radius: 9px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
}

.singlekachel a.singlekachellink,
.singlekachel .teasertag a {
  text-decoration: none;
}

.singlekachel a.singlekachellink:hover .note-excerpt-title {
  color: var(--color-link);
}

.singlekachel a.singlekachellink:hover .note-excerpt-function {
  color: var(--color-text);
}

.singlekachel img.responsive-image {
  border-radius: 7px 7px 0 0;
  /* filter: grayscale(1); */
  filter: brightness(97%);
}

/* image hover */
.img-hover-zoom {
  display: inline-block;
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
  width: 100%;
}
.img-hover-zoom img {
  transition: all .24s ease-in-out;
}
.img-hover-zoom:hover img {
  transform: scale(1.07);
}
.img-hover-zoom:hover img.responsive-image {
  filter: brightness(100%);
}

.singlekachel-notes {
  border: 1px solid black;
  padding: .4rem .4rem .4rem .4rem;
  margin-bottom: .8rem;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

a.thechosen {
  color: var(--color-yellow);
}

.teasertags {
  padding: .4rem 1rem .8rem;
}

.teasertags ul {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.teasertags ul li {
  font-size: .8rem !important;
  line-height: 1.14;
  border-radius: 18px;
  margin-bottom: .6rem;
}

/* .teasertags ul li:hover {
  color: red;
  border: 1px solid red;
} */

.tagliste ul li a:hover {
  color: var(--color-red);
}

.tagliste h3 {
  margin-top: 1.4rem;
  font-size: .7rem;
}

.alletags h3 {
  margin-top: .8rem;
  margin-bottom: 2rem;
  font-size: .7rem;
}

.note-icon img {
  width: 2rem;
  max-height: 1.7rem;
}

/* --- related elements --- */

.blog-prevnext > ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
  grid-column-gap: 2rem;
  grid-row-gap: 1rem;
}

@media screen and (max-width: 2000px) {
  .blog-prevnext > ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid;
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
  }
}

@media screen and (max-width: 1200px) {
  .blog-prevnext > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
  }
}

@media screen and (max-width: 959px) {
  .blog-prevnext > ul {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    display: grid;
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
  }
}

/* !---- E6 the pages ---- */

/* !---- home ---- */

/* .template-home h1.h1 {
  display: none;
} */

/* .template-home .icon-column img {
  padding-top: 5px;
} */

/* !---- startseite ---- */

#zugaenge {
  margin-bottom: 4rem;
}

#partnerinnen {
  margin-top: 4rem;
}

.page-home h2 {
  margin-bottom: 2rem;
  color: var(--color-dark-green);
  text-transform: uppercase;
  letter-spacing: 6px;
  font-size: 1.6rem;
  line-height: 1.4;
}
.page-home .footer h2 {
  letter-spacing: 0;
  font-size: 1.3rem;
  line-height: 1.3;
}


.page-home .subcat h2 {
  /* text-transform: none;
  letter-spacing: 0;
  font-size: 1.6rem; */
  margin-bottom: 3.6rem;
}

.footer-mitglied-contain {
  margin: 2rem auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12.8%;
  row-gap: 3rem;
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
}

.footer-mitglied-contain .logoitem {
  width: 23%;
}

@media screen and (max-width: 1200px) {
  .page-home h2 {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 959px) {
  .footer-mitglied-contain .logoitem {
    width: 40%;
  }
  .footer .grid h2 {
    font-size: 1rem;
  }
}

@media screen and (max-width: 480px) {
  .page-home h2 {
    font-size: 1.1rem;
  }
  .page-home .subcat h2 {
    /* text-transform: none;
    letter-spacing: 0;
    font-size: 1.6rem; */
    margin-bottom: 1.6rem;
  }
  .footer-mitglied-contain .logoitem {
    width: 90%;
  }
}

/* !---- alle inhalte ---- */

/* .template-notes h1 {
  margin-bottom: 1rem;
} */

.introwhite {
  background-color: white;
  padding: 1.6rem 2rem 3.4rem;
  border-radius: 7px;
  margin-bottom: 2rem;
}

.introwhitebeteiligte {
  padding: 1.6rem 2rem .8rem;
}
.introwhitebeteiligte ul li {
  list-style: none;
}

/* page projekte */

.clusterheading {
  margin-top: 25px;
}

@media screen and (max-width: 480px) {
  .clusterheading {
    margin-top: 8px;
  }
}

/* kachel-einzelseite */

.template-note .teasertags.singlenotetags {
  padding-left: 0;
}

.template-note picture {
  display: block;
  height: 100%;
}

.template-note picture img {
  display: block;
  height: 100%;
  object-fit: cover;
}

.template-note h1.h1 {
  display: none;
}

.template-note .note-icon img {
  width: 100%;
  max-height: none;
  max-width: 4rem;
  margin-top: 0;
}

.template-note .noteimage img {
  border-radius: 7px;
}

.template-note .noteprofil h3 {
  font-size: .7rem;
  font-weight: bold;
  margin-bottom: .6rem;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.template-note .noteheader {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.template-note .noteheader .teasertags {
  padding: 0;
}

.template-note h1.note-title {
  font-weight: 500;
  margin-bottom: 2rem;
}

.template-note a,
.template-note a img.singlenoteimage {
  border-radius: 9px;
}

.template-note .main a img.singlenoteimage {
  border: 2px solid #E6A335;
}

.template-note .notegridcontent {
  margin-top: 2.4rem;
}

.template-note .note-footer {
  padding: 4.2rem 3rem 3rem;
  box-sizing: border-box;
}

@media screen and (max-width: 1400px) {
  .template-note .column-expand {
    --columns: 5 !important;
  }
  .template-note .column-shrink {
    --columns: 1 !important;
  }
}

@media screen and (max-width: 959px) {
  .template-note .note-footer {
    padding: 4.2rem 2.4rem 3rem;
    box-sizing: border-box;
  }
  .template-note .note-icon img {
    max-width: 3rem;
    margin-bottom: .6rem;
  }
  .template-note .teasertags.singlenotetags {
    margin-bottom: 2.4rem;
  }
  .template-note .noteimage {
    margin-bottom: 1.4rem;
  }
  .template-note .notegridcontent {
    margin-top: 0;
    display: flex;
    flex-direction: column-reverse;
  }
  .template-note .column-notemeta {
    margin-bottom: 1.4rem;
  }
  .template-note .note-veranstaltung-meta {
    line-height: 1.3;
  }
}

@media screen and (max-width: 480px) {
  .template-note .note-footer {
    padding: 4.2rem 1rem 3rem;
    box-sizing: border-box;
  }
}

/* page glossar */

.glossarlink a {
  display: inline-block;
  position: relative;
  margin-top: 1.4rem;
  font-size: .7rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-links);
  text-underline-offset: 6px;
}

.glossarlink a:hover {
  color: var(--color-links);
}

.glossarlink a:after {
  background-image: url(../images/arrow3.svg);
  background-size: 1rem 1rem;
  background-repeat: no-repeat;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  content: "";
  position: absolute;
  bottom: -0.1rem;
  right: -1.2rem;
  z-index: 70;
}

.glossarsurtitle {
  flex-direction: column;
  align-items: flex-start;
}

.glossarsurtitle a {
  display: block;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: .4rem;
}

.glossartitle span {
  display: block;
}

.glossar-excerpt {
  line-height: 1.5em;
  background-color: white;
  border-radius: 10px;
}

.glossar-excerpt-wrapper {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: flex-start;
  padding: .9rem 1rem 1.3rem 1.2rem;
}

.glossar-excerpt header {
  margin-bottom: .4rem;
}

.glossar-excerpt figure {
  margin-bottom: .5rem;
}

.glossar-excerpt-title {
  font-weight: 600;
  line-height: 1.34;
  margin-top: 0;
  margin-bottom: .4rem;
}

/* --- the mobile menu --- */

nav.mobilenav {
    display: none;
    right: 0;
    position: fixed;
    top: 0;
    z-index: 9999;
    max-height: 1rem;
}

/*** INPUT ***/
nav.mobilenav input {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

nav.mobilenav label {
    cursor: pointer;
    display: block;
    font: 2em/1 'Oswald', sans-serif;
    padding: 0.5em;
}

/* Hamburger Icon */
#menu-icon,
#menu-icon:before,
#menu-icon:after {
    background: var(--color-links);
    border-radius: 0.05em;
    height: 3px;
    transition: all 0.2s ease-in-out;
    width: 100%;
}

#menu-icon {
    display: inline-block;
    margin: 1.6rem 1.4rem 0;
    max-width: 1em;
    position: relative;
}

.page-home #menu-icon,
.otherpage #menu-icon {
    margin: 1.8rem 2rem 0 1rem;
}

.page-home #header.sticky #menu-icon,
.otherpage #header.sticky #menu-icon {
    margin: 1.4rem 2rem 0 1rem;
    max-width: 1em;
    position: relative;
}

.otherpage #header.sticky #menu-icon {
    margin: 1.9rem 1.4rem 0 1rem;
    max-width: 1em;
    position: relative;
}

nav.mobilenav label #menu-icon {
    float: right;
    z-index: 99;
}

#menu-icon:before,
#menu-icon:after {
    content: '';
    left: 0;
    position: absolute;
}

#menu-icon:before {
    top: -0.3em;
}

#menu-icon:after {
    bottom: -0.3em;
}

/* Close Icon */
nav.mobilenav input[type=checkbox]:checked + label #menu-icon {
    background: transparent;
}

nav.mobilenav input[type=checkbox]:checked + label #menu-icon:before {
    top: 0;
    transform: rotate(-45deg);
}

nav.mobilenav input[type=checkbox]:checked + label #menu-icon:after {
    bottom: 0;
    transform: rotate(45deg);
}

/* Overlay */
nav.mobilenav input:checked ~ #overlay {
    background: var(--color-background);
    bottom: 0;
    left: 0;
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
    width: 100vw;
    z-index: -1;
}

/* List */

.mobilelogo img {
  max-width: 11rem;
}

#hero nav.mobilenav ul a.logo {
    text-align: right;
    margin-top: 3rem;
    margin-bottom: 3rem;
    max-width: 100%;
    text-transform: none;
}

#hero nav.mobilenav ul a.logo h1 {
    font-family: var(--font-family-sans);
    line-height: 1.3;
    color: var(--color-black);
    font-weight: 600;
    font-size: 1.4rem;
    margin-bottom: 0;
}

nav.mobilenav ul {
    font-size: 1.5em;
    list-style: none;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    text-align: right;
}

nav.mobilenav input:checked ~ ul,
nav.mobilenav input:checked ~ .languages ul {
    margin: 1.4em;
    margin-left: 0;
    max-height: inherit;
    opacity: 1;
}

nav.mobilenav input:checked ~ .languages ul {
  flex-direction: column;
}

nav.mobilenav input:checked ~ .languages ul li:first-child {
  display: block;
  padding-right: 0;
  width: auto;
  margin-bottom: 0;
}

nav.mobilenav input:checked ~ .languages ul li:first-child::after {
  display: none;
}

nav.mobilenav ul > li {
    margin: 0;
}

nav.mobilenav ul a {
    font-family: var(--font-family-sans);
    font-size: 1rem;
    padding: 0.4rem;
    padding-right: 0;
    display: flex;
    gap: .4rem;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-black);
}

nav.mobilenav ul a:hover {
    color: var(--color-dark-green);
}

.mobilenav .mobileotherpages {
  margin-top: 3rem;
}

@media screen and (max-width: 1080px) {
  nav.mobilenav {
    display: block;
  }
  #hero nav.mobilenav ul a.logo h1 {
      font-size: 1.8rem;
  }
}

@media screen and (max-width: 420px) {
  #hero nav.mobilenav ul a.logo h1 {
      font-size: 1.5rem;
  }
  .page-home #menu-icon,
  .otherpage #menu-icon {
      margin: 1.8rem 1rem 0 1rem;
  }
}