/*!
 * Author: Chloe Focke
 * Email: chloe.focke@5knoten.de
 * Project: Your Drupal Module / Theme Name
 * Created: 2025-05-30
 * Description: Core styles for the Section module, including
 *              custom entity fields and responsive layout.
 *
 * Notes:
 * - Keep this header updated.
 *
 */
@media (min-width: 992px) {
  :root {
    --header-top-margin: 72px;
    --header-bottom-margin: 64px;
  }
}
@media (max-width: 992px) {
  :root {
    --header-top-margin: 16px;
    --header-bottom-margin: 32px;
  }
}
header {
  margin-top: var(--header-top-margin);
  margin-bottom: var(--header-bottom-margin);
}
header .navbar {
  width: 100%;
  /* Header Buttons */
}
header .navbar > div {
  position: relative;
}
header .navbar .nav-link {
  display: inline-flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  font-family: Archivo, serif;
  color: var(--primary-50, #00384B);
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
  line-height: 140%;
}
header .navbar .nav-link:hover {
  background: rgba(0, 113, 151, 0.15);
}
header .navbar .nav-link.active {
  background: var(--primary, #007197);
  color: var(--white, #FFF);
}
header .navbar-brand img {
  width: 255px;
  height: 34px;
  flex-shrink: 0;
  margin: auto 0;
}
header .navbar-toggler {
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  border: 2px solid var(--primary, #007197);
}
header ul.navbar-nav {
  gap: 10px;
}

@media (max-width: 991px) {
  header #navbarNav {
    position: absolute;
    right: 0px;
    top: 50px;
    padding: 10px;
    background: var(--white);
    margin: 12px;
    border-radius: 8px;
    box-shadow: rgba(0, 56, 75, 0.15) 2px 2px 24px 0px;
  }
}
/**
 * @file
 * Footer regions.
 */
footer.footer {
  z-index: 3;
  position: relative;
  padding-bottom: 0;
  padding-top: 0;
  /* Footer Background */
}
footer.footer .background {
  position: relative;
  overflow-x: clip;
}
footer.footer .background img {
  position: absolute;
  bottom: 0;
  min-width: 2200px;
  width: 100%;
}
footer.footer .background img:nth-child(1) {
  z-index: 1;
}
footer.footer .background img:nth-child(2) {
  width: 150px;
  height: 150px;
  right: 350px;
  min-width: unset;
  bottom: 50px;
  z-index: 2;
  animation: fish-animation 6s;
  transform: rotate(-15deg);
}
footer.footer .background img:nth-child(3) {
  right: 0;
  z-index: 3;
}

footer.footer-dark {
  margin-top: 250px;
  padding-top: 0;
  padding-bottom: 0;
  font-family: Montserrat, serif;
  color: var(--white, #FFF);
  font-size: 16px;
  background: var(--primary, #007197);
}
footer.footer-dark .footer-top .container-lg {
  padding: 24px;
}
footer.footer-dark .footer-top .container-lg .row {
  row-gap: 16px;
}
footer.footer-dark .footer-top .container-lg .row + .row {
  margin-top: 24px;
}
footer.footer-dark .footer-links.contact-links {
  display: flex;
  flex-direction: column;
  align-items: start;
}
footer.footer-dark .footer-links.contact-links a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--white, #FFF);
  text-decoration: none;
  margin-bottom: 8px;
}
footer.footer-dark .footer-links.contact-links a::before {
  content: url("../svg/icon.svg");
  height: 18px;
  width: 18px;
}
footer.footer-dark .footer-links.impressum-links {
  display: flex;
  align-items: center;
  justify-content: end;
}
footer.footer-dark .footer-links.impressum-links a:not(:last-child)::after {
  content: "|";
  margin: 0 5px;
}
footer.footer-dark .partner-civicrm {
  display: flex;
  gap: 20px;
}
footer.footer-dark .footer-bottom {
  background: var(--primary-50, #00384B);
  width: 100%;
}
footer.footer-dark .footer-bottom .row {
  padding: 16px 0;
}
footer.footer-dark .footer-bottom .row p {
  margin-bottom: 0;
}

@keyframes fish-animation {
  0% {
    transform: translate(250px, 150px) rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}
.region-sidebar-second {
  margin: 32px 0;
}
.region-sidebar-second .view-civi-hack-links .view-content {
  display: flex;
  justify-content: space-between;
}
.region-sidebar-second .view-civi-hack-links .view-content a {
  display: flex;
  width: max-content;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  text-decoration-line: none;
  color: var(--primary, #007197);
  text-align: center;
  font-family: Archivo, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
  border: 2px solid var(--primary, #007197);
}
.region-sidebar-second .view-civi-hack-links .view-content a:hover {
  background: var(--primary-80, #CCE3EA);
}
.region-sidebar-second .view-civi-hack-links .view-content .views-row:first-child a::before {
  content: url("../svg/arrow.svg");
  width: 24px;
  height: 24px;
}
.region-sidebar-second .view-civi-hack-links .view-content .views-row:last-child a::after {
  content: url("../svg/arrow.svg");
  transform: rotate(180deg);
  width: 24px;
  height: 24px;
}

@media (max-width: 768px) {
  .region-sidebar-second .view-civi-hack-links .view-content a {
    font-size: 0;
  }
}
.view img {
  width: 100%;
  height: auto;
}
.view .row {
  display: flex;
  flex-flow: column wrap;
  gap: 24px;
}
.view .row .col-xl-12 {
  padding: 24px;
  background-color: var(--white, #FFF);
  border-radius: 16px;
  box-shadow: 2px 2px 24px 0 rgba(0, 56, 75, 0.15);
}
.view .row .col-xl-12 .views-field-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 140%;
  color: var(--primary-50, #00384B);
}
.view .row .col-xl-12 .views-field-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  color: var(--primary-50, #00384B);
}
.view .row .col-xl-12 .views-field-body h2 {
  display: none; /* Hide heading as it is already displayed in the title */
}
.view .row .col-xl-12 .views-field-view-node a, .view .row .col-xl-12 .views-field-nothing a {
  display: flex;
  width: max-content;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  border: 2px solid var(--primary, #007197);
  text-decoration-line: none;
  color: var(--primary, #007197);
  text-align: center;
  font-family: Archivo, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
}
.view .row .col-xl-12 .views-field-view-node a:hover, .view .row .col-xl-12 .views-field-nothing a:hover {
  background: var(--primary-80, #CCE3EA);
}
.view nav.pager ul {
  margin: 0;
  padding: 0;
}
.view nav.pager ul a {
  display: flex;
  width: max-content;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  border: 2px solid var(--primary, #007197);
  text-decoration-line: none;
  color: var(--primary, #007197);
  text-align: center;
  font-family: Archivo, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
}
.view nav.pager ul a:hover {
  background: var(--primary-80, #CCE3EA);
}
.view nav.pager ul a[rel=prev] {
  margin-right: auto;
}
.view nav.pager ul a[rel=next] {
  margin-left: auto;
}
.view nav.pager ul a[rel=prev]::before {
  content: url("../svg/arrow.svg");
  width: 24px;
  height: 24px;
}
.view nav.pager ul a[rel=next]::after {
  content: url("../svg/arrow.svg");
  transform: rotate(180deg);
  width: 24px;
  height: 24px;
}

/* Hides pager text on mobile */
@media (max-width: 768px) {
  .view nav.pager a span {
    display: none;
  }
}
.node--type-civi-hack {
  border-radius: 16px;
  padding: 32px;
  background-color: var(--white, #FFF);
  box-shadow: 2px 2px 24px 0 rgba(0, 56, 75, 0.15);
}
.node--type-civi-hack img {
  width: 100%;
  height: auto;
}
.node--type-civi-hack .field--name-field-civi-hack-tag {
  display: flex;
}
.node--type-civi-hack .field--name-field-civi-hack-tag .field__item a {
  padding: 4px 8px;
  font-size: 14px;
  font-family: Archivo, sans-serif;
  color: var(--white, #FFF);
  text-decoration: none;
  font-weight: 600;
  background: var(--primary-50, #00384B);
  border-radius: 12px;
}

:root {
  /* Primary colors */
  --primary: #007197;
  --primary-50: #00384B;
  --primary-80: #CCE3EA;
  --primary-100: #E9F9FF;
  /* Basic colors */
  --white: #FFF;
  --complementary-100: #fff3eb;
  --complementary-80: #ffeadd;
  --complementary-50: #ff761a;
  --complementary-20: #ff4d00;
  --complementary-10: #ff3300;
  /* Shadow colors */
  --shadow-color: rgba(0, 56, 75, 0.15);
}

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Variable.ttf");
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Variable.ttf");
}
.section-link {
  text-decoration: none;
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  border: 2px solid var(--primary, #007197);
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  height: auto;
  word-break: break-word;
  hyphens: auto;
  background: linear-gradient(180deg, var(--complementary-100), var(--primary-100)) no-repeat;
}
body .dialog-off-canvas-main-canvas {
  min-height: 100vh;
}

h1 {
  font-size: 40px;
  font-family: Archivo, sans-serif;
  font-weight: 700;
  line-height: 140%;
  color: var(--primary-50, #00384B);
}

.logo {
  width: 202px;
  height: 27px;
  flex-shrink: 0;
}

.container.fullsize {
  max-width: 100%;
}

.section-link {
  text-decoration: none;
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  border: 2px solid var(--primary, #007197);
}

/* Main content section */
.content-section {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Article Base */
article:not(.node) {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* Article Default */
  /* Article Testimonials */
  /* Article Empty */
}
article:not(.node).default {
  display: inline-flex;
  padding: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
article:not(.node).default.white {
  border-radius: 24px;
  background: var(--white, #FFF);
  box-shadow: 2px 2px 24px 0 rgba(0, 56, 75, 0.15);
}
article:not(.node).default.dark {
  border-radius: 24px;
  background: var(--primary-80, #CCE3EA);
  box-shadow: 2px 2px 24px 0 rgba(0, 56, 75, 0.15);
}
article:not(.node).default .default-icon {
  margin-bottom: 16px;
}
article:not(.node).default .default-icon .icon {
  width: 150px;
  height: 150px;
}
article:not(.node).default .default-heading {
  color: var(--primary-50, #00384B);
  text-align: center;
  font-family: Archivo;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  margin-bottom: 64px;
}
article:not(.node).default .default-body {
  width: 100%;
  display: grid;
  align-items: stretch;
  gap: 40px;
  grid-template-columns: repeat(var(--column-number), 1fr);
}
@media only screen and (max-width: 992px) {
  article:not(.node).default .default-body {
    grid-template-columns: 1fr;
  }
  article:not(.node).default .default-body .icon-col {
    position: absolute;
    top: 24px;
    right: 24px;
  }
  article:not(.node).default .default-body .icon-col + .text-col .space {
    display: block;
    width: 150px;
    height: 150px;
    float: right;
    shape-outside: circle();
  }
}
article:not(.node).default .default-body.single-col .icon-col {
  position: absolute;
  top: 24px;
  right: 24px;
}
article:not(.node).default .default-body.single-col .icon-col + .text-col .space {
  display: block;
  width: 150px;
  height: 150px;
  float: right;
  shape-outside: circle();
}
article:not(.node).default section.section > div {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex: 1 0 0;
  flex-flow: column;
  height: 100%;
  margin: 0;
  position: relative;
}
article:not(.node).default section.section .text-col {
  width: 100%;
  margin-bottom: auto;
  display: inline-block;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}
article:not(.node).default section.section .text-col .space {
  display: none;
}
article:not(.node).default section.section .icon {
  margin-bottom: 16px;
}
article:not(.node).default section.section .icon img {
  display: flex;
  width: 150px;
  height: 150px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8.067px;
}
article:not(.node).default section.section .title {
  font-family: Archivo;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
article:not(.node).default section.section .text {
  color: var(--primary-50, #00384B);
  font-family: Montserrat;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
article:not(.node).testimonials {
  gap: 32px;
}
article:not(.node).testimonials .testimonials-heading {
  color: var(--primary-50, #00384B);
  text-align: center;
  font-family: Archivo;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}
article:not(.node).testimonials .testimonials-body {
  display: inline-flex;
  align-items: center;
  gap: 80px;
}
article:not(.node).testimonials .testimonials-body section.section {
  padding: 0;
}
article:not(.node).empty .empty-body {
  width: 100%;
}
article:not(.node).empty .empty-body section.section > div {
  padding: 32px 42px;
}
article:not(.node).empty .empty-body section.section .icon {
  float: left;
  margin-right: 32px;
}

/* Section Base */
section.section {
  border-radius: 24px;
  font-family: Archivo;
  /* Section Default */
  /* Section Hero */
  /* Section Quote */
}
section.section > div {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 32px;
  flex-shrink: 0;
}
section.section .icon {
  width: 150px;
  height: 150px;
}
section.section .title {
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}
section.section .text {
  font-size: 24px;
  font-style: italic;
  font-weight: 300;
  line-height: 140%;
}
section.section .link {
  margin-top: auto;
}
section.section .link a {
  display: flex;
  width: max-content;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  text-decoration-line: none;
  color: var(--primary, #007197);
  text-align: center;
  font-family: Archivo;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
}
section.section .link a:hover {
  background: var(--primary-80, #CCE3EA);
}
@media only screen and (max-width: 992px) {
  section.section > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
}
section.section.bg-blue {
  background: var(--primary, #007197);
  box-shadow: 2px 2px 24px 0 rgba(0, 56, 75, 0.15);
  color: var(--white, #FFF);
}
section.section.bg-blue .link a {
  border: 2px solid var(--white, #FFF);
  background: var(--white, #FFF);
}
section.section.bg-white {
  background: var(--white, #FFF);
  box-shadow: 2px 2px 24px 0 rgba(0, 56, 75, 0.15);
  color: var(--primary-50, #00384B);
}
section.section.bg-white .link a {
  border: 2px solid var(--primary, #007197);
}
section.section.hero .hero-title {
  color: var(--primary-50, #00384B);
  font-family: Archivo;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  margin-bottom: 16px;
}
section.section.hero .hero-text {
  color: var(--primary-50, #00384B);
  font-family: Montserrat;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
@media only screen and (min-width: 992px) {
  section.section.hero .image-col {
    order: 2;
  }
  section.section.hero .text-col {
    order: 1;
  }
}
section.section.quote .container .row::before {
  content: url("../svg/quote.svg");
  margin: 0 auto 1rem;
}
section.section.quote .field--type-string {
  margin: 0 auto;
  text-align: center;
  display: block;
}
section.section.quote .text-col {
  color: #000;
  text-align: center;
  font-family: Montserrat;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: 140%;
}
section.section.quote .label {
  color: var(--primary-50, #00384B);
  text-align: center;
  font-family: Archivo;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
section.section.quote .field-organisation {
  color: var(--primary-50, #00384B);
  text-align: center;
  font-family: Archivo;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  text-transform: uppercase;
}

/*# sourceMappingURL=style.css.map */