:root {
  --clr-text: var(--clr-secondary-12);
  --ff-base: var(--ff-sans-serif);
  --fs-base: var(--step-0, 1.1rem);
  --font-lineheight-0: 1.1;
  --size-header-3: 35ch;
  --step-5: clamp(2.2525rem, 1.5764rem + 3.3804vw, 4.1963rem);
  --step-4: clamp(2.0025rem, 1.5314rem + 2.3554vw, 3.3569rem);
  --step-3: clamp(1.78rem, 1.465rem + 1.575vw, 2.6856rem);
  --step-2: clamp(1.5819rem, 1.3847rem + 0.9859vw, 2.1488rem);
  --step-1: clamp(1.4063rem, 1.2976rem + 0.5435vw, 1.7188rem);
  --step-0: clamp(1.25rem, 1.2065rem + 0.2174vw, 1.375rem);
  --clr-link: var(--clr-accent-9);
  --link-underline-offset: .15em;
  --link-underline-thickness: .125rem;
  --clr-link-hover: var(--clr-accent-12);
  --clr-accent-9: var(--red-9);
  --fs-sm: var(--step--1, .75rem);
  --clr-primary-9: var(--blue-9);
  --clr-primary-3: var(--blue-3);
  --clr-primary-0: var(--blue-0);
  --flow-space-s: var(--space-2xs-xs);
  --flow-space: var(--space-s-m, 1em);
  --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);
  --article-space: var(--space-l-xl);
  --size-3: 1rem;
  --clr-secondary-12: var(--stone-12);
  --clr-secondary-0: var(--stone-0);
  --inside-width-max: 65rem;
  --clr-secondary-9: var(--stone-9);
  --clr-secondary-3: var(--stone-3);
  --b-size: var(--border-size-1, 1px);
  --b-radius: var(--radius-3, 5px);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --clr-error: var(--clr-accent-9);
  --clr-bg-error: var(--clr-accent-0);
  --clr-border-error: var(--clr-accent-9);
  --size-2: .5rem;
  --size-4: 1.25rem;
  --clr-secondary-6: var(--stone-6);
  --font-size-0: .75rem;
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
  --gap: var(--size-3, 1rem);
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --clr-nav--link: var(--clr-white);
  --menu-icon-stroke: 3px;
  --submenu-background: var(--clr-secondary-9);
  --clr-white: var(--stone-0);
  --shadow: var(--shadow-1);
  --nav-clr-bg: var(--clr-secondary-9);
  --border-size-1: 1px;
  --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
  --flow-space-l: var(--space-l-xl);
  --ff-sans-serif: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  --clr-accent-12: var(--red-12);
  --red-9: #c92a2a;
  --step--1: clamp(1.1rem, 1.1152rem + -0.0196vw, 1.1113rem);
  --blue-9: #1864ab;
  --blue-3: #74c0fc;
  --blue-0: #e7f5ff;
  --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
  --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
  --stone-12: #121210;
  --stone-0: #f8fafb;
  --stone-9: #50514f;
  --stone-3: #e0e4e5;
  --radius-3: 1rem;
  --clr-accent-0: var(--red-0);
  --stone-6: #979b9d;
  --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));
  --red-12: #7d1a1a;
  --red-0: #fff5f5;
  --shadow-color: 220 40% 2%;
  --shadow-strength: 25%;
  --logo-width: 100px;
}
/* 1. abstracts */
/* do not import the custom-properties.css - open-jit-props does its work for this file */
/* 2. base */
/* @import 'base/fonts.css'; */
/*  ---------------------------------------------------------------  */
/*   A (more)) Modern CSS reset by Andy Bell                         */
/*   https://andy-bell.co.uk/a-more-modern-css-reset/                */
/*   No [role="list"] in Contao, therefore commented that part out   */
/*  ---------------------------------------------------------------  */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
ol,
ul,
dl,
dd {
  margin: 0;
}
/* 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;
}*/
/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}
/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}
/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}
/* A elements that don't have a class get default styles */
/* a:not([class]) {
  text-decoration-skip-ink: auto;
  /* color: currentColor;
} */
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
  height: auto;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}
