/* inter-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("/files/theme/font/inter/inter-v20-latin-regular.woff2")
    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-sans-600 - latin */
@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  src: url("/files/theme/font/inter/inter-v20-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-family: icomoon;
  src: url(/files/theme/font/icomoon/icomoon.eot?gpabnl);
  src:
    url(/files/theme/font/icomoon/icomoon.eot?gpabnl#iefix)
      format("embedded-opentype"),
    url(/files/theme/font/icomoon/icomoon.ttf?gpabnl) format("truetype"),
    url(/files/theme/font/icomoon/icomoon.woff?gpabnl) format("woff"),
    url(/files/theme/font/icomoon/icomoon.svg?gpabnl#icomoon) format("svg");
  font-weight: 400;
  font-style: normal;
}

/* Reset */
@layer reset, base;
@layer reset {
  /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  /* Remove default margin */
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }
  /* Set core root defaults */
  html {
    scroll-behavior: smooth;
  }
  /* Make images easier to work with */
  img,
  picture,
  svg,
  video,
  canvas {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic; /* für Alt-Texte, die bei fehlenden Bildern angezeigt werden */
  }
  /* Iframe (aus Contao CSS) */
  iframe {
    aspect-ratio: 16/9;
    max-width: 100%;
    height: 100%;
  }
  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}
/* VARIABLE */
:root {
  /* FARBEN */
  /* Farbschema */
  --primary: #2e2757;
  --secondary: #9d9e9e;
  --neutral-dark: #171137;
  --neutral-light: #c3c3c3;
  --inverse: #fafafc;
  --clr: var(--neutral-dark);
  --bg: var(--inverse);
  /* Text & Hintergrund (Modern Minimalist) */
  --color-bg: #fafafc;
  --color-text: #211f30;
  --color-text-muted: #5f616d;
  --color-white: #ffffff;
  /* UI-Elemente (z.B. feine Linien, Borders) */
  --color-border: rgba(157, 158, 158, 0.4); /* Secondary mit 40% Deckkraft */

  /* HSL-Werte für einfache Hover-Effekte */
  --color-primary-hsl: 247, 38%, 25%;
  /* ------------------------------------------------------------------------------------------------------ */
  /* TYPOGRAPHIE */
  /* Font-Size */
  --fs-100: clamp(0.89rem, 0.25cqi + 0.81rem, 1rem);
  --fs-200: clamp(1rem, 0.56cqi + 0.83rem, 1.25rem);
  --fs-300: clamp(1.13rem, 0.97cqi + 0.83rem, 1.56rem);
  --fs-400: clamp(1.27rem, 1.53cqi + 0.81rem, 1.95rem);
  --fs-500: clamp(1.42rem, 2.26cqi + 0.75rem, 2.44rem);
  --fs-600: clamp(1.6rem, 3.22cqi + 0.64rem, 3.05rem);
  --fs-700: clamp(1.8rem, 4.47cqi + 0.46rem, 3.81rem);
  --fs-800: clamp(2.03rem, 6.09cqi + 0.2rem, 4.77rem);
  --fs-900: clamp(2.28rem, 8.18cqi + -0.17rem, 5.96rem);
  --fs: var(--fs-200);
  --fs-small: var(--fs-100);
  /* ------------------------------------------------------------------------------------------------------ */
  /* Font-Weight */
  --fw: 400;
  --fw-bold: 700;
  /* ------------------------------------------------------------------------------------------------------ */
  /* BASE */
  /* Headline */
  --fs-h1: var(--fs-700);
  --fs-h2: var(--fs-600);
  --fs-h3: var(--fs-500);
  --fs-h4: var(--fs-400);
  --fs-h5: var(--fs-300);
  --fs-h6: var(--fs-200);
  /* ------------------------------------------------------------------------------------------------------ */
  /* Link */
  --clr-link: var(--secondary);
  /* ------------------------------------------------------------------------------------------------------ */
  /* LAYOUT */
  /* Header */
  --bg-header: var(--inverse);
  --clr-header: var(--clr);
  /* Footer */
  --bg-footer: var(--neutral-dark);
  --clr-footer: var(--inverse);
  /* ------------------------------------------------------------------------------------------------------ */
  /* NAVIGATION */
  /* Hauptnavigation - Variable aus Contao Core */
  --nav-color: var(--secondary);
  --nav-active-color: var(--primary);
  --nav-item-line-height: 1.5;
  --nav-mobile-background: var(--neutral-light);
  --nav-mobile-color: var(--clr);
  --nav-mobile-active-background: var(--secondary);
  --nav-mobile-active-color: var(--primary);
  --nav-mobile-active-border-color: var(--primary);
  --nav-mobile-btn-clr: var(--primary);
  --nav-mobile-separator-color: hsla(0, 0%, 100%, 0.1);
  --nav-mobile-padding: 150px 20px 20px;
  --nav-mobile-font-size: 28px;
  --nav-mobile-backdrop-height: 80px;
  --nav-submenu-background: #ffffff;
  --nav-burger-line-color: var(--primary);
  --skip-background: var(--neutral-light);
  --skip-color: var(--clr);
  --skip-focus-border-color: var(--primary);
  --svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="%23262425" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>');
}

/* Base */
@layer base {
  /* Body */
  body {
    background: var(--primary);
    color: var(--neutral-light);
    font-family: "Inter", "Arial", "Helvetica", sans-serif;
    font-size: var(--fs);
    font-weight: var(--fw);
    line-height: 1.5;
    hyphens: auto;
    min-height: 100%;
    overflow-y: scroll;
    @media print {
      background: transparent none;
      font-size: 12pt;
    }
  }
  /* alle Ãœberschriften und Inhalt der optisch wie Ãœberschrift formatiert ist */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    --_fs-headline: var(--fs, 1rem);
    color: var(--color-white);
    font-family: "Inter", "Arial", "Helvetica", sans-serif;
    font-size: var(--_fs-headline);
    font-weight: 400;
    line-height: 1.1;
    hyphens: none;
    text-wrap: balance;
    text-transform: uppercase;
    margin-block-start: 0;
    margin-block-end: 0.5em;
  }
  h1 {
    --_fs-headline: var(--fs-h1);
  }
  h2 {
    --_fs-headline: var(--fs-h2);
  }
  h3 {
    --_fs-headline: var(--fs-h3);
  }
  h4 {
    --_fs-headline: var(--fs-h4);
  }
  h5 {
    --_fs-headline: var(--fs-h5);
  }
  h6 {
    --_fs-headline: var(--fs-h6);
  }

  /* Text */
  p {
    font-size: var(--fs);
    text-wrap: pretty;
    margin-block-end: 1.5em;
  }
  /* Hervorhebungen */
  strong {
    font-weight: 700;
  }
  /* Link */
  a {
    color: var(--clr-link);
    &:is(:hover, :focus) {
      text-decoration: none;
    }
  }
  /* Address */
  address {
    font-style: normal;
  }
  /* Bilder */
  figure {
    a {
      display: block;
    }
  }
  figcaption {
    text-align: left;
    display: inline-block;
    padding-block: 1em;
    &:empty {
      display: none;
    }
  }
  /* Zitate */
  blockquote {
    font-size: var(--fs-200);
    hyphens: none;
    margin-block-end: 1em;
  }
  .text--quote-author {
    font-size: var(--fs-small);
  }
  /* Navigation allgemein */
  nav,
  .nav {
    position: relative;
    & ul {
      margin: 0;
      padding: 0;
      list-style: ""; /* besser für Screenreader */
    }
    & a {
      color: currentColor;
    }
    & a,
    & a:hover {
      text-decoration: none;
      white-space: nowrap;
    }
  }
  /*   Formulare */
  label,
  input,
  textarea,
  legend {
    display: block;
  }
}
/* COMPONENTS */
/* Artikel */
.mod_article {
  &.bg {
    padding-block: 4rem;
    color: var(--inverse);
    background-color: var(--secondary);
  }
}
/*   Abstand für alle Inhaltselemente */
[class*="content-"] {
  margin-block-end: 8.5rem;
}

