/* @import "the-new-css-reset/css/reset.css"; */
/* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */

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

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

svg:not(:root) {
  overflow: visible;
}

:root {
  --viewport-width: 100vw;
  --viewport-height: 100vh;
}
/* Functional colors */

:root {
  --color-bg: var(--color-12);
  --color-text: var(--color-16);
}

@font-face {
  font-family: "TheSansC5";
  src:
    url("../../assets/fonts/theSansC5/TheSansC5-3_Light.woff2") format("woff2"),
    url("../../assets/fonts/theSansC5/TheSansC5-3_Light.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TheSansC5";
  src:
    url("../../assets/fonts/theSansC5/TheSansC5-6_SemiBold.woff2") format("woff2"),
    url("../../assets/fonts/theSansC5/TheSansC5-6_SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TheSansC5";
  src:
    url("../../assets/fonts/theSansC5/TheSansC5-7_Bold.woff2") format("woff2"),
    url("../../assets/fonts/theSansC5/TheSansC5-7_Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --root-font-size: 0.7vw; */
  /* stylelint-disable-next-line unit-case */
  --root-font-size: 10Px;
  /* --base-font-size: 16px; */
  /* font families */
  --font-family-thesansc5: "TheSansC5", sans-serif;
  --base-font-family: var(--font-family-thesansc5);
  /* font-sizes */
  --font-size--xxxxxl: 5rem;
  --font-size--xxxxl: 4.8rem;
  --font-size--xxxl: 3.8rem;
  --font-size--xxl: 3.2rem;
  --font-size--xl: 2.8rem;
  --font-size--l: 2.4rem;
  --font-size--ls: 2rem;
  --font-size--m: 1.8rem;
  --font-size--base: 1.6rem;
  --font-size--sl: 1.4rem;
  --font-size--sm: 1.2rem;
  /* font-weight */
  --font-weight--base: var(--font-weight--light);
  --font-weight--light: 200;
  --font-weight--semibold: 600;
  --font-weight--bold: 700;
  /* line height */
  --line-height--xxxl: 2.5;
  --line-height--base: 1.6;
  --line-height--sl: 1.4;
  --line-height--sm: 1.2;
  /* site sizes */
  --site-max-width: 197rem;
  --content-max-width: 140rem;
  --content-max-width--mobile: 76.8rem;
  --mobile-header-height: 12rem;
  --container-padding: 1.5rem;
  /* Border radius */
  --border-radius-base: 0.4rem;
  /* transitions */
  --transition-duration: 0.3s;
  --transition-hover: var(--transition-duration) ease;
  --transition-collapse: var(--transition-duration) ease;
}

html {
  font-size: var(--root-font-size);
}

body {
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: var(--base-font-family);
  font-size: var(--font-size--base);
  font-weight: var(--font-weight--base);
  font-smooth: antialiased;
  line-height: var(--line-height--base);
}

@media all and (min-width: 1024px) {

body {
    font-size: var(--font-size--ls)
}
  }

img {
  display: block;
}

svg {
  fill: var(--color-text);
  stroke: none;
}

p {
  margin-bottom: 2rem;
}

p:last-of-type {
    margin-bottom: 0;
  }

b,
strong {
  font-weight: var(--font-weight--bold);
}

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

.a-button {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  padding: 0 2rem;
  cursor: pointer;
  transition: var(--transition-hover);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--color-12);
  border: none;
  background-color: var(--color-6);
  font-size: var(--font-size--base);
  font-weight: var(--font-weight--light);
  line-height: var(--line-height--xxxl);
  -webkit-appearance: none;
  appearance: none;
}

@media all and (min-width: 1024px) {

.a-button {
    font-size: var(--font-size--ls)
}
  }

.a-button:hover,
  .a-button:focus-visible {
    text-decoration: none;
    color: var(--color-12);
    background-color: var(--color-5);
  }

.a-button:disabled,
    .a-button:disabled:hover,
    .a-button:disabled:focus-visible,
    .a-button[disabled],
    .a-button[disabled]:hover,
    .a-button[disabled]:focus-visible,
    .a-button--disabled,
    .a-button--disabled:hover,
    .a-button--disabled:focus-visible {
      cursor: default;
      pointer-events: none;
      background-color: var(--color-4);
    }

.a-button--icon {
    padding: 1rem;
  }

.a-button--size-icon--medium .a-button__icon {
        max-width: 2.3rem;
        max-height: 2.3rem;
      }

.a-button--center {
    justify-content: center;
    gap: 1rem;
  }

.a-button--full {
    display: flex;
    width: 100%;
  }

.a-button--bold {
    font-weight: var(--font-weight--bold);
  }

.a-button--secondary {
    color: var(--color-17);
    background-color: var(--color-4);
  }

.a-button--secondary:hover {
      color: var(--color-12);
    }

.a-button a {
    text-decoration: none;
    color: currentColor;
  }

.a-button__icon {
    max-width: 1.5rem;
    max-height: 1.5rem;
    fill: currentColor;
    stroke: currentColor;
  }

button {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  padding: 0 2rem;
  cursor: pointer;
  transition: var(--transition-hover);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--color-12);
  border: none;
  background-color: var(--color-6);
  font-size: var(--font-size--base);
  font-weight: var(--font-weight--light);
  line-height: var(--line-height--xxxl);
  -webkit-appearance: none;
  appearance: none;
}

@media all and (min-width: 1024px) {

  button {
    font-size: var(--font-size--ls);
}
  }

button:hover, button:focus-visible {
    text-decoration: none;
    color: var(--color-12);
    background-color: var(--color-5);
}

button:disabled, button:disabled:hover, button:disabled:focus-visible, button[disabled], button[disabled]:hover, button[disabled]:focus-visible {
      cursor: default;
      pointer-events: none;
      background-color: var(--color-4);
}

button a {
    text-decoration: none;
    color: currentColor;
}

.btn-fhp--plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 3rem;
    background-image: none;
    font-size: 1.8rem;
  }