/* Anything that has been anchored to should have extra scroll margin */
/* Adjust with fixed headers*/
:target {
  scroll-margin-block: 5ex;
}
/* Scrolling on the page, e.g. for "Go-To-Top" buttons */
html:focus-within {
  scroll-behavior: smooth;
}
/*  -------------------------------------------------------  */
/*  This file contains basic typo declarations               */
/*  headings, paragraphs, lists etc.                         */
/*  -------------------------------------------------------  */
body {
  color: var(--clr-text);
  font-family: var(--ff-base);
  font-size: var(--fs-base);
}
h1, h2, h3, h4 {
  line-height: var(--font-lineheight-0);
  max-width: var(--size-header-3);
}
h1 {
  font-size: var(--step-5);
}
h2 {
  font-size: var(--step-4);
}
h3 {
  font-size: var(--step-3);
}
h4 {
  font-size: var(--step-2);
}
h5 {
  font-size: var(--step-1);
}
h6 {
  font-size: var(--step-0);
}
/* Vertikaler Rhythmus */
/* vertikaler Rhythmus von Inhaltselementen */
[class*="content-"]:where(:not(:first-child)), 
[class*="content-"] > * + *, 
.rte > * + *, 
h1 + * {
  margin-top: var(--flow-space);
}
/* larger space after h1 */
h1 + * {
  --flow-space: var(--flow-space-l);
}
/* smaller space after other headings */
h2 + *, h3 + *, h4 + *, h5 + *, h6 + * {
  --flow-space: var(--flow-space-s);
}
/* standard space for elements inside class .rte */
/* set this to the standard flow space */
.rte > * {
  --flow-space: var(--space-s-m);
}
/* links */
a {
  color: var(--clr-link);
  text-underline-offset: var(--link-underline-offset);
  text-decoration-thickness: var(--link-underline-thickness);
}
a:hover {
  color: var(--clr-link-hover);
}
/* lists */
ul li::marker {
  color: var(--clr-accent-9);
}
/* Styles for the info class */
.info {
  font-size: var(--fs-sm);
  font-style: italic;
}
/* blockquotes */
blockquote {
  padding-left: 1em;
  border-left: 0.25em solid;
  font-style: italic;
  font-size: var(--step-1);
}
/*  -------------------------------------------------------  */
/*  This file contains CSS helper classes.                   */
/*                                                           */
/*  -------------------------------------------------------  */
/**
 * Hide element while making it readable for screen readers
 * Shamelessly borrowed from HTML5Boilerplate:
 * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
 */
