/* reset by conPassione gmbh */
/* cp_base:constants */
@layer basestyles {
  /* Baseline Colors */
  /* as css constants (light theme) */
  :root {
    --clr-bw-000: oklch(0 0 0);
    --clr-bw-010: oklch(0.1 0 0);
    --clr-bw-020: oklch(0.2 0 0);
    --clr-bw-030: oklch(0.3 0 0);
    --clr-bw-040: oklch(0.4 0 0);
    --clr-bw-050: oklch(0.5 0 0);
    --clr-bw-060: oklch(0.6 0 0);
    --clr-bw-070: oklch(0.7 0 0);
    --clr-bw-080: oklch(0.8 0 0);
    --clr-bw-090: oklch(0.9 0 0);
    --clr-bw-095: oklch(0.95 0 0);
    --clr-bw-100: oklch(1 0 0);
    --clr-success: oklch(0.5 0.12 150);
    --clr-info: oklch(0.5 0.12 220);
    --clr-error: oklch(0.5 0.12 0);
    --clr-brand--primary: oklch(0.6 0.061 62);
    --clr-brand--secondary: oklch(0.5 0.03 149);
    --clr-brand--tertiary: oklch(0.5 0.07 231);
    --clr-brand--quaternary: oklch(0.5 0.13 318);
    --clr-branddimmed--primary: oklch(from var(--clr-brand--primary) calc(l * .8) calc(c * .8) h);
    --clr-branddimmed--secondary: oklch(from var(--clr-brand--secondary) calc(l * .8) calc(c * .8) h);
    --clr-branddimmed--tertiary: oklch(from var(--clr-brand--tertiary) calc(l * .8) calc(c * .8) h);
    --clr-branddimmed--quaternary: oklch(from var(--clr-brand--quaternary) calc(l * .8) calc(c * .8) h);
    /* ============================ */
    /* Color Theme light            */
    /* ============================ */
    /* application colors */
    --clr-text: var(--clr-bw-030);
    --clr-background: var(--clr-bw-100);
    --clr-h: var(--clr-bw-050);
    --clr-h--border: var(--clr-brand--primary);
    --clr-accent: var(--clr-brand--primary);
    /* element colors */
    --clr-list--marker: var(--clr-brand--primary);
    --clr-code--bg: var(--clr-bw-060);
    --clr-code--bc: var(--clr-bw-030);
    --clr-input: var(--clr-text);
    --clr-input--bg: var(--clr-bw-095);
    /* buttons */
    --clr-primarybtn--active: var(--clr-bw-090);
    --clr-primarybtn--hover: var(--clr-bw-090);
    --clr-primarybtnbg--active: var(--clr-brand--primary);
    --clr-primarybtnbg--hover: var(--clr-bw-050);
    --clr-primarybtnbg--disabled: oklch(from var(--clr-primarybtn--active) calc(l * .75) c h);
    --clr-primarybtn--border: transparent;
    --clr-secondarybtn--active: var(--clr-bw-090);
    --clr-secondarybtnbg--active: var(--clr-brand--secondary);
    --clr-secondarybtnbg--hover: var(--clr-bw-050);
    --clr-secondarybtnbg--disabled: oklch(from var(--clr-secondarybtnbg--active) calc(l * .75) c h);
    --clr-secondarybtn--border: transparent;
    /* section colors */
    --clr-headerbg: var(--clr-bw-070);
    --clr-background-accent: var(--clr-bw-090);
    --clr-background-brandcolor: oklch(from var(--clr-brand--primary) calc(l * 1.4) calc(c * 0.5) h);
    --clr-footer-text: var(--clr-bw-030);
    --clr-footerbg: var(--clr-bw-070);
    --clr-footer--border: var(--clr-brand--primary);
    /* menu colors */
    --clr-mnu: var(--clr-bw-100);
    --clr-mnu--active: var(--clr-bw-100);
    --clr-mnu--hover: var(--clr-bw-100);
    --clr-mnubg: var(--clr-headerbg);
    --clr-mnubg--active: var(--clr-bw-040);
    --clr-mnubg--hover: var(--clr-brand--primary);
    --clr-mnumobile: var(--clr-bw-000);
    --clr-mnumobile--active: var(--clr-bw-100);
    --clr-mnumobile--hover: var(--clr-bw-100);
    --clr-mnumobilebg: var(--clr-headerbg);
    --clr-mnumobilebg--active: var(--clr-bw-040);
    --clr-mnumobilebg--hover: var(--clr-brand--primary);
    /* logo */
    --clr-logo: var(--clr-bw-000);
    --clr-logobg: var(--clr-bw-080);
    /* cards */
    --clr-card--accent: var(--clr-brand--primary);
    /* rte */
    --clr-ckeditor--text: var(--clr-bw-020);
    --clr-ckeditor--bg: var(--clr-bw-100);
    --clr-ckeditor--endline: var(--clr-info);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      /* buttons */
      --clr-primarybtn--active: var(--clr-bw-075);
      --clr-primarybtnbg--active: var(--clr-brand--primary);
      --clr-primarybtn--disabled: oklch(from var(--clr-primarybtn--active) calc(l + .5) calc(c * 0.5) h);
      --clr-input: var(--clr-bw-020);
      --clr-input--bg: var(--clr-bw-070);
      /* typographic colors */
      --clr-text: var(--clr-bw-090);
      --clr-h: var(--clr-bw-080);
      --clr-background: var(--clr-bw-030);
      --clr-background-accent: var(--clr-bw-040);
      --clr-background-brandcolor: oklch(from var(--clr-brand--primary) calc(l * .8) calc(c * 0.5) h);
      --clr-footer-text: var(--clr-bw-090);
      --clr-footerbg: var(--clr-bw-040);
      /* rte */
      --clr-ckeditor--text: var(--clr-bw-080);
      --clr-ckeditor--bg: var(--clr-bw-020);
      --clr-ckeditor--endline: var(--clr-info);
    }
  }
}
/* metrics */
@layer basestyles {
  :root {
    --gutter: 1rem;
    --container-gutter: 2rem;
    --flow-spacer: 1em;
    --border-radius: 5px;
    --border-width: 1px;
    --border-style: solid;
    --mediasize--small: 480px;
    --mediasize--halfmedium: 720px;
    --mediasize--medium: 960px;
    --mediasize--large: 1200px;
    --blocksize--small: 200px;
    --blocksize--medium: 360px;
    --blocksize--big: 480px;
  }
}
/* fonts */
@layer basestyles {
  @font-face {
    font-family: "Symbols";
    src: url("../Fonts/LigatureSymbols/LigatureSymbols-2.11.woff") format("woff");
    font-weight: normal;
    font-style: normal;
  }
  /* =============================== */
  :root {
    /* fontfaces */
    --ff: system-ui, sans-serif;
    --ff-condensed: system-ui, sans-serif;
    --ff-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
    --ff-h: system-ui, sans-serif;
    --ff-nav: system-ui, sans-serif;
    --ff-mono: "Nimbus Mono PS", "Courier New", monospace;
    --ff-symbol: "Symbols";
    /* font weight */
    --fw-regular: 300;
    --fw-mono: 400;
    --fw-bold: 700;
    /* font size */
    --fs-fix--small: 16px;
    --fs-fix--normal: 18px;
    --fs-fix--big: 24px;
    /* line height */
    --lh-regular: 1.5;
    --lh-small: 1.2;
    --lh-h: var(--lh-small);
    /* regular font */
    --fs-regular: clamp(var(--fs-fix--normal), (100vw - 960px) / 100 + var(--fs-fix--normal), var(--fs-fix--big));
    --fs-big: calc(var(--fs-regular) * 1.125);
    --fs-small: calc(var(--fs-regular) * 0.875);
    font-size: var(--fs-regular);
    line-height: var(--lh-regular);
  }
  .fs-big {
    font-size: var(--fs-big);
    line-height: 1.8;
  }
  .fs-small {
    font-size: var(--fs-small);
  }
  .iconfont {
    font-family: var(--ff-symbol), sans-serif;
    font-feature-settings: "liga" 1, "dlig" 1;
    content: "";
    padding-inline-start: 0.1em;
    padding-inline-end: 0.2em;
  }
}
/* reset by conPassione gmbh */
@layer basestyles {
  /* reset */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  /* Prevent font size inflation*/
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    color-scheme: dark light;
    /*   and set standard styling */
    color: var(--clr-text);
    background-color: var(--clr-background);
    font-family: var(--ff), sans-serif;
    font-weight: var(--fw-regular);
    display: block;
    min-height: 100svh;
  }
  /*   html:focus-within {
      scroll-behavior: smooth;
    } */
  body {
    /* overflow-y:     scroll; */
    min-height: 100svh;
    position: relative;
    z-index: 0;
  }
  header, footer, nav, main, aside, title, div, figure, p, table, textarea {
    display: block;
  }
  input, textarea, button, select {
    font: inherit;
  }
  hr {
    border-style: solid;
    border-width: 1px 0 0;
    color: inherit;
    height: 0;
    overflow: visible;
  }
  /* @docs
  label: Responsive Embeds

      note: |
          1. Block display is usually what we want
          2. The `vertical-align` removes strange space-below in case authors overwrite the display value
          3. Responsive by default
          4. Audio without `[controls]` remains hidden by default

  category: embedded elements
  */
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
    max-width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 1rem;
    height: auto;
  }
  /* @docs
  label: Audio Width

      note: |
          There is no good reason elements default to 300px,
          and audio files are unlikely to come with a width attribute.

  category: embedded elements
  */
  audio {
    width: 100%;
  }
  audio:not([controls]) {
    display: none;
  }
  source {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      -webkit-animation-iteration-count: 1 !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  .visually-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
  }
}
/* link */
@layer basestyles {
  a:not([class]), a, .vimeo-link--icon, .youtube-link--icon, .github-link--icon, .pinterest-link--icon, .linkedin-link--icon, .insta-link--icon, .fb-link--icon, .mail-link--icon, .phone-link--icon, .url-link--icon, .folder-link--icon, .file-link--icon, .page-link--icon {
    color: currentColor;
    background-color: inherit;
    /*text-decoration:  none;*/
    text-decoration-color: var(--clr-brand--primary);
    text-decoration-skip-ink: auto;
    text-decoration-style: dotted;
  }
  a:focus-visible, .vimeo-link--icon:focus-visible, .youtube-link--icon:focus-visible, .github-link--icon:focus-visible, .pinterest-link--icon:focus-visible, .linkedin-link--icon:focus-visible, .insta-link--icon:focus-visible, .fb-link--icon:focus-visible, .mail-link--icon:focus-visible, .phone-link--icon:focus-visible, .url-link--icon:focus-visible, .folder-link--icon:focus-visible, .file-link--icon:focus-visible, .page-link--icon:focus-visible {
    /*text-decoration: none;*/
    outline: 0;
  }
  .vimeo-link--icon:before, .youtube-link--icon:before, .github-link--icon:before, .pinterest-link--icon:before, .linkedin-link--icon:before, .insta-link--icon:before, .fb-link--icon:before, .mail-link--icon:before, .phone-link--icon:before, .url-link--icon:before, .folder-link--icon:before, .file-link--icon:before, .page-link--icon:before {
    font-family: var(--ff-symbol), sans-serif;
    font-feature-settings: "liga" 1, "dlig" 1;
    content: "";
    padding-inline-start: 0.1em;
    padding-inline-end: 0.25em;
  }
  a:focus-visible {
    outline: 2px solid var(--clr-bw-070);
  }
  a:not([class]) {
    text-decoration-skip-ink: auto;
  }
  .page-link--icon {
    hyphens: auto;
  }
  .page-link--icon:before {
    content: "right";
  }
  .page-link--icon:focus-visible {
    outline: 2px solid var(--clr-bw-070);
  }
  .file-link--icon {
    hyphens: auto;
  }
  .file-link--icon:before {
    content: "download";
  }
  .file-link--icon:focus-visible {
    outline: 2px solid var(--clr-bw-070);
  }
  .folder-link--icon {
    hyphens: auto;
  }
  .folder-link--icon:before {
    content: "folder";
  }
  .folder-link--icon:focus-visible {
    outline: 2px solid var(--clr-bw-070);
  }
  .url-link--icon {
    hyphens: auto;
  }
  .url-link--icon:before {
    content: "external";
  }
  .url-link--icon:focus-visible {
    outline: 2px solid var(--clr-bw-070);
  }
  .phone-link--icon:before {
    content: "phone";
  }
  .phone-link--icon:focus-visible {
    outline: 2px solid var(--clr-bw-070);
  }
  .mail-link--icon:before {
    content: "mail";
  }
  .mail-link--icon:focus-visible {
    outline: 2px solid var(--clr-bw-070);
  }
  .fb-link--icon:before {
    content: "facebook";
  }
  .fb-link--icon:focus-visible {
    outline: 2px solid var(--clr-bw-070);
  }
  .insta-link--icon:before {
    content: "instagram";
  }
  .insta-link--icon:focus-visible {
    outline: 2px solid var(--clr-bw-070);
  }
  .linkedin-link--icon:before {
    content: "linkedin";
  }
  .linkedin-link--icon:focus-visible {
    outline: 2px solid var(--clr-bw-070);
  }
  .pinterest-link--icon:before {
    content: "pinterest";
  }
  .pinterest-link--icon:focus-visible {
    outline: 2px solid var(--clr-bw-070);
  }
  .github-link--icon:before {
    content: "github";
  }
  .github-link--icon:focus-visible {
    outline: 2px solid var(--clr-bw-070);
  }
  .youtube-link--icon:before {
    content: "youtube";
  }
  .youtube-link--icon:focus-visible {
    outline: 2px solid var(--clr-bw-070);
  }
  .vimeo-link--icon:before {
    content: "vimeo";
  }
  .vimeo-link--icon:focus-visible {
    outline: 2px solid var(--clr-bw-070);
  }
}
/* list */
@layer basestyles {
  /* reset */
  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  ul[role=list],
  ol[role=list] {
    list-style: none;
  }
  ol,
  ul {
    list-style-type: disc;
    padding-inline-start: 1em;
  }
  ul > ::marker {
    color: var(--clr-list--marker, currentColor);
  }
}
/* images */
@layer basestyles {
  /* @docs
  label: Responsive Images

      note: |
          These new elements display inline by default,
          but that's not the expected behavior for either one.
          This can interfere with proper layout and aspect-ratio handling.

          1. Remove the unnecessary wrapping `picture`, while maintaining contents
          2. Source elements have nothing to display, so we hide them entirely

  category: embedded elements
  */
  picture {
    display: contents;
  }
  /* @docs
  label: Aspect Ratios

      note: |
          Maintain intrinsic aspect ratios when `max-width` is applied.
          `iframe`, `embed`, and `object` are also embedded,
          but have no intrinsic ratio,
          so their `height` needs to be set explicitly.

  category: embedded elements
  */
  figure {
    position: relative;
  }
  figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.25em;
    font-size: var(--fs-small);
    backdrop-filter: blur(0.5em);
    background-color: rgba(var(--clr-bw-100)/0.4);
  }
  .cp-image {
    container-type: inline-size;
  }
  .cp-image:not(:last-child) {
    margin-block-end: calc(var(--gutter) * 2);
  }
  .gallery {
    --grid-min-col-size: 250px;
    display: grid;
    gap: var(--gutter);
  }
  .gallery.columns1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .gallery.columns2 {
    grid-template-columns: repeat(1, 1fr);
  }
  @container (width > 480px) {
    .gallery.columns2 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .gallery.columns3 {
    grid-template-columns: repeat(1, 1fr);
  }
  @container (width > 480px) {
    .gallery.columns3 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @container (width > 740px) {
    .gallery.columns3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .gallery.columns4 {
    grid-template-columns: repeat(1, 1fr);
  }
  @container (width > 480px) {
    .gallery.columns4 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @container (width > 740px) {
    .gallery.columns4 {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @container (width > 960px) {
    .gallery.columns4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .gallery.columnssized1 {
    grid-template-columns: repeat(1, minmax(min-content, var(--gallery-imagewidth)));
  }
  .gallery.columnssized2 {
    grid-template-columns: repeat(1, minmax(min-content, var(--gallery-imagewidth)));
  }
  @container (width > 480px) {
    .gallery.columnssized2 {
      grid-template-columns: repeat(2, minmax(min-content, var(--gallery-imagewidth)));
    }
  }
  .gallery.columnssized3 {
    grid-template-columns: repeat(1, minmax(min-content, var(--gallery-imagewidth)));
  }
  @container (width > 480px) {
    .gallery.columnssized3 {
      grid-template-columns: repeat(2, minmax(min-content, var(--gallery-imagewidth)));
    }
  }
  @container (width > 740px) {
    .gallery.columnssized3 {
      grid-template-columns: repeat(3, minmax(min-content, var(--gallery-imagewidth)));
    }
  }
  .gallery.columnssized4 {
    grid-template-columns: repeat(1, minmax(min-content, var(--gallery-imagewidth)));
  }
  @container (width > 480px) {
    .gallery.columnssized4 {
      grid-template-columns: repeat(2, minmax(min-content, var(--gallery-imagewidth)));
    }
  }
  @container (width > 740px) {
    .gallery.columnssized4 {
      grid-template-columns: repeat(3, minmax(min-content, var(--gallery-imagewidth)));
    }
  }
  @container (width > 960px) {
    .gallery.columnssized4 {
      grid-template-columns: repeat(4, minmax(min-content, var(--gallery-imagewidth)));
    }
  }
  .gallery.orientation0 {
    justify-content: center;
  }
  .gallery.orientation1 {
    justify-content: end;
  }
  .gallery.orientation2 {
    justify-content: start;
  }
}
.mfp-zoom-in {
  /* start state */
  /* animate in */
  /* animate out */
}
.mfp-zoom-in .mfp-with-anim {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease-in-out;
}
.mfp-zoom-in.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
  opacity: 0;
  transform: scale(0.8);
}
.mfp-zoom-in.mfp-removing.mfp-bg {
  opacity: 0;
}

/* headings */
@layer basestyles {
  /* reset */
  h1, h2, h3, h4, h5, h6 {
    font-size: var(--fs-regular);
    line-height: var(--lh-h);
    font-family: var(--ff-h), sans-serif;
    font-weight: var(--fw-regular);
    margin: 0;
    hyphens: auto;
  }
  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    text-decoration: none;
  }
  .h1, .h2, .h3, .h4, .h5, .h6 {
    text-wrap: balance;
    color: var(--clr-h);
  }
  .h1-font,
  .h1 {
    font-size: clamp(2.5rem, 4vw, 4rem);
  }
  .h1 {
    padding-block: 0.25em;
    margin-block-end: 0.25em;
    color: var(--clr-bw-090);
  }
  .h2-font,
  .h2 {
    font-size: clamp(2rem, 3vw, 3rem);
  }
  .h2 {
    margin-block-end: 0.5em;
    color: var(--clr-h);
  }
  .h3-font,
  .h4-font,
  .h3,
  .h4 {
    font-size: clamp(1.1rem, 1.75vw, 2rem);
  }
  .h3,
  .h4 {
    margin-block-end: 0.5em;
  }
  .h3 {
    color: var(--clr-h);
  }
}
/* button */
@layer basestyles {
  button[type=submit],
  .button {
    /* default colors for primary button */
    --_clr-btn: var(--clr-btn, var(--clr-primarybtn--active));
    --_clr-btnbg: var(--clr-btnbg, var(--clr-primarybtnbg--active));
    --_clr-btn--hover: var(--clr-btn--hover, var(--clr-primarybtn--hover));
    --_clr-btnbg--hover: var(--clr-btnbg--hover, var(--clr-primarybtnbg--hover));
    --_btn-font-size: inherit;
    color: var(--_clr-btn);
    background-color: var(--_clr-btnbg);
    border-radius: var(--btn-border-radius), 0;
    font-size: var(--_btn-font-size);
    display: inline-block;
    margin-inline-end: 0.25rem;
    padding: 0.5em 1em;
  }
  button[type=submit]:hover, button[type=submit]:focus,
  .button:hover,
  .button:focus {
    color: var(--_clr-btn--hover);
    background-color: var(--_clr-btnbg--hover);
  }
  button:focus-visible,
  .button:focus-visible {
    outline: 2px solid var(--clr-bw-070);
  }
  .button--small {
    --_font-size: var(--fs-small);
  }
  .button-secondary {
    --_clr-btn: var(---clr-secondarybtn--active);
    --_clr-btnbg: var(--clr-secondarybtnbg--active);
    --_clr-btn--hover: var(--clr-secondarybtn--hover);
    --_clr-btnbg--hover: var(--clr-secondarybtnbg--hover);
  }
}
@layer basestyles {
  p {
    max-width: 900ch;
    text-wrap: pretty;
    orphans: inherit;
    /* hyphens: auto;*/
  }
  .cp-text:not(:last-child) {
    margin-block-end: calc(var(--gutter) * 2);
  }
  .text-center {
    text-align: center;
  }
  .text-end {
    text-align: end;
  }
  .text-justify {
    text-align: justify;
  }
  .cp-zitat {
    font-size: 120%;
    color: var(--clr-accent);
    padding-block: var(--gutter);
  }
  p + h1 {
    margin-block-start: calc(var(--gutter) * 2);
  }
  p + h2,
  p + h3,
  p + h4 {
    margin-block-start: calc(var(--gutter) * 1.5);
  }
  pre {
    font-family: var(--ff-mono), monospace;
    font-size: 1rem;
    line-height: var(--lh-small);
  }
  pre:has(code),
  pre[data-language] {
    padding: 1em;
    background-color: var(--clr-code--bg);
    border: 1px solid var(--clr-code--bc);
    line-height: var(--lh-small);
  }
  /* pre:has(.cpcss),
  pre[data-language="CSS"] {
    --code-bg: var(--clr-text);
    --code-bc: var(--clr-bw-090);
  } */
  kbd {
    font-family: var(--ff-mono), monospace;
    background: inherit;
    color: inherit;
  }
  b,
  strong {
    font-weight: 700;
  }
  i {
    font-style: italic;
  }
  .cp-accent {
    color: var(--clr-accent);
  }
  .cp-bold {
    font-weight: 700;
  }
  i.icon {
    font-family: var(--ff-symbol), sans-serif;
    font-size: inherit;
    font-style: normal;
    color: inherit;
  }
}
@layer basestyles {
  .form-text {
    font-size: calc(var(--fs-small) * 0.8);
  }
  .form-control {
    padding: 0.25em;
    color: var(--clr-input);
    background-color: var(--clr-input--bg);
  }
  .error {
    color: var(--clr-error);
  }
  input, textarea, select {
    width: 100%;
    border: none;
  }
  input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 1px solid var(--clr-brand--primary);
  }
  .form-check input,
  .form-check-label input {
    margin-inline-end: 0.25em;
    height: 0.9em;
    width: 1em;
    accent-color: var(--clr-primarybtnbg--active);
  }
  .form-check-input {
    width: auto;
    padding-inline-end: 0.25em;
  }
  input:not(:placeholder-shown):valid {
    outline-color: var(--clr-success);
  }
  input:not(:placeholder-shown):invalid {
    outline-color: var(--clr-error);
  }
  .form-group:has(input[readonly=readonly]) .form-control {
    padding-inline: 0;
    background-color: transparent;
    color: var(--clr-brand--primary);
    font-weight: var(--fw-bold);
  }
  .form-group:has(input[hidden=hidden]) {
    padding: 0;
    display: none;
  }
  .form-group:has(input[hidden=hidden]) .form-control {
    height: 0;
  }
}
/* sections (typo3-containers) */
@layer basestyles {
  section {
    padding-block: calc(var(--gutter) * 2);
  }
  .section-hero,
  .section-hero-small {
    padding: 0;
    position: relative;
    align-content: start;
  }
  .section-hero img,
  .section-hero-small img {
    object-fit: cover;
    object-position: center;
    min-height: 350px;
    width: 100%;
  }
  .section-hero .hero,
  .section-hero .hero-small,
  .section-hero-small .hero,
  .section-hero-small .hero-small {
    grid-row: 1/-1;
  }
  .section-hero .hero-overlay,
  .section-hero .hero-small-overlay,
  .section-hero-small .hero-overlay,
  .section-hero-small .hero-small-overlay {
    grid-column: content;
    grid-row: 1/-1;
    display: grid;
    align-content: end;
  }
  .section-hero .hero-overlay .h1--pagetitle,
  .section-hero .hero-small-overlay .h1--pagetitle,
  .section-hero-small .hero-overlay .h1--pagetitle,
  .section-hero-small .hero-small-overlay .h1--pagetitle {
    z-index: 2;
    background-color: oklch(from var(--clr-brand--primary) l c h/0.5);
    backdrop-filter: blur(0.5rem);
    padding-inline: 1rem;
    margin-right: auto;
  }
  .section-hero img {
    height: 60svh;
  }
  .section-hero-small img {
    height: 30svh;
  }
  .cp-1col {
    display: block;
  }
  .cp-2cols5050--content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--container-gutter);
  }
  @container (width < 720px) {
    .cp-2cols5050--content {
      grid-template-columns: 1fr;
    }
  }
  .cp-2cols3366--content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--container-gutter);
  }
  .cp-2cols3366--content .cp-col202 {
    grid-column: 2/span 2;
  }
  @container (width < 960px) {
    .cp-2cols3366--content {
      grid-template-columns: 1fr;
    }
    .cp-2cols3366--content .cp-col202 {
      grid-column: 1/1;
    }
  }
  .cp-2cols6633--content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--container-gutter);
  }
  .cp-2cols6633--content .cp-col201 {
    grid-column: 1/span 2;
  }
  @container (width < 960px) {
    .cp-2cols6633--content {
      grid-template-columns: 1fr;
    }
    .cp-2cols6633--content .cp-col201 {
      grid-column: 1/1;
    }
  }
  .cp-3cols--content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--container-gutter);
  }
  @container (width < 960px) {
    .cp-3cols--content {
      grid-template-columns: 1fr;
    }
  }
  .accent,
  .breakout-accent,
  .full-width-accent {
    background-color: var(--clr-background-accent);
  }
  .brandcolor,
  .breakout-brandcolor,
  .full-width-brandcolor {
    background-color: var(--clr-background-brandcolor);
  }
}
/* navmainmenu */
@layer basestyles {
  /* main navigation */
  .nav-main {
    display: none;
    margin-inline-end: var(--gutter);
    font-size: var(--fs-regular--big);
  }
  .nav-main a {
    text-decoration: none;
  }
  .menu-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    color: var(--clr-mnu);
    background-color: var(--clr-mnubg);
  }
  .menu-items > li.active {
    color: var(--clr-mnu--active);
    background-color: var(--clr-mnubg--active);
  }
  .menu-items > li a.menu-item {
    display: block;
    padding: 0.5em;
  }
  .menu-items > li a.menu-item:hover,
  .menu-items > li a.menu-item:focus {
    color: var(--clr-mnu--hover);
    background-color: var(--clr-mnubg--hover);
  }
  .menu-items > li a.menu-item:focus-visible {
    outline: 2px solid var(--clr-bw-070);
    background-color: var(--clr-mnubg--hover);
  }
  .cta-menu {
    display: none;
  }
  .cta-menu a {
    text-decoration: none;
  }
  .cta-menu button:first-child {
    margin-inline-start: 0;
  }
  .cta-menu button:last-child {
    margin-inline-end: 0;
  }
  @media (width > 960px) {
    .nav-main {
      display: block;
    }
    .cta-menu {
      display: block;
    }
  }
  /* mobile navigation */
  .mobilemenu {
    --_bar-width: var(--hamburger--bar-width, 60px);
    --_bar-height: var(--hamburger--bar-height, 8px);
    display: block;
    margin-inline: var(--gutter);
  }
  .mobilemenu a {
    text-decoration: none;
  }
  .no-inline-end-margin {
    margin-inline-end: 0;
  }
  .hamburger-menu {
    cursor: pointer;
  }
  .hamburger-menu svg {
    width: var(--_bar-width);
    aspect-ratio: 1;
    --button-color: var(--clr-mnu);
    background-color: var(--clr-mnubg);
  }
  .hamburger-menu svg:hover {
    --button-color: var(--clr-mnu--hover);
    background-color: var(--clr-mnubg--hover);
  }
  .hamburger-menu svg .line {
    height: var(--_bar-height);
    transition: y 300ms ease-in 300ms, rotate 300ms ease-in, opacity 0ms 300ms;
    transform-origin: center;
  }
  .hamburger:checked ~ .hamburger-menu .line {
    transition: y 300ms ease-in, rotate 300ms ease-in 300ms, opacity 0ms 300ms;
  }
  .hamburger:checked ~ .hamburger-menu .top {
    y: 45px;
    rotate: 45deg;
  }
  .hamburger:checked ~ .hamburger-menu .middle {
    opacity: 0;
  }
  .hamburger:checked ~ .hamburger-menu .bottom {
    y: 45px;
    rotate: -45deg;
  }
  .hamburger-overlay {
    position: absolute;
    display: none;
    top: 2.5rem;
    left: -50vw;
    width: 200vw;
    height: 100vh;
    background: transparent;
    z-index: 98;
    cursor: pointer;
  }
  .nav-mobile {
    transition: visibility 360ms ease-in 100ms, opacity 300ms ease-in 100ms, transform 360ms ease-in;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10%);
    position: absolute;
    z-index: 100;
    top: 2.5rem;
    right: 5%;
    width: 90%;
    padding: var(--gutter);
    color: var(--clr-mnumobile);
    background-color: oklch(from var(--clr-mnumobilebg) l c h/0.6);
    backdrop-filter: blur(1rem);
  }
  .mlevel-1 {
    list-style: none;
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
    flex-direction: row;
    gap: var(--gutter);
    align-content: flex-start;
    background-color: transparent;
    padding: 0;
    max-height: calc(100svh - 5rem);
    overflow-y: scroll;
  }
  .mlevel-2,
  .mlevel-3 {
    list-style: none;
    padding: 0;
  }
  .current:is(.mlevel-01, .mlevel-02, .mlevel-03) > a {
    color: var(--clr-mnumobile--active);
    background-color: var(--clr-mnumobilebg--active);
  }
  .mlevel-01 {
    flex: 250px 1 1;
    display: inline-block;
    background-color: var(--clr-mnumobilebg);
  }
  .mlevel-02,
  .mlevel-03 {
    display: block;
    font-size: var(--fs-small);
  }
  .mlevel-02 {
    padding-inline-start: var(--gutter);
  }
  .mlevel-03 {
    padding-inline-start: calc(var(--gutter) * 2);
  }
  a.mmenu-item {
    display: block;
    padding: 0.5em;
    width: 100%;
  }
  a.mmenu-item:hover,
  a.mmenu-item:focus {
    color: var(--clr-mnumobile--hover);
    background-color: var(--clr-mnumobilebg--hover);
  }
  a.mmenu-item:focus-visible {
    outline: 2px solid var(--clr-bw-070);
    color: var(--clr-mnumobile--hover);
    background-color: var(--clr-mnumobilebg--hover);
  }
  .hamburger:checked ~ .nav-mobile {
    transition: visibility 300ms ease-in, opacity 300ms ease-in, transform 250ms ease-in;
    visibility: visible;
    opacity: 1;
    transform: translateY(0%);
  }
  .hamburger:checked ~ .hamburger-menu svg {
    --button-color: var(--clr-mnu--hover);
    background-color: var(--clr-mnubg--hover);
  }
  .hamburger:focus ~ .hamburger-menu svg {
    --button-color: var(--clr-mnu--hover);
    background-color: var(--clr-mnubg--hover);
  }
  .hamburger:focus-visible ~ .hamburger-menu svg {
    outline: 2px solid var(--clr-bw-070);
    --button-color: var(--clr-mnu--hover);
    background-color: var(--clr-mnubg--hover);
  }
  .hamburger:checked ~ .hamburger-overlay {
    display: block;
  }
  /* language menu */
  .lan-menu {
    display: block;
  }
  .lan-menu a {
    text-decoration: none;
  }
  .lan-menu button:first-child {
    margin-inline-start: 0;
  }
  .lan-menu button:last-child {
    margin-inline-end: 0;
  }
  .language-menu {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
  }
  .lmenu {
    display: block;
    border-inline-start: 1px solid var(--clr-mnu);
    color: var(--clr-mnu);
    background-color: var(--clr-mnubg);
  }
  .lmenu a {
    display: block;
    padding: 0.5em;
  }
  .lmenu:last-child {
    border-inline-end: 1px solid var(--clr-mnu);
  }
  .lmenu.active {
    color: var(--clr-mnu--active);
    background-color: var(--clr-mnubg--active);
  }
  .lmenu .text-muted,
  .lmenu .text-muted:hover {
    color: var(--clr-mnubg--active);
    background-color: transparent;
  }
  .lmenu:hover {
    color: var(--clr-mnu--hover);
    background-color: var(--clr-mnubg--hover);
  }
}
/* page */
@layer basestyles {
  .navsubmenu {
    /* local settings */
    --_card--gutter: var(--gutter);
    --_card--min-size: calc(var(--mediasize--medium) / 4);
    display: grid;
    gap: var(--_card--gutter);
    grid-template-columns: repeat(auto-fit, minmax(var(--_card--min-size), 1fr));
    grid-template-rows: min-content auto 1fr auto;
    justify-content: center;
    padding-inline-start: 0;
  }
  .navsubmenu a {
    text-decoration: none;
  }
  .navsubmenu--card {
    /* use default colors */
    --_card--gutter: var(--gutter);
    --_card--color: var(--clr-text);
    --_card--border-radius: var(--border-radius);
    --_card--btn-color: var(--clr-primarybtn--active);
    --_card--btnbg-color: var(--clr-primarybtnbg--active);
    --_card--btn-color--hover: var(--clr-primarybtn--hover);
    --_card--btnbg-color--hover: var(--clr-primarybtnbg--hover);
    list-style-type: none;
    border: 1px solid var(--_card--btnbg-color);
    border-radius: var(--_card--border-radius);
    overflow: hidden;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: calc(var(--_card--gutter) / 2);
  }
  .navsubmenu--card .navsubmenu--heading {
    padding-block-start: var(--_card--gutter);
    padding-inline: var(--_card--gutter);
    color: var(--_card--color);
  }
  .navsubmenu--card .navsubmenu--description {
    color: var(--_card--color);
    padding-inline: var(--_card--gutter);
  }
  .navsubmenu--card a.navsubmenu--link {
    margin: 0;
    padding-inline: var(--_card--gutter);
    align-self: end;
    color: var(--_card--btn-color);
    background-color: var(--_card--btnbg-color);
  }
  .navsubmenu--card a.navsubmenu--link:hover {
    color: var(--_card--btn-color--hover);
    background-color: var(--_card--btnbg-color--hover);
  }
}
/* page */
@layer basestyles {
  .breadcrumbmenu {
    /* local settings */
  }
  .breadcrumbmenu a {
    text-decoration: none;
  }
  .breadcrumbmenu > a:hover {
    background-color: var(--clr-accent);
  }
}
@layer basestyles {
  form {
    --_clr-border: oklch(from var(--clr-background) calc(l * .9) c h);
    border: 1px solid var(--clr-accent);
    border-radius: var(--border-radius);
    padding: var(--gutter);
  }
  fieldset {
    border: 0;
  }
  .row {
    display: grid;
    gap: var(--gutter);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .row .form-check {
    padding-block-start: calc(1rem * var(--lh-regular));
  }
  .form-group {
    padding-block-end: var(--gutter);
  }
  .form-group .form-group {
    padding: 0;
  }
  .table {
    border-collapse: collapse;
    border-block: calc(var(--gutter) / 2) solid var(--_clr-border);
  }
  .table tr:nth-child(even) {
    background-color: var(--_clr-border);
  }
  .table td {
    padding: 3px;
  }
  .summary-table-first-col {
    width: 50%;
  }
  .form-h2 {
    font-size: clamp(2rem, 3vw, 3rem);
    color: var(--clr-h);
  }
}
/* page */
@layer basestyles {
  .headercontent {
    display: grid;
    grid-auto-flow: column;
    justify-content: end;
    align-items: center;
    container-type: inline-size;
    container-name: headercontent;
    position: relative;
  }
  .logo {
    position: absolute;
    top: 0;
    width: min(200px, 40vw);
    padding-block: var(--gutter);
    padding-inline: calc(var(--gutter) / 2);
    background-color: var(--clr-logobg);
  }
  .logo a {
    z-index: 2;
  }
  .logo svg {
    fill: var(--clr-logo);
  }
  .logo a:focus-visible {
    outline: 2px solid var(--clr-bw-070);
  }
}
/* page */
@layer basastyle {
  footer {
    color: var(--clr-footer-text);
    background-color: var(--clr-footerbg);
  }
  .footer--content {
    padding-block: var(--gutter);
  }
}
/* page */
@layer basestyles {
  body {
    /* overflow-y:     scroll; */
    container-type: inline-size;
    display: grid;
    grid-template-rows: 1fr auto;
  }
  /*   @media (prefers-reduced-motion: no-preference) {
      :has(:target) {
        scroll-behavior: smooth;
        scroll-padding-top: 3rem;
      }
    } */
  header {
    position: fixed;
    -webkit-transform: translateZ(0);
    width: 100vw;
    background-color: var(--clr-headerbg);
    z-index: 10;
  }
  main {
    margin-block-start: 60px;
    container: main/inline-size;
    align-content: start;
  }
  .content-grid {
    --padding-inline: 1rem;
    --content-max-width: var(--mediasize--large);
    --breakout-size: 15ch;
    display: grid;
    grid-template-columns: [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] min(var(--content-max-width) / 2, 50% - var(--padding-inline)) [centerline] min(var(--content-max-width) / 2, 50% - var(--padding-inline)) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
  }
  .content-grid > * {
    grid-column: content;
  }
  .content-grid > .breakout,
  .content-grid > .breakout-accent,
  .content-grid > .breakout-brandcolor {
    grid-column: breakout;
  }
  .content-grid > .full-width,
  .content-grid > .full-width-accent,
  .content-grid > .full-width-brandcolor {
    grid-column: full-width;
  }
}

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