.btn-fhp--green {
    background-color: #7ed321;
  }

.btn-fhp--grey {
    background-color: #696969;
  }

.a-title {
  margin-top: 0;
  margin-bottom: 0;
  text-transform: uppercase;
  font-weight: var(--font-weight--bold);
  line-height: var(--line-height--sm);
}

@media all and (min-width: 1024px) {

  .a-title {
    line-height: var(--line-height--sl);
}
  }

.a-title span {
    color: var(--color-6);
}

.a-title a {
    color: currentColor;
  }

.a-title--h1,
  .a-title h1 {
    font-size: var(--font-size--l);
  }

@media all and (min-width: 1024px) {

  .a-title--h1,
  .a-title h1 {
      font-size: var(--font-size--xxxxxl);
  }
    }

.a-title--h2,
  .a-title h2 {
    font-size: var(--font-size--m);
  }

@media all and (min-width: 1024px) {

  .a-title--h2,
  .a-title h2 {
      font-size: var(--font-size--xxxl);
  }
    }

.a-title--h3,
  .a-title h3 {
    font-size: var(--font-size--base);
  }

@media all and (min-width: 1024px) {

  .a-title--h3,
  .a-title h3 {
      font-size: var(--font-size--xl);
  }
    }

.a-title--h4,
  .a-title h4 {
    font-size: var(--font-size--l);
  }

.a-title--h5,
  .a-title h5 {
    text-transform: none;
    font-size: var(--font-size--ls);
  }

.a-title--h6,
  .a-title h6 {
    font-size: var(--font-size--m);
  }

.a-title--icon {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-weight: var(--font-weight--bold);
  }

.a-title__icon {
    position: relative;
    display: flex;
  }

.a-title__svg,
  .a-title svg {
    flex: 1;
    max-width: 2.5rem;
    max-height: 2.5rem;
  }