/* 
.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
} */
.invisible {
  display: inline-block;
  padding: 0.7rem 1rem 0.5rem 1rem;
  background: var(--clr-primary-9); 
  color: var(--clr-primary-3);
  -webkit-text-decoration: none;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  position: absolute;
  top: 1rem;  
  left: 1rem;
}
.invisible:hover {
  background: var(--clr-primary-0);
  color: var(--clr-primary-9);
}
.invisible:not(:focus) {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
/* -------------------------------------------- */
/* Utility classes                              */
/* uncomment, if needed                         */
/* -------------------------------------------- */
/* general */
/* .flex {
  display: flex;
  gap: var(--gap, 1rem);
} */
/* .grid {
  display: grid;
  gap: var(--gap, 1rem);
} */
/* ----------------------------------------------- */
/* Contao float classes                            */
/* uncomment if needed - but try to avoid floats   */
/* no float classes in Contao 5 - remove           */
/* ----------------------------------------------- */
/* .float_left {
  float: left;
  margin-right: var(--size-3);
  margin-bottom: var(--size-3);
} */
/* .float_right {
  float: right;
  margin-left: var(--size-3);
  margin-bottom: var(--size-3);
} */
/* utility class to reduce flow-space */
.flow-1 {
  --flow-space: var(--flow-space-s);
}
.flow > * + * {
  margin-top: var(--flow-space);
}
/* .bg-primary - Background color utility */
/* set for articles only */
.mod_article.bg-primary {
  background-color: var(--clr-primary-0);
  padding-top: var(--article-space);
  padding-bottom: var(--article-space);
  border-radius: var(--b-radius);
  box-shadow: var(--shadow);
  margin-top: var(--article-space);
}
.mod_article.full-width {
  border-radius: 0;
}
/* Helpers for container widths are defined in container.css */
/* .breakout -- slightly wider container than standard */
/* .full-width -- full width container */
/* 3. layout */
/* Contao container classes */
/* General structure

body
  |--#wrapper
        |--header
            |--.inside
        |--#container
            |--main
                |--.inside
        |--footer
            |--.inside

/* Keep the footer at bottom of the page */
/* adjust the template rows accorrding to the direct child elements */
#wrapper {
    min-height: 100vh;
     min-height: 100dvh;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
}
/* grid-template rows for the homepage (one section less) */
.home #wrapper {
    grid-template-rows: auto 1fr auto;
}
/* width and centering for the inside container - classic approach */
/* .inside {
    width: min(100vw - 3rem, var(--inside-width-max, 80rem));
    margin-inline: auto;
  } */
