@charset 'utf-8';

/*@import "../bootstrap-5.3.7/dist/css/bootstrap.min.css";*/
@import "hover/css/hover-min.css";

:root {
  /*
   * Global settings
   */
  --global-width: 80rem; /* 73.75rem * 16px (base font size) = 1180px */
  /*--body-font-family: Helvetica Neue, sans-serif;*/
  --body-font-family: "Source Sans 3", sans-serif;
  --header-font-family: var(--body-font-family);
  --border-radius: 0.5em;

  /*
   * letter spacing
   */
  --tracking-down-1: -0.025ch;
  --tracking-down-2: -0.075ch;

  /*
   * horizontal gutter
   * value is predefined by PCT_AUTOGRID so don't change this
   * 0.9375 * 16px = 15px
   */
  --gutter-size: .9375rem;

  /*
   * Color palette
   */
  --color-primary:        oklch(0.576 0.235 26.711);    /* #e3001b */
  --color-secondary:      oklch(0 0 0);                 /* #000000 */

  --color-accent1:        oklch(0.949 0 89.876);        /* #eeeeee */
  --color-accent2:        oklch(64.84% 0.1101 219);     /* #219ebc */
  --color-accent3:        oklch(80.79% 0.0731 228.7);   /* #8ecae6 */

  --color-white:          oklch(1.00 0 0);              /* #ffffff */
  --color-light-grey:     oklch(0.96 0 0);              /* #f2f2f2 */
  --color-medium-grey:    oklch(0.66 0 0);              /* #929292 */
  --color-dark-grey:      oklch(0.44 0 0);              /* #525252 */
  --color-deep-dark-grey: oklch(0.368 0 89.876);        /* #3f3f3f */
  --color-black:          oklch(0.14 0 0);              /* #090909 */

  --color-paragraph:      oklch(0.4819 0 0);            /* #5e5e5e */

  /*
   * Leaflet OpenStreet Map
   */
  --leaflet-marker-icon: url(../images/icons/leaflet-marker-icon.png);

  /*
   * Navigation / Menu
   */
  --dropdown-bg: #ffffff;
  --dropdown-hover: #f4f4f4;
  --dropdown-accent: #c0001b;
  --dropdown-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  --dropdown-transition: 0.22s ease;
}


/*
* Type scale
* --------------------------------------------
* don't forget to recalculate sizes when changing the --global-width
*/
/* @link https://utopia.fyi/type/calculator?c=360,16,1.125,1280,18,1.2,10,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--3: clamp(0.651rem, 0.7224rem + -0.0892vi, 0.7023rem);
  --step--2: clamp(0.7813rem, 0.7936rem + -0.0154vi, 0.7901rem);
  --step--1: clamp(0.8889rem, 0.8699rem + 0.0845vi, 0.9375rem);
  --step-0: clamp(1rem, 0.9511rem + 0.2174vi, 1.125rem);
  --step-1: clamp(1.125rem, 1.037rem + 0.3913vi, 1.35rem);
  --step-2: clamp(1.2656rem, 1.127rem + 0.6163vi, 1.62rem);
  --step-3: clamp(1.4238rem, 1.2203rem + 0.9046vi, 1.944rem);
  --step-4: clamp(1.6018rem, 1.3158rem + 1.2713vi, 2.3328rem);
  --step-5: clamp(1.802rem, 1.4118rem + 1.7345vi, 2.7994rem);
  --step-6: clamp(2.0273rem, 1.5061rem + 2.3164vi, 3.3592rem);
  --step-7: clamp(2.2807rem, 1.5958rem + 3.0441vi, 4.0311rem);
  --step-8: clamp(2.5658rem, 1.6769rem + 3.9505vi, 4.8373rem);
  --step-9: clamp(2.8865rem, 1.7446rem + 5.0752vi, 5.8048rem);
  --step-10: clamp(3.2473rem, 1.7923rem + 6.4668vi, 6.9657rem);
}


/*
  * Spacing
  * --------------------------------------------
  * don't forget to recalculate sizes when changing the --global-width
  */