/* Inhaltselement Galerie */
.content-gallery {
  & ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  & figure {
    margin: 0;
    overflow: hidden;
  }
  & figcaption {
    display: none;
  }
  & img {
    object-fit: cover;
  }
}
/* Inhaltselement Galerie */
.content-gallery {
  & ul {
    display: grid;
    gap: 0.25rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}
/* Textelemente als Boxen */
.content-text--box {
  display: flex;
  flex-flow: column;
  gap: 1rem;
  margin: 0;

  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    /*   padding-inline: 1rem; */
    margin: 0;
  }
  & figure {
    width: 100%;
    margin: 0;
    order: -1;
  }
}
/* Boxen in der Elementgruppe */
.content-element-group--box {
  display: grid;
  grid-gap: 6rem;
  /* Medium */
  @media only screen and (min-width: 48em) {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Large */
  @media only screen and (min-width: 64em) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.content-text.content-text--box {
  justify-content: center;
}

.content-text--box h3::before {
  content: "";
  display: block;
  height: 0.25rem;
  width: 7.5rem;
  background-color: #ffff00;
  margin-bottom: 2rem;
}

.content-gallery h2::before {
  content: "";
  display: block;
  height: 0.25rem;
  width: 7.5rem;
  background-color: #ffff00;
  margin-bottom: 2rem;
}

.yellow {
  color: #ffff00;
}

/* Logo */
.logo {
  max-width: 250px;
  margin: 0;
  & .content-image {
    margin: 0;
  }
}
/* Copyright */
.copyright {
  margin: 0;
}
/* NAVIGATION */
.btn-toggle-submenu {
  &::after {
    background: var(--svg) no-repeat center;
  }
}
/* Large */
@media only screen and (min-width: 64em) {
  & .navigation-main {
    & :is(a, strong) {
      font-weight: 400;
    }
  }
}

/* LAYOUT */
/* Wrapper */
#wrapper {
  display: grid;
  min-height: 100vh;
  @supports (min-height: 100dvh) {
    min-height: 100dvh;
  }
  grid-template-rows: min-content 1fr min-content;
  grid-template-areas:
    "header"
    "container"
    "footer";
}
/* Header */
header {
  background: var(--bg-header);
  color: var(--clr-header);
  grid-area: header;
  padding: 2rem 0 0.5rem 0;
  & > .inside {
    display: grid;
    column-gap: 1rem;
    grid-template-columns:
      minmax(0.1rem, 1fr) repeat(12, minmax(0, 6rem))
      minmax(0.1rem, 1fr);
    & .logo {
      grid-column: 2 / span 3;
    }
    & .nav-wrapper {
      grid-column: 5 / span 9;
      justify-self: end;
    }
  }
}

@media only screen and (max-width: 700px) {
  header {
    & > .inside {
      & .logo {
        grid-column: 2 / span 6;
      }
      & .nav-wrapper {
        grid-column: 8 / span 9;
      }
    }
  }
}

body.nav-is-desktop .nav-wrapper {
  align-items: end;
}

/* Container */
#container {
  grid-area: container;
}
/* Main */
@layer main {
  main {
    & > .inside {
      display: grid;
      column-gap: 1rem;
      grid-template-columns:
        minmax(0.1rem, 1fr) repeat(12, minmax(0, 6rem))
        minmax(0.1rem, 1fr);
      & > .mod_article {
        padding-block: 4rem;
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
        & > * {
          grid-column: 2 / -2;
        }
      }
    }
  }
}
/* Footer */
footer {
  background: var(--neutral-dark);
  color: var(--neutral-light);
  padding-block: 2rem;
  grid-area: footer;
  & > .inside {
    display: grid;
    column-gap: 1rem;
    grid-template-columns:
      minmax(0.1rem, 1fr) repeat(12, minmax(0, 6rem))
      minmax(0.1rem, 1fr);
    & .copyright {
      grid-column: 2 / -2;
    }
  }
}