/* .inside container - different approach with grid - very versatile, can't use floats */
/* :where([id*="custom-"], [id="container"]) */
.inside {
    --padding-inline: 1rem;
    --content-max-width: 70ch;
    --breakout-max-width: 90ch;
    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

    display: grid;
    grid-template-columns: 
        [full-width-start] minmax(1rem, 1fr) 
        [breakout-start] minmax(0, calc((90ch - 70ch) / 2))
        [content-start] min(100% - (1rem * 2), 70ch)
        [content-end] minmax(0, calc((90ch - 70ch) / 2))
        [breakout-end] minmax(1rem, 1fr)
        [full-width-end];
    grid-template-columns: 
        [full-width-start] minmax(var(--padding-inline), 1fr) 
        [breakout-start] minmax(0, var(--breakout-size))
        [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width))
        [content-end] minmax(0, var(--breakout-size))
        [breakout-end] minmax(var(--padding-inline), 1fr)
        [full-width-end];
}
:where(.inside) > :where(:not(.breakout):not(.full-width)),
.full-width > :where(:not(.breakout):not(.full-width)) {
  grid-column: content;
}
.inside > .breakout {
    grid-column: breakout;
}
.inside > .full-width {
    grid-column: full-width;
    display: grid;
    grid-template-columns: inherit;
}
/* further Header and Footer styles are in separate files */
/* Abstand zwischen Header und folgenden Blöcken */
/* ID des Layoutbereichs muss mit custom- beginnen */
:where([id*="custom-"], [id="container"]):nth-child(2) {
    padding-top: var(--space-2xl-3xl);
}
/* Abstand zwischen Content und Footer mit eigenem Layoutbereich oberhalb des Footers */
:where([id*="custom-"], [id="container"]):last-of-type {
    padding-bottom: var(--space-2xl-3xl);
}
/* Abstand zwischen Artikeln im Bereich Main content */
/* first-child oder first-of-type ? */
main .mod_article:where(:not(:first-child)) {
    padding-top: var(--article-space);
}
/* Header styles - Comment out, if there's no header */
header {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-top: var(--size-3, 1rem);
    padding-bottom: var(--size-3, 1rem);
    /* padding-inline: var(--site-padding, 1.5rem); */
    background-color: var(--clr-secondary-12);
    color: var(--clr-secondary-0);
}
/* header .inside {
    --padding-inline: 3.5vw;
    display: grid;
    grid-template-columns: max-content 1fr;
    padding-inline: var(--padding-inline);
    align-items: center;
} */
header > .inside {
    --breakout-max-width: var(--inside-width-max);
    align-items: center;
}
header .inside > .logo {
    min-width: var(--logo-width);
    justify-self: start;
    grid-column: 2 / 3;
}
header .inside > :not(.logo) {
    grid-column: 3 / 5;
}
footer {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-top: var(--size-3, 1rem);
    padding-bottom: var(--size-3, 1rem);
    /* padding-inline: var(--site-padding, 1.5rem); */
    background-color: var(--clr-secondary-9);
    color: var(--clr-secondary-3);
}
footer > .inside {
    --breakout-max-width: var(--inside-width-max);
}
footer .inside > * {
    grid-column: breakout;
}
/* footer .inside {
    --gap: var(--size-7);
    display: grid;
    gap: var(--gap);
    grid-template-areas: 
    "one"
    "two"
    "three";
}

footer .inside div:nth-child(3n - 2) {
    grid-area: one;
}

footer .inside div:nth-child(3n - 1) {
    grid-area: two;
}

footer .inside div:nth-child(3n) {
    grid-area: three;
}

footer h2 {
    margin-bottom: var(--size-3);
}

footer a {
    color: var(--clr-secondary-3);
}

footer a:hover {
    color: var(--clr-secondary-1);
}

@media (min-width: 992px) {
    footer .inside {
        grid-template-areas: 
        "one two"
        "three three";
    }
}

@media (min-width: 1400px) {
    footer .inside {
        grid-template-areas: 
        "one two three"
    }
} */
/* 4. components & modules */
/* evtl. obsolet */
/* Styles für das Textelement */
/* ---------------------------------------- */
/* Contao core has the .error class only    */
/* for more alerts take the content element */
/* text and add appropriate classes         */
/* ---------------------------------------- */
.alert p, p.error {
    border: var(--b-size) solid transparent;
    border-radius: var(--b-radius);
    padding: var(--space-2xs) var(--space-s);
}
.alert-danger p, p.error {
    color: var(--clr-error);
    background-color: var(--clr-bg-error);
    border-color: var(--clr-border-error);
}
/* example info + success alert - uncomment if necessary */
/*
.alert-info p {
    color: hsl(var(--blue-8-hsl));
    background-color: hsl(var(--blue-1-hsl));
    border-color: hsl(var(--blue-7-hsl));
}

.alert-success p {
    color: hsl(var(--green-8-hsl));
    background-color: hsl(var(--green-1-hsl));
    border-color: hsl(var(--green-7-hsl));
}

*/
/* e.g. error messages) */
/* WATCHOUT! 
   #wrapper is a grid container
   simple responsive tables are not working!
   search for a better solution
*/
/* Base styles for the content element table */
table {
    width: 100%;
    border-collapse: collapse;
    caption-side: bottom;
}
tr:hover {
    background-color: var(--clr-secondary-0);
}
th, td {
    border: var(--b-size) solid var(--clr-secondary-3);
    text-align: left;
    padding-top: var(--size-2);
    padding-bottom: var(--size-2);
    padding-left: var(--size-4);
    padding-right: var(--size-4);
}
th {
    background-color: var(--clr-secondary-0);
    text-transform: uppercase;
}
:where(th,td):not(:last-child) {
    border-right-color: transparent;
}
table caption {
    color: var(--clr-secondary-6);
    font-size: var(--font-size-0);
    margin-top: var(--fs-sm);
    
}
/* Spacing für den Codeblock */
pre {
  white-space: pre-wrap;
  overflow: hidden;
  border-radius: var(--b-radius);
}
:where(pre):not(:first-child) {
    margin-top: var(--flow-space);
  }