/* @link https://utopia.fyi/space/calculator?c=360,16,1.125,1280,18,1.2,10,3,&s=0.75|0.5|0.25,1.5|2|3|4|6|8|10|12,&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.25rem, 0.2255rem + 0.1087vi, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4755rem + 0.1087vi, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7011rem + 0.2174vi, 0.875rem);
  --space-s: clamp(1rem, 0.9511rem + 0.2174vi, 1.125rem);
  --space-m: clamp(1.5rem, 1.4266rem + 0.3261vi, 1.6875rem);
  --space-l: clamp(2rem, 1.9022rem + 0.4348vi, 2.25rem);
  --space-xl: clamp(3rem, 2.8533rem + 0.6522vi, 3.375rem);
  --space-2xl: clamp(4rem, 3.8043rem + 0.8696vi, 4.5rem);
  --space-3xl: clamp(6rem, 5.7065rem + 1.3043vi, 6.75rem);
  --space-4xl: clamp(8rem, 7.6087rem + 1.7391vi, 9rem);
  --space-5xl: clamp(10rem, 9.5109rem + 2.1739vi, 11.25rem);
  --space-6xl: clamp(12rem, 11.413rem + 2.6087vi, 13.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.1277rem + 0.5435vi, 0.5625rem);
  --space-2xs-xs: clamp(0.5rem, 0.3533rem + 0.6522vi, 0.875rem);
  --space-xs-s: clamp(0.75rem, 0.6033rem + 0.6522vi, 1.125rem);
  --space-s-m: clamp(1rem, 0.731rem + 1.1957vi, 1.6875rem);
  --space-m-l: clamp(1.5rem, 1.2065rem + 1.3043vi, 2.25rem);
  --space-l-xl: clamp(2rem, 1.462rem + 2.3913vi, 3.375rem);
  --space-xl-2xl: clamp(3rem, 2.413rem + 2.6087vi, 4.5rem);
  --space-2xl-3xl: clamp(4rem, 2.9239rem + 4.7826vi, 6.75rem);
  --space-3xl-4xl: clamp(6rem, 4.8261rem + 5.2174vi, 9rem);
  --space-4xl-5xl: clamp(8rem, 6.7283rem + 5.6522vi, 11.25rem);
  --space-5xl-6xl: clamp(10rem, 8.6304rem + 6.087vi, 13.5rem);
}


/* ----------------------------------------------------------------------------
 * Vertical flow of elements
 * @link https://piccalil.li/blog/my-favourite-3-lines-of-css/
 * -----
 * add a default top margin to most elements
 * ------------------------------------------------------------------------- */
:is(.flow, .mod_article, .same-height-wrap) > * + * {
  margin-block-start: var(--flow-space, 1em);
}


/* ----------------------------------------------------------------------------
 * Document settings
 * ------------------------------------------------------------------------- */
@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html {
  font-size: 100%;

  /* Prevent font size inflation */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  background: var(--color-white);
  color: var(--color-paragraph);
  font-family: var(--body-font-family);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-hyphens: auto;
  hyphens: auto;
  min-height: 100vh;
}


/* ----------------------------------------------------------------------------
 * Text
 * ------------------------------------------------------------------------- */

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* ----------------------------------------------------------------------------
 * Text: Headlines
 * ------------------------------------------------------------------------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--header-font-family);
  text-wrap: balance;
  /*
  * headlines shall keep a small top margin
  */
  --flow-space: .75em;

  &.color-primary {
    font-weight: 400 !important;
  }
}

h1, .h1 {
  font-size: var(--step-8);
  font-weight: 900;
  line-height: 1;
  letter-spacing: var(--tracking-down-2);

  &:not(.text-center) {
    max-width: 30ch;
  }
}
h2, .h2 {
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-down-1);

  &:not(.text-center) {
    max-width: 45ch;
  }
}
h3, .h3 {
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.1;

  &:not(.text-center) {
    max-width: 55ch;
  }
}
h4, .h4 {
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.1;

  &:not(.text-center) {
    max-width: 55ch;
  }
}
h5, .h5 {
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;

  &:not(.text-center) {
    max-width: 75ch;
  }
}
h6, .h6 {
  font-size: var(--step-0);
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;

  &:not(.text-center) {
    max-width: 75ch;
  }
}