textarea h1,
  textarea h2,
  textarea h3,
  textarea h4,
  textarea h5,
  textarea h6,
  .paragraph--type--accordion h1,
  .paragraph--type--accordion h2,
  .paragraph--type--accordion h3,
  .paragraph--type--accordion h4,
  .paragraph--type--accordion h5,
  .paragraph--type--accordion h6 {
  margin-top: 0;
  margin-bottom: 0;
  text-transform: uppercase;
  font-weight: var(--font-weight--bold);
  line-height: var(--line-height--sm);
  }

@media all and (min-width: 1024px) {

  textarea h1,
  textarea h2,
  textarea h3,
  textarea h4,
  textarea h5,
  textarea h6,
  .paragraph--type--accordion h1,
  .paragraph--type--accordion h2,
  .paragraph--type--accordion h3,
  .paragraph--type--accordion h4,
  .paragraph--type--accordion h5,
  .paragraph--type--accordion h6 {
    line-height: var(--line-height--sl);
  }
  }

textarea h1 span,
  textarea h2 span,
  textarea h3 span,
  textarea h4 span,
  textarea h5 span,
  textarea h6 span,
  .paragraph--type--accordion h1 span,
  .paragraph--type--accordion h2 span,
  .paragraph--type--accordion h3 span,
  .paragraph--type--accordion h4 span,
  .paragraph--type--accordion h5 span,
  .paragraph--type--accordion h6 span {
    color: var(--color-6);
  }

textarea h1, .paragraph--type--accordion h1 {
    font-size: var(--font-size--l);
  }

@media all and (min-width: 1024px) {

  textarea h1, .paragraph--type--accordion h1 {
      font-size: var(--font-size--xxxxxl);
  }
    }

textarea h2, .paragraph--type--accordion h2 {
    font-size: var(--font-size--m);
  }

@media all and (min-width: 1024px) {

  textarea h2, .paragraph--type--accordion h2 {
      font-size: var(--font-size--xxxl);
  }
    }

textarea h3, .paragraph--type--accordion h3 {
    font-size: var(--font-size--base);
  }

@media all and (min-width: 1024px) {

  textarea h3, .paragraph--type--accordion h3 {
      font-size: var(--font-size--xl);
  }
    }

textarea h4, .paragraph--type--accordion h4 {
    font-size: var(--font-size--l);
  }

.a-textarea {
  display: flex;
  width: 100%;
  height: 30rem;
  padding: 0.5rem 1.4rem;
  resize: none;
  transition: box-shadow 404ms;
  color: var(--color-16);
  border: none;
  outline: none;
  background-color: var(--color-12);
  box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.05);
  font-size: var(--font-size--base);
  font-weight: var(--font-weight--light);
  line-height: var(--line-height--base);
}

@media all and (min-width: 1024px) {

.a-textarea {
    font-size: var(--font-size--m)
}
  }

.a-textarea:placeholder {
    color: var(--color-19);
  }

.a-textarea--secondary {
    background-color: var(--color-18);
  }

textarea,
  .webform-submission-form textarea {
  display: flex;
  width: 100%;
  height: 30rem;
  padding: 0.5rem 1.4rem;
  resize: none;
  transition: box-shadow 404ms;
  color: var(--color-16);
  border: none;
  outline: none;
  background-color: var(--color-12);
  box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.05);
  font-size: var(--font-size--base);
  font-weight: var(--font-weight--light);
  line-height: var(--line-height--base);
  }

@media all and (min-width: 1024px) {

  textarea,
  .webform-submission-form textarea {
    font-size: var(--font-size--m);
  }
  }

textarea:placeholder,
  .webform-submission-form textarea:placeholder {
    color: var(--color-19);
  }

textarea.a-textarea--secondary {
    background-color: var(--color-18);
  }

.m-form-item__input-wrapper .form-textarea__wrapper {
    width: 100%;
  }

.media-view-grid .views-form form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }

.fhp-footer .footer-left ul li a {
          display: inline;
          font-weight: 200;
        }

.webform-ticket-page .breadcrumb-content,
  .webform-ticket-page .layout-content {
    margin: 0;
  }