/* overwrite some styles of the contao code styler*/
.content-code .hljs {
    padding: var(--space-m);
}
/* Styles for the Markdown Content element */
/* We need extra styles if used, because in Markdown there are no contao classes */
/* use this for vertical spacing of sibling elements */
.content-markdown > * + * {
    margin-top: var(--flow-space);
}
/* More styles here, if necessary */
/* styles for images, videos etc. */
/* images in text elements */
/* classes
.media
.media--above
.media--left
.media--right
.media--below
 */
.media {
    display: grid;
 }
.media--above, 
.media--below {
    justify-items: center;
}
.media--left, 
.media--right {
    gap: var(--gap);
    grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
}
:where(.media--below, .media--left, .media--right) > .rte {
    margin-top: 0;   
}
:where(.media--below, .media--right) > figure {
    order: 5;
    margin-top: var(--flow-space);
}
/* images */
/* classes
 .content-image
 */
figure > img {
    overflow: hidden;
    border-radius: var(--b-radius);
}
figcaption {
    font-size: var(--fs-sm);
    padding-left: var(--b-radius);
}
/* Styles for the content element Galerie */
/* structure of the gallery template */
/* <div class="content-gallery--cols-4 content-gallery">
    <ul>
        <li>
            <figure>
                <picture>
                    <source srcset="/assets/images/r/pexels-clive-kim-4220967-ej8k5m08c4ny438.webp" media="(max-width: 360px)" type="image/webp" width="360" height="540">
                    <source srcset="/assets/images/4/pexels-clive-kim-4220967-8mvptssp7yayfmm.jpg" media="(max-width: 360px)" width="360" height="540">
                    <source srcset="/assets/images/6/pexels-clive-kim-4220967-fpwabeetwtd8v9p.webp" media="(max-width: 480px)" type="image/webp" width="480" height="720">
                    <source srcset="/assets/images/b/pexels-clive-kim-4220967-b41cbs6507947x5.jpg" media="(max-width: 480px)" width="480" height="720">
                    <source srcset="/assets/images/q/pexels-clive-kim-4220967-jcc02hfmre9tmbm.webp" media="(max-width: 768px)" type="image/webp" width="768" height="1152">
                    <source srcset="/assets/images/p/pexels-clive-kim-4220967-svv70j4gd0qc4zd.jpg" media="(max-width: 768px)" width="768" height="1152">
                    <source srcset="/assets/images/w/pexels-clive-kim-4220967-hvqzmqjka4j99ce.webp" media="(max-width: 1024px)" type="image/webp" width="1024" height="1536">
                    <source srcset="/assets/images/s/pexels-clive-kim-4220967-a8q614h0t5edepk.jpg" media="(max-width: 1024px)" width="1024" height="1536">
                    <source srcset="/assets/images/r/pexels-clive-kim-4220967-aza7v3xpgv9knaj.webp" type="image/webp" width="1200" height="1800">
                    <img src="/assets/images/8/pexels-clive-kim-4220967-2wqtxcevwb6jfbv.jpg" alt="" width="1200" height="1800" loading="lazy">
                </picture>
                <figcaption>An erutping vulcano</figcaption>
            </figure>
        </li>
        <li>...   
    </ul>
</div> */
.content-gallery ul {
    --min: 200px;
    list-style: none;
    padding: 0;
    margin: 0;

    display: grid;
    grid-gap: var(--gap);
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));

}
/* .content-gallery li {
    --min: 200px;
    flex: 1 1 var(--min);
} */
/* .content-gallery figure {
    object-fit: cover;
    width: 100%;
    height: 100%;
} */
.content-gallery figcaption {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    padding-top: var(--space-3xs);
}
/* @import 'modules/navigation-temp.css'; */
/* In Contao give the navigation the class nav-primary */
/* on mobile: don't let the header scroll, when the nav is opened */
@media screen and (max-width: 54.9375em) {
  .html--fixed {
      overflow: hidden;
      position: fixed;
      height: 100%;
      width: 100%;
  }
}
.nav-primary ul {
  list-style-type: none;
  display: flex;
  justify-content: end;
  gap: var(--gap);
  margin: 0;
}
@media screen and (max-width: 54.9375em){
  .nav-primary ul {
      flex-direction: column;
  }
}
.nav-primary a,
.nav-primary strong {
    color: var(--clr-nav--link);
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: var(--link-underline-thickness);
    text-underline-offset: calc(var(--link-underline-offset) * 2);
    font-weight: 400;
    transition: color 0.15s ease-in-out, -webkit-text-decoration 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, text-decoration 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, text-decoration 0.15s ease-in-out, -webkit-text-decoration 0.15s ease-in-out;
}
.nav-primary strong,
.nav-primary a:hover,
.nav-primary a:focus {
  text-decoration-color: var(--clr-nav--link);
}
/* Styling the toggler - begin */
/* position of the toggler */
.nav-toggler {
  justify-self: end;
  z-index: 1002;
  pointer-events: auto;
}
/* no toggler on big screens */
@media screen and (min-width: 55em) {
  .nav-toggler {
      display:none;
  }
}
.nav-toggler__button {
  background: none;
  border: none;
  outline: none;
  display: inline-block;
  white-space: nowrap;
  cursor: pointer;
  color: var(--clr-nav--link);
  line-height: 1.5;
  font-size: 1.25rem;
}
.nav-toggler__button .menu-icon {
  position: relative;
  width: 1.25rem;
  height: 1.5rem;
  display: inline-block;
  vertical-align: middle;
}
.nav-toggler__button .menu-icon__inner {
  width: 100%;
  background-color: currentcolor;
  position: absolute;
  left: 0;
  top: 40%;
  height: var(--menu-icon-stroke);
  transition: transform 0.25s ease;
}
.nav-toggler__button .menu-icon__inner::after,
.nav-toggler__button .menu-icon__inner::before {
  background-color: currentcolor;
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: var(--menu-icon-stroke);
  transition: transform 0.25s ease, opacity 0.25s;
}
.nav-toggler__button .menu-icon__inner::before {
  top: -8px;
}
.nav-toggler__button .menu-icon__inner::after {
  bottom: -8px;
}
.html--fixed .nav-toggler__button .menu-icon__inner {
  transform: rotate(45deg);
}
.html--fixed .nav-toggler__button .menu-icon__inner::before {
  opacity: 0;
}
.html--fixed .nav-toggler__button .menu-icon__inner::after {
  transform: rotate(-90deg);
  bottom: 0;
}
.nav-toggler__button .menu-label {
  display: inline-block;
  margin-left: 2px;
}
/* Styling the toggler - end */
/* level_2 nav styles */
.nav--main li.submenu {
  overflow:hidden
}
.nav--main li.submenu > a,
.nav--main li.submenu > strong {
  position:relative;
  z-index:1002
}
.nav--main li.submenu > a::after,
.nav--main li.submenu > strong::after {
  transition: opacity 0.2s 0.3s;
  bottom:calc(-1 * 0.5rem);
  bottom:calc(-1 * var(--nav--main__item-padding, 0.5rem));
  left:50%;
  border:solid transparent;
  /* content:' '; */
  height:0;
  width:0;
  position:absolute;
  pointer-events:none;
  border-bottom-color:var(--submenu-background);
  border-width:8px;
  margin-left:-8px;
  opacity:0
}
.nav--main li.submenu:hover a::after,
.nav--main li.submenu:hover strong::after {
  opacity:1;
  transition-delay:0s
}
.nav--main .level_2 {
  --gap: calc(var(--gap) / 2);
  flex-direction:column;
  z-index:1001;
  position:relative;
  min-width:10rem;
  visibility:hidden;
}
@media screen and (min-width: 55em) {
  .nav--main .level_2 {
      max-height:0;
      opacity:0;
      position:absolute;
      margin:0;
      border: 1px solid var(--clr-white);
      box-shadow:var(--shadow);
      transition:opacity 0.2s 0.3s, max-height 0s 0.6s, visibility 0s 0.6s
  }
}
@media screen and (min-width: 55em) {
  .nav--main .level_2 > li {
      background: var(--nav-clr-bg);
  }
}
@media screen and (min-width: 55em){
  .nav--main .level_2 > li {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .nav--main .level_2 > li:first-of-type {
    padding-top: .75rem;
  }
  .nav--main .level_2 > li:last-of-type {
    padding-bottom: .75rem;
  }
}
.nav--main li.submenu:hover .level_2,
.nav--main li.submenu:active .level_2 {
  z-index: 1004;
  max-height: 9999px;
  opacity: 1;
  transition-delay: 0s;
  visibility: visible;
}
/* Here comes all the styling for the mobile navigation */
@media screen and (max-width: 54.9375em){
  /* basic styling for the mobile nav */
  .nav--mobile {
      transition: transform 0.3s;
      z-index: 1004;
      visibility: visible;
      position: fixed;
      background: var(--nav-clr-bg);
      left:0;
      right:0;
      top:0;
      bottom:0;
      overflow-y:auto;
      transform:translate(100%, 0);
      pointer-events:auto
  }

  /* spacing and two columns for the mobile nav */
  .nav--mobile .level_1 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: var(--gap);
      gap: var(--gap)};

  .nav--mobile .level_1 > li > a,
  .nav--mobile .level_1 > li > strong {
      text-overflow:ellipsis;
      overflow:hidden;
      white-space:nowrap;
  }

  .nav--mobile li {
      transition:opacity 0.3s 0.3s;
      opacity:0;
  }

  .nav--mobile .level_2 {
      visibility: visible;
  }
}
@media screen and (max-width:54.9375em) and (min-width:55em) {
  .nav--mobile li {
      opacity:1;
  }

}
@media screen and (max-width:54.9375em) {
  .nav--mobile--active {
      transform:translate(0, 0);
      transition:transform 0.3s
    }
    .nav--mobile--active li {
      opacity:1;
    }
}
/* ------------------------------------------------ */
/* Base styles for the contao breadcrumb            */
/* Set the wanted divider in the --divider variable */
/* ------------------------------------------------ */
/* Breadcrumb horizontal */
.mod_breadcrumb > ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0 0 var(--size-3);
}
/* Set a divider  */
.mod_breadcrumb ul > li + li::before {
    --divider: '/'; /* Set your divider here */
    padding-left: var(--size-2);
    padding-right: var(--size-2);
    content: '/';
    content: var(--divider);

}
/* Place an svg icon at the beginning */
/* use mask to color svg with css */
.mod_breadcrumb ul > li:where(:first-child) a::before {
    background-color: currentColor;
    content: "";
    padding-left: var(--size-2);
    padding-right: var(--size-2);
    margin-right: var(--size-2);
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 576 512"><path d="M575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6H511.8L512.5 447.7C512.5 450.5 512.3 453.1 512 455.8V472C512 494.1 494.1 512 472 512H456C454.9 512 453.8 511.1 452.7 511.9C451.3 511.1 449.9 512 448.5 512H392C369.9 512 352 494.1 352 472V384C352 366.3 337.7 352 320 352H256C238.3 352 224 366.3 224 384V472C224 494.1 206.1 512 184 512H128.1C126.6 512 125.1 511.9 123.6 511.8C122.4 511.9 121.2 512 120 512H104C81.91 512 64 494.1 64 472V360C64 359.1 64.03 358.1 64.09 357.2V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5L575.8 255.5z"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 576 512"><path d="M575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6H511.8L512.5 447.7C512.5 450.5 512.3 453.1 512 455.8V472C512 494.1 494.1 512 472 512H456C454.9 512 453.8 511.1 452.7 511.9C451.3 511.1 449.9 512 448.5 512H392C369.9 512 352 494.1 352 472V384C352 366.3 337.7 352 320 352H256C238.3 352 224 366.3 224 384V472C224 494.1 206.1 512 184 512H128.1C126.6 512 125.1 511.9 123.6 511.8C122.4 511.9 121.2 512 120 512H104C81.91 512 64 494.1 64 472V360C64 359.1 64.03 358.1 64.09 357.2V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5L575.8 255.5z"/></svg>');
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}
/* base styles for faq                     */
/* put in stylesheet only, if faq are used */
/* Every FAQ entry is a section - put some space between them */
/* Space between Heading or other preceeding element and 1st section  */
/* .mod_faqpage > * + *,
.mod_faqpage article > * + *,
.mod_faqpage article section > * + *,
.mod_faqpage article section .ce_text > * + * {
    margin-block-start: var(--flow-space);
} */
.mod_faqpage article:not(:first-child) {
    margin-top: var(--flow-space);
}
.mod_faqpage section {
    margin-top: var(--flow-space-s);
    padding: var(--size-3);
    background-color: var(--clr-secondary-0);
    border: var(--border-size-1) solid var(--clr-secondary-3);
}
.mod_faqpage .toplink {
    --flow-space: var(--space-s-m);
    margin-top: var(--space-s-m);
    margin-top: var(--flow-space);
}
.mod_faqpage .ce_text {
    margin-top: var(--flow-space);
}
.mod_faqpage .enclosure {
    --flow-space: var(--space-s-m);
    margin-top: var(--space-s-m);
    margin-top: var(--flow-space);
}
.mod_faqpage .info {
    --flow-space: var(--space-s-m);
    margin-top: var(--space-s-m);
    margin-top: var(--flow-space);
}
.ce_text > *:not(:first-child) {
    --flow-space: var(--space-s-m);
    margin-top: var(--space-s-m);
    margin-top: var(--flow-space);
}
/* base styles for news                     */
/* put in stylesheet only, if news are used */
/* Space between Heading or other preceeding element and 1st section  */
:where(.mod_newslist) > * + * {
    --flow-space: var(--flow-space-l);
}
/* put some space between headline and teaser  */
:where(.layout_latest, .layout_short, .layout_simple) > .ce_text {
    --flow-space: var(--flow-space-s);
}
:where(.layout_latest, .layout_short, .layout_simple) > .more {
    --flow-space: var(--flow-space-s);
}
:where(.layout_simple:not(:first-child)), .layout_full .info {
    --flow-space: var(--flow-space-s);
}
:where(.mod_newslist) > * + *,
:where(.layout_latest, .layout_short, .layout_simple) > .ce_text,
.more,
.back {
    margin-top: var(--flow-space);
}
.layout_full .info {
    margin-top: var(--flow-space);
}
/* base styles for news                     */
/* put in stylesheet only, if news are used */
/* Space between Heading or other preceeding element and 1st section  */
:where(.mod_eventlist) > .header:not(:first-child) {
    --flow-space: var(--flow-space-l);
    margin-top: var(--flow-space-l);
    margin-top: var(--flow-space);
}
.mod_eventlist .header, .location, .time {
    font-size: var(--fs-sm);
    font-style: italic;
  }
.event > .time, .event > .ce_text, .event > .more {
    --flow-space: var(--flow-space-s);
    margin-top: var(--flow-space-s);
    margin-top: var(--flow-space);
}
/* .layout_full .info {
    margin-block-start: var(--space-3xs-2xs);
} */
/* @import 'components/buttons.css'; */
/* 5. pages */
/* 6. themes */
/* Put theme specific styles here */
details {
	padding: 1rem;
	border: 2px solid black;
	border-radius: 3px;
	background: #222;
	color: #fff;
}
details[open]

summary::marker {
	color: red;
	content: "🧡 ";
}
@keyframes details-show {
    from {
      opacity:0;
      transform: scaleY(0.5);
      transform: var(--details-translate, scaleY(0.5));
    }
  }
details[open] > *:not(summary) {
    animation: details-show 350ms ease-in-out;
  }