.footer-element-group--box {
  display: grid;
  grid-gap: 1rem;
  /* Medium */
  @media only screen and (min-width: 48em) {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Large */
  @media only screen and (min-width: 64em) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.footer--box {
  display: flex;
  flex-flow: column;
  gap: 1rem;
  margin: 0;
}

/* UTILITIES */
/* nur fuer Screenreader und Tastaturnutzer sichtbar */
.invisible:not(:focus):not(:active) {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  white-space: nowrap;
  clip-path: inset(50%);
}
/* nur fuer Screenreader */
.hide {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  white-space: nowrap;
  clip-path: inset(50%);
  & ul {
    margin: 0;
  }
}
.bg {
  padding-block: 2rem;
  & a {
    color: currentColor;
    &:visited {
      color: currentColor;
    }
    &:is(:hover, :focus, :active) {
      text-decoration: none;
    }
  }
  &.fullwidth {
    padding-inline: 0;
  }
}
.bg--primary {
  background: var(--primary);
  color: var(--inverse);
}
.bg--secondary {
  background: var(--secondary);
  color: var(--inverse);
}
.bg--light {
  background: var(--neutral-light);
  color: var(--clr);
}
.bg--dark {
  background: var(--neutral-dark);
  color: var(--inverse);
}
/* Fullwidth */
.fullwidth {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  & > * {
    grid-column: 2 / -2;
  }
}

/* hero style */

.mod_article.hero,
.mod_article.hero-klein {
  max-width: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  margin-top: 0.2rem;
  min-height: 90vh;
  position: relative;
  padding: 0;
  z-index: 0;
}
.mod_article.hero-klein {
  min-height: 40vh;
}

.hero-image figure,
.hero-klein figure {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.hero img,
.hero-klein img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.hero-text,
.hero-klein {
  grid-row: 2;
  grid-column: 7 / -2;
  font-size: 1.4rem;
}

.hero-text .content-text {
  padding: 2rem;
  border-radius: 2rem;
  background-color: var(--primary);
}

.hero-text .content-text h1 {
  font-size: var(--fs-600);
}

.hero-text .content-text h2 {
  font-size: var(--fs-400);
}

.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.icon:before {
  font-family: "icomoon";
  margin-right: 1em;
  color: #ececec;
}
.more-header a:hover::before {
  font-family: "icomoon";
  color: #383838;
}

.icons {
  font-family: "icomoon";
  color: #e2e2e2;
}
.icon-bullhorn:before {
  content: "\e91a";
}
.icon-book:before {
  content: "\e91f";
}
.icon-books:before {
  content: "\e920";
}
.icon-files-empty:before {
  content: "\e925";
}
.icon-stack:before {
  content: "\e92e";
}
.icon-lifebuoy:before {
  content: "\e941";
}
.icon-phone:before {
  content: "\e942";
}
.icon-location:before {
  content: "\e947";
}
.icon-calendar:before {
  content: "\e953";
}
.icon-printer:before {
  content: "\e954";
}
.icon-keyboard:before {
  content: "\e955";
}
.icon-display:before {
  content: "\e956";
}
.icon-drawer2:before {
  content: "\e95d";
}
.icon-database:before {
  content: "\e964";
}
.icon-quotes-left:before {
  content: "\e977";
}
.icon-quotes-right:before {
  content: "\e978";
}
.icon-wrench:before {
  content: "\e991";
}
.icon-cogs:before {
  content: "\e995";
}
.icon-hammer:before {
  content: "\e996";
}
.icon-aid-kit:before {
  content: "\e998";
}
.icon-road:before {
  content: "\e9b1";
}
.icon-shield:before {
  content: "\e9b4";
}
.icon-checkmark:before {
  content: "\ea10";
}
.icon-arrow-up:before {
  content: "\ea32";
}
.icon-arrow-down:before {
  content: "\ea36";
}
.icon-mail:before {
  content: "\ea83";
}
.icon-menu:before {
  content: "\e9bd";
}