@media (max-width: 768px) {
      .webform-submission-ticket-form .webform-multiple-add .form-submit {
        display: block;
        margin: 0 auto;
      }
  }

.webform-submission-ticket-form .webform-multiple-table-responsive td > div > label.visually-hidden {
    position: inherit !important;
    display: block;
    overflow: inherit;
    clip: inherit;
    width: inherit;
    height: inherit;
    margin: 0.2em 0;
  }

.webform-submission-ticket-form thead {
    display: block !important;
    font-size: 2.6rem;
    margin-botton: 2em;
  }

.webform-submission-ticket-form tbody,
  .webform-submission-ticket-form table,
  .webform-submission-ticket-form tr,
  .webform-submission-ticket-form td {
    display: block;
  }

.webform-submission-ticket-form tbody.webform-multiple-table--operations, .webform-submission-ticket-form table.webform-multiple-table--operations, .webform-submission-ticket-form tr.webform-multiple-table--operations, .webform-submission-ticket-form td.webform-multiple-table--operations {
      position: absolute;
      top: 0;
      right: 0;
    }

.webform-submission-ticket-form td {
    padding: 0 !important;
  }

.webform-submission-ticket-form tr {
    position: relative;
  }

.webform-submission-ticket-form tr .form-item {
      margin-bottom: 0.5em;
    }

.webform-submission-ticket-form tr:not(:last-child) {
    margin-bottom: 1.75em;
    padding-bottom: 2em;
    border-bottom: 0.2rem solid black;
  }

.webform-submission-ticket-form .form-item-total-ticket-price {
    position: relative;
    display: block;
    display: flex;
    justify-content: space-between;
    margin: 1.5em 0;
    padding: 1rem 0 0.5rem 0;
    color: #000;
    border-top: 0.1rem solid #000;
    border-bottom: 0.1rem solid #000;
    font-size: 2.6rem;
    font-weight: bold;
  }

.webform-submission-ticket-form .form-item-total-ticket-price label,
    .webform-submission-ticket-form .form-item-total-ticket-price div {
      font-size: 2.6rem;
    }

.webform-submission-ticket-form .js-form-type-processed-text {
    margin-bottom: 1.75em;
  }

.webform-submission-ticket-form .form-container .form-item {
    margin-bottom: 0.5em;
  }

.webform-submission-ticket-form label {
    color: #313131;
    font-size: 1.8rem;
  }

.webform-submission-ticket-form .sepa-text {
    margin-top: 1.5rem;
    color: #888;
    font-size: 1.6rem;
  }

.webform-submission-ticket-form .webform-confirmation {
    padding: 2rem 0;
  }

.webform-submission-ticket-form .webform-confirmation .webform-confirmation__back {
      margin: 0;
    }

.paragraph--type--formular {
  padding: 0;
}

.term--type--nachhaltigkeit.term--view-mode--block {
    padding-top: 6rem;
    padding-bottom: 9rem;
  }

@media (max-width: 768px) {
      .term--type--nachhaltigkeit.term--view-mode--block .field_header,
      .term--type--nachhaltigkeit.term--view-mode--block .description {
        width: 100%;
      }
    }

.term--type--nachhaltigkeit.term--view-mode--block h2 {
      margin-bottom: 1.5rem;
      color: var(--color-6);
      font-size: 2rem;
      font-weight: 700;
      line-height: 3.2rem;
    }

.term--type--nachhaltigkeit.term--view-mode--block .field_header {
      width: 60%;
      margin-bottom: 3rem;
      text-transform: uppercase;
      font-size: 4.8438rem;
      font-weight: 700;
      line-height: 6rem;
    }

.term--type--nachhaltigkeit.term--view-mode--block .description {
      width: 60%;
      margin-bottom: 5.5rem;
      font-size: 2rem;
      font-weight: 300;
      line-height: 3.2rem;
    }

.term--type--nachhaltigkeit.term--view-mode--block .field_image {
      display: flex;
    }