/*
 * headline's subsequent elements shall keep a small top margin
 */
:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) + * {
  --flow-space: .5em;
}


/* ----------------------------------------------------------------------------
 * Text: Links
 * ------------------------------------------------------------------------- */
a {
  &:is(:link, :visited) {
    color: currentColor; /* take the same color as the surrounding text */
    text-decoration-skip-ink: auto;
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: 0.3ex;
    text-underline-offset: 0.3ex;
  }

  &:is(:hover, :active, :focus) {
    color: var(--color-primary);
  }
}


/* ----------------------------------------------------------------------------
 * Text: Misc
 * ------------------------------------------------------------------------- */
ul,
ol {
  padding-inline-start: 1em; /* left-align the list with the text */
  list-style: none;
}

/* Remove list styles on ul, ol elements that are not in a .content-text, because these are often used for styling and not for lists */
.content-text ul {
  list-style: disc;
}
.content-text ol {
  list-style: decimal;
}



small {
  font-size: var(--step--1);
  font-weight: 500;
}

blockquote {
  padding-inline-start: 1em;
  border-inline-start: 0.3em solid;
  font-style: italic;
  font-size: var(--size-step-1);
  --flow-space: 1.5em;
  max-width: 65ch;
}


/* ----------------------------------------------------------------------------
 * Images
 * ------------------------------------------------------------------------- */
img,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

figure {
  margin: 0;
}



/* ----------------------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------------------- */
input {
    accent-color: var(--color-primary);
    scroll-margin-top: var(--space-l);
}

input:not([type=checkbox]):not([type=radio]):not([type=range]),
textarea, fieldset {
    background: var(--color-white);
    border: 2px solid var(--color-medium-grey);
    border-radius: 0;
    font-family: var(--body-font-family);
    padding: var(--gutter-size);
    text-indent: 0;
    width: 100%;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

fieldset {
  margin: 0;
}

button, .button, .button:is(:link, :visited) {
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  /*border-radius: 0;*/
  color: var(--color-white);
  text-decoration-color: var(--color-white);
  font-family: var(--body-font-family);
  padding: calc(var(--gutter-size) - 0.5rem) calc(var(--gutter-size) + 0.6rem);
  text-indent: 0;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;

  &:is(:hover,:active,:focus) {
    background: var(--color-white);
    border-color: var(--color-primary);
    color: var(--color-primary);
    cursor: pointer;
  }
}

/* Set shorter line heights on interactive elements */
button, input, label {
  line-height: 1.1;
}

.formbody {
  /*
   * remove margin on columns, to add them later in form elements
   */
  .autogrid_grid .column, .column[class*="col_"] {
    margin-bottom: 0;
  }

  /*
  * Activate vertical flow for forms and form elements
  */
  .widget,
  .widget > * + * {
    margin-block-start: var(--flow-space, 1em);
  }

  .widget {
    --flow-space: var(--gutter-size);
    display: flex;
    flex-wrap: wrap;
  }

  .widget-checkbox {
    fieldset {
      min-width: 150px;
    }

    span {
      display: flex;
      align-items: baseline;
      gap: var(--gutter-size);
    }

    label {
      min-width: 100px;
      text-wrap: balance;
    }
  }

  label + * {
    --flow-space: .25em;
  }
}

/* ----------------------------------------------------------------------------
 * Misc
 * ------------------------------------------------------------------------- */

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}





/* ----------------------------------------------------------------------------
 * Contao utility classes
 * ------------------------------------------------------------------------- */

/*
 * Text color
 */
.color-primary      { && { color: var(--color-primary);   }}
.color-secondary    { && { color: var(--color-secondary); }}
.color-accent1      { && { color: var(--color-accent1);   }}
.color-accent2      { && { color: var(--color-accent2);   }}
.color-accent3      { && { color: var(--color-accent3);   }}

.color-white        { && { color: var(--color-white);           }}
.color-light-grey   { && { color: var(--color-light-grey);      }}
.color-medium-grey  { && { color: var(--color-medium-grey);     }}
.color-dark-grey    { && { color: var(--color-dark-grey);       }}
.color-black        { && { color: var(--color-black);           }}

/*
 * Background color
 */
.bgcolor-primary      { && { background-color: var(--color-primary);   }}
.bgcolor-secondary    { && { background-color: var(--color-secondary); }}
.bgcolor-accent1      { && { background-color: var(--color-accent1);   }}
.bgcolor-accent2      { && { background-color: var(--color-accent2);   }}
.bgcolor-accent3      { && { background-color: var(--color-accent3);   }}

.bgcolor-white        { && { background-color: var(--color-white);           }}
.bgcolor-light-grey   { && { background-color: var(--color-light-grey);      }}
.bgcolor-medium-grey  { && { background-color: var(--color-medium-grey);     }}
.bgcolor-dark-grey    { && { background-color: var(--color-dark-grey);       }}
.bgcolor-black        { && { background-color: var(--color-black);           }}

/*
 * Text alignment
 */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-justify { text-align: justify; }

/*
 * Spacing classes
 * (these also work with the PCT_Autogrid extension)
 */
.mt-0   { && { margin-top: 0; } }
.mt-xxs { && { margin-top: var(--space-3xs); } }
.mt-xs  { && { margin-top: var(--space-2xs); } }
.mt-s   { && { margin-top: var(--space-s); } }
.mt-m   { && { margin-top: var(--space-l); } }
.mt-l   { && { margin-top: var(--space-2xl); } }
.mt-xl  { && { margin-top: var(--space-4xl); } }
.mt-xxl { && { margin-top: var(--space-6xl); } }

.mb-0   { && { margin-bottom: 0; } }
.mb-xxs { && { margin-bottom: var(--space-3xs); } }
.mb-xs  { && { margin-bottom: var(--space-2xs); } }
.mb-s   { && { margin-bottom: var(--space-s); } }
.mb-m   { && { margin-bottom: var(--space-l); } }
.mb-l   { && { margin-bottom: var(--space-2xl); } }
.mb-xl  { && { margin-bottom: var(--space-4xl); } }
.mb-xxl { && { margin-bottom: var(--space-6xl); } }

/*
 * Mobile spacing classes
 * (these are exclusively used by PCT_Autogrid)
 */
@media (0 <= width < 680px) {
  .mt-xxs-m { && { margin-top: var(--space-3xs); } }
  .mt-xs-m  { && { margin-top: var(--space-2xs); } }
  .mt-s-m   { && { margin-top: var(--space-s); } }
  .mt-m-m   { && { margin-top: var(--space-l); } }
  .mt-l-m   { && { margin-top: var(--space-2xl); } }
  .mt-xl-m  { && { margin-top: var(--space-4xl); } }
  .mt-xxl-m { && { margin-top: var(--space-6xl); } }

  .mb-xxs-m { && { margin-bottom: var(--space-3xs); } }
  .mb-xs-m  { && { margin-bottom: var(--space-2xs); } }
  .mb-s-m   { && { margin-bottom: var(--space-s); } }
  .mb-m-m   { && { margin-bottom: var(--space-l); } }
  .mb-l-m   { && { margin-bottom: var(--space-2xl); } }
  .mb-xl-m  { && { margin-bottom: var(--space-4xl); } }
  .mb-xxl-m { && { margin-bottom: var(--space-6xl); } }
}

/*
 * Hide an element, fast
 */
.invisible {
    display: none;
}

/*
 * Hide an element, but only visually
 */
.hidden,
.hidden-focusable:not(:focus):not(:focus-within) {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.hidden:not(caption),
.hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important;
}

/*
 * Round border for elements
 */
.rounded {
  border-radius: var(--border-radius);
}
.rounded-pill {
  border-radius: 50rem;
}


/*
 * Fade in Viewport Animation on Scroll
 */
.fade-in-scroll {
  transform: translateY(80px);
  opacity: 0;
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;

  &.active {
    transform: translateY(0px);
    opacity: 1;
  }
}