:root {
  --indigo-7: #4263eb;
  --purple-7: #ae3ec9;
  --gray-12: #030507;
  --gray-7: #495057;
  --gray-0: #f8f9fa;
  --gray-2: #e9ecef;
  --gray-3: #dee2e6;
  --gray-4: #ced4da;
  --red-6: #fa5252;
  --red-3: #ffa8a8;
  --gray-6: #868e96;
  --purple-4: #da77f2;
  --font-system-ui: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif;
  --font-lineheight-3: 1.5;
  --font-lineheight-1: 1.25;
  --font-weight-9: 900;
  --font-size-8: 3.5rem;
  --size-header-1: 20ch;
  --font-size-6: 2.5rem;
  --size-header-2: 25ch;
  --font-size-5: 2rem;
  --font-size-4: 1.5rem;
  --font-size-3: 1.25rem;
  --size-header-3: 35ch;
  --font-size-2: 1.1rem;
  --indigo-2: #bac8ff;
  --purple-2: #eebefa;
  --size-2: .5rem;
  --size-1: .25rem;
  --size-relative-4: 1.25ch;
  --size-content-1: 20ch;
  --size-3: 1rem;
  --size-10: 5rem;
  --font-monospace-code: Dank Mono,Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace;
  --radius-2: 5px;
  --border-size-1: 1px;
  --size-8: 3rem;
  --size-content-2: 45ch;
  --size-content-3: 60ch;
  --font-weight-7: 700;
  --size-5: 1.5rem;
  --font-size-0: .75rem;
  --size-fluid-5: max(4rem, min(5vw, 5rem));
  --border-size-2: 2px;
  --font-size-1: 1rem;
  --border-size-3: 5px;
  --size-4: 1.25rem;
  --red-9: #c92a2a;
  --red-2: #ffc9c9;
  --green-9: #2b8a3e;
  --green-1: #d3f9d8;
  --blue-5: #339af0;
  --radius-3: 1rem;
  --shadow-6: 
    0 -1px 2px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
    0 3px 2px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 7px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 12px 10px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)),
    0 22px 18px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)),
    0 41px 33px -2px hsl(var(--shadow-color) / var(--shadow-strength-7)),
    0 100px 80px -2px hsl(var(--shadow-color) / var(--shadow-strength-8));
  --base-font-family: var(--font-system-ui);
  --base-font-size: var(--step-0);
  --base-line-height: var(--font-lineheight-3);
  --base-font-weight: var(--font-weight-4);
  --color-page-background: var(--surface-1);
  --color-text: var(--text-1);
  --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
  --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
  --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
  --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
  --font-lineheight-0: 1.1;
  --headings-font-family: var(--base-font-family-1);
  --headings-font-weight: var(--base-font-weight-bold);
  --base-spacing-unit-lg: var(--space-l);
  --base-spacing-unit-sm: var(--space-s);
  --grid-columns: 12;
  --grid-gutter: var(--space-s-m);
  --layout-wrapper-background: transparent;
  --article-max-width: 67.75em;
  --layout-spacing-sides: var(--base-spacing-unit);
  --layout-header-background: var(--color-page-background);
  --layout-header-color: var(--color-text);
  --layout-footer-background: transparent;
  --layout-footer-color: var(--color-text);
  --base-border: var(--base-border-width) solid var(--base-border-color);
  --size-fluid-2: max(1rem, min(2vw, 1.5rem));
  --size-fluid-4: max(2rem, min(4vw, 3rem));
  --article-spacing-top: var(--base-spacing-unit-lg);
  --article-spacing-bottom: var(--base-spacing-unit-lg);
  --color-text-inverted: var(--color-page-background);
  --base-border-radius: var(--radius-2);
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --card-border: var(--base-border);
  --card-border-radius: var(--base-border-radius);
  --card-shadow: var(--base-box-shadow);
  --card-background: var(--surface-4);
  --card-padding: var(--space-xs);
  --base-spacing-unit-xs: var(--space-2xs);
  --shadow-color: 220 3% 15%;
  --shadow-strength-3: calc(var(--shadow-strength) + 2%);
  --shadow-strength-4: calc(var(--shadow-strength) + 3%);
  --shadow-strength-5: calc(var(--shadow-strength) + 4%);
  --shadow-strength-6: calc(var(--shadow-strength) + 5%);
  --shadow-strength-7: calc(var(--shadow-strength) + 6%);
  --shadow-strength-8: calc(var(--shadow-strength) + 7%);
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --font-weight-4: 400;
  --base-font-family-1: var(--font-transitional);
  --base-font-weight-bold: var(--font-weight-6);
  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  --base-spacing-unit: var(--space-m);
  --base-border-width: var(--border-size-1);
  --base-border-color: var(--color-brand);
  --base-box-shadow: var(--shadow-3);
  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  --shadow-strength: 1%;
  --font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif;
  --font-weight-6: 600;
  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  --color-brand: var(--brand);
  --shadow-3: 
    0 -1px 3px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
    0 1px 2px -5px hsl(var(--shadow-color) / var(--shadow-strength-3)),
    0 2px 5px -5px hsl(var(--shadow-color) / var(--shadow-strength-5)),
    0 4px 12px -5px hsl(var(--shadow-color) / var(--shadow-strength-6)),
    0 12px 15px -5px hsl(var(--shadow-color) / var(--shadow-strength-8));
  --indigo-3: #91a7ff;
  --purple-3: #e599f7;
  --stone-1: #f2f4f6;
  --stone-4: #d1d6d8;
  --stone-9: #50514f;
  --stone-8: #666968;
  --stone-7: #7e8282;
  --stone-6: #979b9d;
  --ease-2: cubic-bezier(.25, 0, .4, 1);
}

/**
  * based on
  * Erdmann & Freunde
  * OPTIMIST Contao Theme
  * erdmann-freunde.de/contao-themes/optimist
  *
  * and Open Props https://open-props.style/
**/

/* 1. abstracts */
/* do not import the custom-properties.css - open-jit-props does its work for this file */
/* but optional: put all wanted extra props in here (Maybe some at the end?) */

/* GENERIC */

/* @import "theme.css"; */
/* theme light */
:where(html) {
  --csstools-color-scheme--light: initial;
  color-scheme: light;

  --link: var(--indigo-7);
  --link-visited: var(--purple-7);

  --text-1: var(--gray-12);
  --text-2: var(--gray-7);

  --surface-1: var(--gray-0);
  --surface-2: var(--gray-2);
  --surface-3: var(--gray-3);
  --surface-4: var(--gray-4);

  --scrollthumb-color: var(--gray-7);

  @media (dynamic-range: high) or (color-gamut: p3) {
    @supports (color: color(display-p3 0 0 0)) {
      --link: color(display-p3 .1 .39 1);
      --link-visited: color(display-p3 .6 .2 1);
    }
  }

  & :where(dialog) {
    background-color: var(--surface-1);
  }

  & :where(button,.btn) {
    --_highlight: var(--_highlight-light);
    --_bg: var(--_bg-light);
    --_ink-shadow: var(--_ink-shadow-light);

    & :where([type="reset"]) {
      --_text: var(--red-6);
      --_border: var(--red-3);
    }
  }

  & :where(button,.btn,input:is([type="button"],[type="submit"],[type="reset"]))[disabled] {
    --_text: var(--gray-6);
  }

  & :where(textarea, select, input:not([type="button"]):not([type="submit"]):not([type="reset"])) {
    background-color: var(--surface-2);
  }
}

/* theme dark */
@media (prefers-color-scheme: dark) {
  :where(html) {
    --csstools-color-scheme--light:  ;
    color-scheme: dark;

    --link: var(--indigo-3);
    --link-visited: var(--purple-3);

    --text-1: var(--stone-1);
    --text-2: var(--stone-4);

    --surface-1: var(--stone-9);
    --surface-2: var(--stone-8);
    --surface-3: var(--stone-7);
    --surface-4: var(--stone-6);

    --scrollthumb-color: var(--stone-6);
  }
}

/* @import "brand.css"; */
/* brand */
:where(html) {
  /* --brand: your-brand-color-here; */
  --brand: var(--purple-4);
  
  scrollbar-color: var(--scrollthumb-color) transparent;
  accent-color: var(--brand, var(--link));
  caret-color: var(--brand, var(--link));
  color: var(--text-1);
  background-color: var(--surface-1);
}

:where(a[href]) {
  color: var(--brand, var(--link));
  
  &:where(:visited) {
    color: var(--link-visited);
  }
}

:focus-visible { 
  outline-color: var(--brand, var(--link)); 
}

/* @import "normalize.src.css"; */
*, ::before, ::after { box-sizing: border-box; }

:where(:not(dialog)) {
  margin: 0;
}

:where(:not(fieldset):not(progress):not(meter)) {
  border-width: 0;
  border-style: solid;
  background-origin: border-box;
  background-repeat: no-repeat;
}

:where(html) {
  block-size: 100%;
  font-family: var(--font-system-ui);
  line-height: var(--font-lineheight-3);
  -webkit-text-size-adjust: none; /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :where(:focus-visible) {
    transition: outline-offset 145ms var(--ease-2);
  }
  :where(:not(:active):focus-visible) {
    transition-duration: .25s;
  }
}

:where(:not(:active):focus-visible) {
  outline-offset: 5px;
}

:where(body) {
  min-block-size: 100%;
}

:where(h1, h2, h3, h4, h5, h6) {
  line-height: var(--font-lineheight-1);
  font-weight: var(--font-weight-9);
  text-wrap: balance;
}

:where(h1) {
  font-size: var(--font-size-8);
  max-inline-size: var(--size-header-1);
}

:where(h2) {
  font-size: var(--font-size-6);
  max-inline-size: var(--size-header-2);
}

:where(h3) { font-size: var(--font-size-5) }
:where(h4) { font-size: var(--font-size-4) }
:where(h5) { font-size: var(--font-size-3) }

:where(h3, h4, h5, h6, dt) {
  max-inline-size: var(--size-header-3);
}

:where(p, ul, ol, dl, h6) {
  font-size: var(--font-size-2);
}

:where(a, u, ins, abbr) {
  text-underline-offset: 1px;

  @supports (-moz-appearance: none) {
    text-underline-offset: 2px;
  }
}

:where(a[href], area, button, input:not([type="text"]):not([type="email"]):not([type="number"]):not([type="password"]):not([type=""]):not([type="tel"]):not([type="url"]), label[for], select, summary, [tabindex]:not([tabindex*="-"]):not(pre)) {
  cursor: pointer;
}

:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:where(a) {
  &:where([href]) {
    text-decoration-color: var(--indigo-2);

    &:where(:visited) {
      text-decoration-color: var(--purple-2);
    }
  }

  &:where(:not(:hover)) {
    text-decoration: inherit;
  }
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

:where(img, svg, video) {
  max-inline-size: 100%;
  block-size: auto;
}

:where(input, button, textarea, select),
:where(input[type="file"])::-webkit-file-upload-button {
  font: inherit;
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
}

::-moz-placeholder {
  color: var(--gray-7);
  opacity: .75;
}

::placeholder {
  color: var(--gray-7);
  opacity: .75;
}

:where(input:not([type="range"]), textarea) {
  padding-inline: var(--size-2);
  padding-block: var(--size-1);
}

:where(select) {
  padding-inline: var(--size-relative-4) 0;
  padding-block: .75ch;
  field-sizing: content;
}

:where(textarea, select, input:not([type="button"]):not([type="submit"]):not([type="reset"])) {
  background-color: var(--surface-2);
  border-radius: var(--radius-2);
}

:where(textarea) {
  resize: vertical;
  field-sizing: content;
  min-inline-size: var(--size-content-1);
  min-block-size: 2lh;
}

:where(input[type="checkbox"], input[type="radio"]) {
  block-size: var(--size-3);
  inline-size: var(--size-3);
}

:where(svg:not([width])) {
  inline-size: var(--size-10);
}

:where(code, kbd, samp, pre) { font-family: var(--font-monospace-code), monospace; }
:where(:not(pre) > code, kbd) { white-space: nowrap }

:where(pre) {
  white-space: pre;
  min-inline-size: 0;
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
  writing-mode: lr;
  direction: ltr;
}

:where(:not(pre) > code) {
  padding: var(--size-1) var(--size-2);
  background: var(--surface-2);
  border-radius: var(--radius-2);
  writing-mode: lr;
}

:where(kbd, var) {
  padding: var(--size-1) var(--size-2);
  border-width: var(--border-size-1);
  border-color: var(--surface-4);
  border-radius: var(--radius-2);
}

:where(mark) {
  border-radius: var(--radius-2);
  padding-inline: var(--size-1);
}

:where(ol, ul) { padding-inline-start: var(--size-8) }
:where(li) { padding-inline-start: var(--size-2) }
:where(li, dd, figcaption) { max-inline-size: var(--size-content-2) }
:where(p) { max-inline-size: var(--size-content-3); text-wrap: pretty; }
:where(dt, summary) { font-weight: var(--font-weight-7) }

:where(dt:not(:first-of-type)) {
  margin-block-start: var(--size-5);
}

:where(small) {
  font-size: max(.5em, var(--font-size-0));
  max-inline-size: var(--size-content-1);
}

:where(hr) {
  margin-block: var(--size-fluid-5);
  height: var(--border-size-2);
  background-color: var(--surface-3);
}

:where(figure) {
  display: grid;
  grid-gap: var(--size-2);
  gap: var(--size-2);
  align-items: center;
  justify-items: center;
  place-items: center;

  & > :where(figcaption) {
    font-size: var(--font-size-1);
    text-wrap: balance;
  }
}

:where(blockquote, :not(blockquote) > cite) {
  border-inline-start-width: var(--border-size-3);
}

:where(blockquote) {
  display: grid;
  grid-gap: var(--size-3);
  gap: var(--size-3);
  padding-block: var(--size-3);
  padding-inline: var(--size-4);
  max-inline-size: var(--size-content-2);
}

:where(:not(blockquote) > cite) {
  padding-inline-start: var(--size-2);
}

:where(summary) {
  background: var(--surface-3);
  padding: var(--size-2) var(--size-3);
  margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1);
  border-radius: var(--radius-2);
}

:where(details) {
  padding-inline: var(--size-3);
  padding-block: var(--size-2);
  background: var(--surface-2);
  border-radius: var(--radius-2);
}

:where(details[open] > summary) {
  margin-bottom: var(--size-2);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

:where(fieldset) {
  border-radius: var(--radius-2);
  border: var(--border-size-1) solid var(--surface-4);
}

:where(del) {
  background: var(--red-9);
  color: var(--red-2);
}

:where(ins) {
  background: var(--green-9);
  color: var(--green-1);
}

:where(abbr) {
  text-decoration-color: var(--blue-5);
}

:where(dialog) {
  background-color: var(--surface-1);
  color: inherit;
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-6);
}

:where(menu) {
  padding-inline-start: 0;
  display: flex;
  gap: var(--size-3);
}

:where(sup) {
  font-size: .5em;
}

:where(table) {
  width: -moz-fit-content;
  width: fit-content;
  border: 1px solid var(--surface-2);
  background: var(--surface-2);
  border-radius: var(--radius-3);

  --nice-inner-radius: calc(var(--radius-3) - 2px);
}

:where(table:not(:has(tfoot)) tr:last-child td:first-child) {
  border-end-start-radius: var(--nice-inner-radius);
}

:where(table:not(:has(tfoot)) tr:last-child td:last-child) {
  border-end-end-radius: var(--nice-inner-radius);
}

:where(table thead tr:first-child th:first-child) {
  border-start-start-radius: var(--nice-inner-radius);
}

:where(table thead tr:first-child th:last-child) {
  border-start-end-radius: var(--nice-inner-radius);
}

:where(tfoot tr:last-child :is(th,td):first-of-type) {
  border-end-start-radius: var(--nice-inner-radius);
}

:where(tfoot tr:last-child :is(th,td):last-of-type) {
  border-end-end-radius: var(--nice-inner-radius);
}

:where(th) {
  color: var(--text-1);
  background-color: var(--surface-2);
}

:where(table :is(a, button, [contenteditable]):is(:focus-visible)) {
  outline-offset: -2px;
}

:where(td) {
  background: var(--surface-1);
  max-inline-size: var(--size-content-2);
  text-wrap: pretty;
}

:where(td,th) {
  text-align: left;
  padding: var(--size-2);
}

:where(:is(td,th):not([align])) {
	text-align: center;
}

:where(thead) {
  border-collapse: collapse;
}

:where(table tr:hover td),
:where(tbody tr:nth-child(even):hover td) {
  background-color: var(--surface-3);
}

:where(table > caption) {
  margin: var(--size-3);
}

:where(tfoot button) {
  padding-block: var(--size-1);
  padding-inline: var(--size-3);
}


@media (prefers-color-scheme: dark) {
  :where(textarea, select, input:not([type="button"]):not([type="submit"]):not([type="reset"])) {
    background-color: hsl(210, 11%, 10%);
  }

  :where(dialog) {
    background-color: var(--surface-2);
  }

  :where(html) {
    --shadow-strength: 10%;
    --shadow-color: 220 40% 2%;
  }

  ::-moz-placeholder {
    color: var(--gray-6);
  }

  ::placeholder {
    color: var(--gray-6);
  }
}
/* @import 'assets/generic/reset.css'; */
/** float classes entfernt, gibt es so in Contao 5 nicht mehr  */
.invisible:not(:focus-visible) {
  position: absolute; 
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px; 
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  }


/* BASE */
/** page.css - Beginn  */
/** Setting some fluid font sizes, hence no media queries anymore  */
html {
  font-family: var(--base-font-family);
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
  font-weight: var(--base-font-weight);
  scrollbar-gutter: stable;
  background-color: var(--color-page-background);
  color: var(--color-text);
  /* -webkit-font-smoothing: antialiased; */ /* not needed anymore */

  /* @media screen and (min-width: 34.375em) {
    font-size: var(--base-font-size-sm, var(--base-font-size));
  } */
  /* @media screen and (min-width: 48em) {
    font-size: var(--base-font-size);
  } */
  /* @media screen and (min-width: 58.75em) {
    font-size: var(--base-font-size-lg, var(--base-font-size));
  } */
  /* @media screen and (min-width: 68.75em) {
    font-size: var(--base-font-size-xl);
  } */
}

/** page.css - Ende  */
/* @import 'assets/base/fonts.css'; */
/* @import 'assets/base/type_classic.css'; */
/* was soll hier aus der type_orig noch mit rein??? */

/* headings */
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) }

:is(h1, h2, h3, h4, h5, h6) {
  line-height: var(--font-lineheight-0);
  font-family: var(--headings-font-family);
  font-weight: var(--headings-font-weight);
}

/* Vertikaler Rhythmus */
/* vertikaler Rhythmus von Inhaltselementen */
/* [class*="content-"]:where(:not(:first-child)),
.ce_rowStart, 
:is([class*="content-"], .rte, .layout_latest, .layout_full) > * + * {
  margin-block-start: var(--base-spacing-unit-xs);
}
[class*="content-"]:has(h2, h3, h4, h5, h6) {
  margin-block-start: var(--base-spacing-unit-lg);
} */

/* ==========================================================================
   1. Vertikaler Rhythmus ZWISCHEN Contao-Inhaltselementen
   ========================================================================== */

/* Alle direkten Kinder in Artikeln */
.mod_article > .inside > * + * {
  margin-block-start: var(--base-spacing-unit-lg, 2rem);
}

:is([class*="content-"], .rte) {
  /* Standardschritt: Welches Element auch immer auf ein anderes folgt */
  & > * + *:not(hr) {
    margin-block-start: var(--base-spacing-unit-sm, 1rem);
  }
}
/** grid.css - Beginn  */
/* 12 Column Grid for Contao */
/* Use with erdmannfreunde/contao-grid-bundle */
.row {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  grid-column-gap: var(--grid-gutter);
  -moz-column-gap: var(--grid-gutter);
       column-gap: var(--grid-gutter);
  grid-row-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
  grid-auto-columns: 1fr;
}

.row--gap-y {
  row-gap: var(--grid-gutter);
}

[class*="article-"] > .inside > *,
.ce_gallery > ul li,
[class*="col-"] {
  display: grid;
  grid-column: 1 / -1;
  max-width: 100%;
}

.col { 
  grid-column: 1/-1;
}

/* Basis Grid-Klassen (ohne Breakpoint) */
.col-1  { grid-column: span 1 / span 1; }
.col-2  { grid-column: span 2 / span 2; }
.col-3  { grid-column: span 3 / span 3; }
.col-4  { grid-column: span 4 / span 4; }
.col-5  { grid-column: span 5 / span 5; }
.col-6  { grid-column: span 6 / span 6; }
.col-7  { grid-column: span 7 / span 7; }
.col-8  { grid-column: span 8 / span 8; }
.col-9  { grid-column: span 9 / span 9; }
.col-10 { grid-column: span 10 / span 10; }
.col-11 { grid-column: span 11 / span 11; }
.col-12 { grid-column: span 12 / span 12; }

.row-start-1  { grid-row-start: 1; }
.row-start-2  { grid-row-start: 2; }
.row-start-3  { grid-row-start: 3; }
.row-start-4  { grid-row-start: 4; }
.row-start-5  { grid-row-start: 5; }
.row-start-6  { grid-row-start: 6; }
.row-start-7  { grid-row-start: 7; }
.row-start-8  { grid-row-start: 8; }
.row-start-9  { grid-row-start: 9; }
.row-start-10 { grid-row-start: 10; }
.row-start-11 { grid-row-start: 11; }
.row-start-12 { grid-row-start: 12; }

.row-span-1  { grid-row: span 1 / span 1; }
.row-span-2  { grid-row: span 2 / span 2; }
.row-span-3  { grid-row: span 3 / span 3; }
.row-span-4  { grid-row: span 4 / span 4; }
.row-span-5  { grid-row: span 5 / span 5; }
.row-span-6  { grid-row: span 6 / span 6; }
.row-span-7  { grid-row: span 7 / span 7; }
.row-span-8  { grid-row: span 8 / span 8; }
.row-span-9  { grid-row: span 9 / span 9; }
.row-span-10 { grid-row: span 10 / span 10; }
.row-span-11 { grid-row: span 11 / span 11; }
.row-span-12 { grid-row: span 12 / span 12; }

/* XS-Klassen (min-width: 0 entfernt, da auf Mobilgeräten ohnehin immer aktiv) */
.col-xs-1  { grid-column: span 1 / span 1; }
.col-xs-2  { grid-column: span 2 / span 2; }
.col-xs-3  { grid-column: span 3 / span 3; }
.col-xs-4  { grid-column: span 4 / span 4; }
.col-xs-5  { grid-column: span 5 / span 5; }
.col-xs-6  { grid-column: span 6 / span 6; }
.col-xs-7  { grid-column: span 7 / span 7; }
.col-xs-8  { grid-column: span 8 / span 8; }
.col-xs-9  { grid-column: span 9 / span 9; }
.col-xs-10 { grid-column: span 10 / span 10; }
.col-xs-11 { grid-column: span 11 / span 11; }
.col-xs-12 { grid-column: span 12 / span 12; }

.row-span-xs-1  { grid-row: span 1 / span 1; }
.row-span-xs-2  { grid-row: span 2 / span 2; }
.row-span-xs-3  { grid-row: span 3 / span 3; }
.row-span-xs-4  { grid-row: span 4 / span 4; }
.row-span-xs-5  { grid-row: span 5 / span 5; }
.row-span-xs-6  { grid-row: span 6 / span 6; }
.row-span-xs-7  { grid-row: span 7 / span 7; }
.row-span-xs-8  { grid-row: span 8 / span 8; }
.row-span-xs-9  { grid-row: span 9 / span 9; }
.row-span-xs-10 { grid-row: span 10 / span 10; }
.row-span-xs-11 { grid-row: span 11 / span 11; }
.row-span-xs-12 { grid-row: span 12 / span 12; }

.col-start-xs-1  { grid-column-start: 1; }
.col-start-xs-2  { grid-column-start: 2; }
.col-start-xs-3  { grid-column-start: 3; }
.col-start-xs-4  { grid-column-start: 4; }
.col-start-xs-5  { grid-column-start: 5; }
.col-start-xs-6  { grid-column-start: 6; }
.col-start-xs-7  { grid-column-start: 7; }
.col-start-xs-8  { grid-column-start: 8; }
.col-start-xs-9  { grid-column-start: 9; }
.col-start-xs-10 { grid-column-start: 10; }
.col-start-xs-11 { grid-column-start: 11; }
.col-start-xs-12 { grid-column-start: 12; }

.row-start-xs-1  { grid-row-start: 1; }
.row-start-xs-2  { grid-row-start: 2; }
.row-start-xs-3  { grid-row-start: 3; }
.row-start-xs-4  { grid-row-start: 4; }
.row-start-xs-5  { grid-row-start: 5; }
.row-start-xs-6  { grid-row-start: 6; }
.row-start-xs-7  { grid-row-start: 7; }
.row-start-xs-8  { grid-row-start: 8; }
.row-start-xs-9  { grid-row-start: 9; }
.row-start-xs-10 { grid-row-start: 10; }
.row-start-xs-11 { grid-row-start: 11; }
.row-start-xs-12 { grid-row-start: 12; }

.pull-right-xs { grid-column-end: -1; }
.pull-left-xs  { grid-row-start: 1; grid-column-end: inherit; }

.justify-xs-start  { justify-self: start; text-align: left; }
.justify-xs-center { justify-self: center; text-align: center; }
.justify-xs-end    { justify-self: end; text-align: right; }

.align-xs-start  { align-self: start; }
.align-xs-center { align-self: center; }
.align-xs-end    { align-self: end; }

/* SM Breakpoint (>= 550px / 34.375em) */
@media screen and (min-width: 34.375em) {
  .col-sm-1  { grid-column: span 1 / span 1; }
  .col-sm-2  { grid-column: span 2 / span 2; }
  .col-sm-3  { grid-column: span 3 / span 3; }
  .col-sm-4  { grid-column: span 4 / span 4; }
  .col-sm-5  { grid-column: span 5 / span 5; }
  .col-sm-6  { grid-column: span 6 / span 6; }
  .col-sm-7  { grid-column: span 7 / span 7; }
  .col-sm-8  { grid-column: span 8 / span 8; }
  .col-sm-9  { grid-column: span 9 / span 9; }
  .col-sm-10 { grid-column: span 10 / span 10; }
  .col-sm-11 { grid-column: span 11 / span 11; }
  .col-sm-12 { grid-column: span 12 / span 12; }

  .row-span-sm-1  { grid-row: span 1 / span 1; }
  .row-span-sm-2  { grid-row: span 2 / span 2; }
  .row-span-sm-3  { grid-row: span 3 / span 3; }
  .row-span-sm-4  { grid-row: span 4 / span 4; }
  .row-span-sm-5  { grid-row: span 5 / span 5; }
  .row-span-sm-6  { grid-row: span 6 / span 6; }
  .row-span-sm-7  { grid-row: span 7 / span 7; }
  .row-span-sm-8  { grid-row: span 8 / span 8; }
  .row-span-sm-9  { grid-row: span 9 / span 9; }
  .row-span-sm-10 { grid-row: span 10 / span 10; }
  .row-span-sm-11 { grid-row: span 11 / span 11; }
  .row-span-sm-12 { grid-row: span 12 / span 12; }

  .col-start-sm-1  { grid-column-start: 1; }
  .col-start-sm-2  { grid-column-start: 2; }
  .col-start-sm-3  { grid-column-start: 3; }
  .col-start-sm-4  { grid-column-start: 4; }
  .col-start-sm-5  { grid-column-start: 5; }
  .col-start-sm-6  { grid-column-start: 6; }
  .col-start-sm-7  { grid-column-start: 7; }
  .col-start-sm-8  { grid-column-start: 8; }
  .col-start-sm-9  { grid-column-start: 9; }
  .col-start-sm-10 { grid-column-start: 10; }
  .col-start-sm-11 { grid-column-start: 11; }
  .col-start-sm-12 { grid-column-start: 12; }

  .row-start-sm-1  { grid-row-start: 1; }
  .row-start-sm-2  { grid-row-start: 2; }
  .row-start-sm-3  { grid-row-start: 3; }
  .row-start-sm-4  { grid-row-start: 4; }
  .row-start-sm-5  { grid-row-start: 5; }
  .row-start-sm-6  { grid-row-start: 6; }
  .row-start-sm-7  { grid-row-start: 7; }
  .row-start-sm-8  { grid-row-start: 8; }
  .row-start-sm-9  { grid-row-start: 9; }
  .row-start-sm-10 { grid-row-start: 10; }
  .row-start-sm-11 { grid-row-start: 11; }
  .row-start-sm-12 { grid-row-start: 12; }

  .pull-right-sm { grid-column-end: -1; }
  .pull-left-sm  { grid-row-start: 1; grid-column-end: inherit; }

  .justify-sm-start  { justify-self: start; text-align: left; }
  .justify-sm-center { justify-self: center; text-align: center; }
  .justify-sm-end    { justify-self: end; text-align: right; }

  .align-sm-start  { align-self: start; }
  .align-sm-center { align-self: center; }
  .align-sm-end    { align-self: end; }
}

/* MD Breakpoint (>= 768px / 48em) */
@media screen and (min-width: 48em) {
  .col-md-1  { grid-column: span 1 / span 1; }
  .col-md-2  { grid-column: span 2 / span 2; }
  .col-md-3  { grid-column: span 3 / span 3; }
  .col-md-4  { grid-column: span 4 / span 4; }
  .col-md-5  { grid-column: span 5 / span 5; }
  .col-md-6  { grid-column: span 6 / span 6; }
  .col-md-7  { grid-column: span 7 / span 7; }
  .col-md-8  { grid-column: span 8 / span 8; }
  .col-md-9  { grid-column: span 9 / span 9; }
  .col-md-10 { grid-column: span 10 / span 10; }
  .col-md-11 { grid-column: span 11 / span 11; }
  .col-md-12 { grid-column: span 12 / span 12; }

  .row-span-md-1  { grid-row: span 1 / span 1; }
  .row-span-md-2  { grid-row: span 2 / span 2; }
  .row-span-md-3  { grid-row: span 3 / span 3; }
  .row-span-md-4  { grid-row: span 4 / span 4; }
  .row-span-md-5  { grid-row: span 5 / span 5; }
  .row-span-md-6  { grid-row: span 6 / span 6; }
  .row-span-md-7  { grid-row: span 7 / span 7; }
  .row-span-md-8  { grid-row: span 8 / span 8; }
  .row-span-md-9  { grid-row: span 9 / span 9; }
  .row-span-md-10 { grid-row: span 10 / span 10; }
  .row-span-md-11 { grid-row: span 11 / span 11; }
  .row-span-md-12 { grid-row: span 12 / span 12; }

  .col-start-md-1  { grid-column-start: 1; }
  .col-start-md-2  { grid-column-start: 2; }
  .col-start-md-3  { grid-column-start: 3; }
  .col-start-md-4  { grid-column-start: 4; }
  .col-start-md-5  { grid-column-start: 5; }
  .col-start-md-6  { grid-column-start: 6; }
  .col-start-md-7  { grid-column-start: 7; }
  .col-start-md-8  { grid-column-start: 8; }
  .col-start-md-9  { grid-column-start: 9; }
  .col-start-md-10 { grid-column-start: 10; }
  .col-start-md-11 { grid-column-start: 11; }
  .col-start-md-12 { grid-column-start: 12; }

  .row-start-md-1  { grid-row-start: 1; }
  .row-start-md-2  { grid-row-start: 2; }
  .row-start-md-3  { grid-row-start: 3; }
  .row-start-md-4  { grid-row-start: 4; }
  .row-start-md-5  { grid-row-start: 5; }
  .row-start-md-6  { grid-row-start: 6; }
  .row-start-md-7  { grid-row-start: 7; }
  .row-start-md-8  { grid-row-start: 8; }
  .row-start-md-9  { grid-row-start: 9; }
  .row-start-md-10 { grid-row-start: 10; }
  .row-start-md-11 { grid-row-start: 11; }
  .row-start-md-12 { grid-row-start: 12; }

  .pull-right-md { grid-column-end: -1; }
  .pull-left-md  { grid-row-start: 1; grid-column-end: inherit; }

  .justify-md-start  { justify-self: start; text-align: left; }
  .justify-md-center { justify-self: center; text-align: center; }
  .justify-md-end    { justify-self: end; text-align: right; }

  .align-md-start  { align-self: start; }
  .align-md-center { align-self: center; }
  .align-md-end    { align-self: end; }
}

/* LG Breakpoint (>= 940px / 58.75em) */
@media screen and (min-width: 58.75em) {
  .col-lg-1  { grid-column: span 1 / span 1; }
  .col-lg-2  { grid-column: span 2 / span 2; }
  .col-lg-3  { grid-column: span 3 / span 3; }
  .col-lg-4  { grid-column: span 4 / span 4; }
  .col-lg-5  { grid-column: span 5 / span 5; }
  .col-lg-6  { grid-column: span 6 / span 6; }
  .col-lg-7  { grid-column: span 7 / span 7; }
  .col-lg-8  { grid-column: span 8 / span 8; }
  .col-lg-9  { grid-column: span 9 / span 9; }
  .col-lg-10 { grid-column: span 10 / span 10; }
  .col-lg-11 { grid-column: span 11 / span 11; }
  .col-lg-12 { grid-column: span 12 / span 12; }

  .row-span-lg-1  { grid-row: span 1 / span 1; }
  .row-span-lg-2  { grid-row: span 2 / span 2; }
  .row-span-lg-3  { grid-row: span 3 / span 3; }
  .row-span-lg-4  { grid-row: span 4 / span 4; }
  .row-span-lg-5  { grid-row: span 5 / span 5; }
  .row-span-lg-6  { grid-row: span 6 / span 6; }
  .row-span-lg-7  { grid-row: span 7 / span 7; }
  .row-span-lg-8  { grid-row: span 8 / span 8; }
  .row-span-lg-9  { grid-row: span 9 / span 9; }
  .row-span-lg-10 { grid-row: span 10 / span 10; }
  .row-span-lg-11 { grid-row: span 11 / span 11; }
  .row-span-lg-12 { grid-row: span 12 / span 12; }

  .col-start-lg-1  { grid-column-start: 1; }
  .col-start-lg-2  { grid-column-start: 2; }
  .col-start-lg-3  { grid-column-start: 3; }
  .col-start-lg-4  { grid-column-start: 4; }
  .col-start-lg-5  { grid-column-start: 5; }
  .col-start-lg-6  { grid-column-start: 6; }
  .col-start-lg-7  { grid-column-start: 7; }
  .col-start-lg-8  { grid-column-start: 8; }
  .col-start-lg-9  { grid-column-start: 9; }
  .col-start-lg-10 { grid-column-start: 10; }
  .col-start-lg-11 { grid-column-start: 11; }
  .col-start-lg-12 { grid-column-start: 12; }

  .row-start-lg-1  { grid-row-start: 1; }
  .row-start-lg-2  { grid-row-start: 2; }
  .row-start-lg-3  { grid-row-start: 3; }
  .row-start-lg-4  { grid-row-start: 4; }
  .row-start-lg-5  { grid-row-start: 5; }
  .row-start-lg-6  { grid-row-start: 6; }
  .row-start-lg-7  { grid-row-start: 7; }
  .row-start-lg-8  { grid-row-start: 8; }
  .row-start-lg-9  { grid-row-start: 9; }
  .row-start-lg-10 { grid-row-start: 10; }
  .row-start-lg-11 { grid-row-start: 11; }
  .row-start-lg-12 { grid-row-start: 12; }

  .pull-right-lg { grid-column-end: -1; }
  .pull-left-lg  { grid-row-start: 1; grid-column-end: inherit; }

  .justify-lg-start  { justify-self: start; text-align: left; }
  .justify-lg-center { justify-self: center; text-align: center; }
  .justify-lg-end    { justify-self: end; text-align: right; }

  .align-lg-start  { align-self: start; }
  .align-lg-center { align-self: center; }
  .align-lg-end    { align-self: end; }
}

/* XL Breakpoint (>= 1100px / 68.75em) */
@media screen and (min-width: 68.75em) {
  .col-xl-1  { grid-column: span 1 / span 1; }
  .col-xl-2  { grid-column: span 2 / span 2; }
  .col-xl-3  { grid-column: span 3 / span 3; }
  .col-xl-4  { grid-column: span 4 / span 4; }
  .col-xl-5  { grid-column: span 5 / span 5; }
  .col-xl-6  { grid-column: span 6 / span 6; }
  .col-xl-7  { grid-column: span 7 / span 7; }
  .col-xl-8  { grid-column: span 8 / span 8; }
  .col-xl-9  { grid-column: span 9 / span 9; }
  .col-xl-10 { grid-column: span 10 / span 10; }
  .col-xl-11 { grid-column: span 11 / span 11; }
  .col-xl-12 { grid-column: span 12 / span 12; }

  .row-span-xl-1  { grid-row: span 1 / span 1; }
  .row-span-xl-2  { grid-row: span 2 / span 2; }
  .row-span-xl-3  { grid-row: span 3 / span 3; }
  .row-span-xl-4  { grid-row: span 4 / span 4; }
  .row-span-xl-5  { grid-row: span 5 / span 5; }
  .row-span-xl-6  { grid-row: span 6 / span 6; }
  .row-span-xl-7  { grid-row: span 7 / span 7; }
  .row-span-xl-8  { grid-row: span 8 / span 8; }
  .row-span-xl-9  { grid-row: span 9 / span 9; }
  .row-span-xl-10 { grid-row: span 10 / span 10; }
  .row-span-xl-11 { grid-row: span 11 / span 11; }
  .row-span-xl-12 { grid-row: span 12 / span 12; }

  .col-start-xl-1  { grid-column-start: 1; }
  .col-start-xl-2  { grid-column-start: 2; }
  .col-start-xl-3  { grid-column-start: 3; }
  .col-start-xl-4  { grid-column-start: 4; }
  .col-start-xl-5  { grid-column-start: 5; }
  .col-start-xl-6  { grid-column-start: 6; }
  .col-start-xl-7  { grid-column-start: 7; }
  .col-start-xl-8  { grid-column-start: 8; }
  .col-start-xl-9  { grid-column-start: 9; }
  .col-start-xl-10 { grid-column-start: 10; }
  .col-start-xl-11 { grid-column-start: 11; }
  .col-start-xl-12 { grid-column-start: 12; }

  .row-start-xl-1  { grid-row-start: 1; }
  .row-start-xl-2  { grid-row-start: 2; }
  .row-start-xl-3  { grid-row-start: 3; }
  .row-start-xl-4  { grid-row-start: 4; }
  .row-start-xl-5  { grid-row-start: 5; }
  .row-start-xl-6  { grid-row-start: 6; }
  .row-start-xl-7  { grid-row-start: 7; }
  .row-start-xl-8  { grid-row-start: 8; }
  .row-start-xl-9  { grid-row-start: 9; }
  .row-start-xl-10 { grid-row-start: 10; }
  .row-start-xl-11 { grid-row-start: 11; }
  .row-start-xl-12 { grid-row-start: 12; }

  .pull-right-xl { grid-column-end: -1; }
  .pull-left-xl  { grid-row-start: 1; grid-column-end: inherit; }

  .justify-xl-start  { justify-self: start; text-align: left; }
  .justify-xl-center { justify-self: center; text-align: center; }
  .justify-xl-end    { justify-self: end; text-align: right; }

  .align-xl-start  { align-self: start; }
  .align-xl-center { align-self: center; }
  .align-xl-end    { align-self: end; }
}

/* Ausfallendes Utility Alignment */
.justify-start  { justify-self: start; text-align: left; }
.justify-center { justify-self: center; text-align: center; }
.justify-end    { justify-self: end; text-align: right; }

.align-start  { align-self: start; }
.align-center { align-self: center; }
.align-end    { align-self: end; }

.row-start  { align-self: start; }
.row-center { align-content: center; }
/** grid.css - Ende  */
/** ..assets/base/layout.css - Beginn  */
#wrapper {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--layout-wrapper-background);
}

:is(#header, #footer) > .inside {
  max-width: var(--article-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-spacing-sides);
}

#header {
  background: var(--layout-header-background);
  color: var(--layout-header-color);
}

#footer {
  background: var(--layout-footer-background);
  color: var(--layout-footer-color);

  /* & a {
    color: inherit;
  } */
}
/** ..assets/base/layout.css - Ende  */

/** .additional layout.css - Beginn  */
@media screen and (max-width: 51.9375em) {
  .html--fixed {
    overflow: hidden;
    overscroll-behavior: none;
    /* position: fixed; */
    /* height: 100%; */
    /* width: 100%; */
  }
}

#header .inside {
  padding-block: var(--base-spacing-unit-sm);
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  position: relative;
}
#header html.html--fixed {
  pointer-events: none;
}

#footer {
  border-top: var(--base-border);

  & .inside {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-block: var(--size-fluid-2) var(--size-fluid-4);
  }
}

/** .additional layout.css - Ende  */
/** ...theme/scss/base/layout.scss - Ende  */

/* html:has(.hero-alt) {
  --base-border-radius: 5px;
  
  [id=header] {
    background-color: hsl(100 100 100 / .75);
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  .hero-alt .content-text {
    padding: var(--base-spacing-unit);
    border-radius: var(--base-border-radius);
    margin-inline: var(--base-spacing-unit-lg);
  }
} */
/** assets/base/article.css - Beginn  */
.mod_article {
  position: relative;

  & > .inside {
    max-width: var(--article-max-width);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--layout-spacing-sides);
    padding-block: var(--article-spacing-top) var(--article-spacing-bottom);
  }
  /* &:first-of-type > .inside {
    padding-block-start: 0;
  } */
}

/* full width article */
.mod_article--full > .inside {
  max-width: none;
  width: 100%;
  margin-inline: auto;
  padding-block: 0;
  padding-inline: 0;
}

/** assets/base/article.css - Ende  */

/** more article variants - Beginn  */
/* .mod_article--highlight {
  background: var(--article-highlight-background);
  color: var(--article-highlight-color);
  & a {
  color: inherit;
  }
} */

/* don't use the following with light dark - use .mod_article--inverse instead */
/* .mod_article--dark {
  background: var(--article-dark-background);
  color: var(--article-dark-color);
} */

/* .mod_article--tint {
  background: var(--article-tint-background);
} */

/* .article--bubble-left {
  background-image: url("/files/theme/img/background-bubble-left.svg");
  background-repeat: no-repeat;
  background-position: -1% 0;
}
.article--bubble-right {
  background-image: url("/files/theme/img/background-bubble-right.svg");
  background-repeat: no-repeat;
  background-position: 100% 0;
} */

/* .article--tint {
  background-color: var(--article-tint-background);
  background-repeat: no-repeat;
  background-position: 50% 101%;
  & > .inside {
    padding-block: var(--base-spacing-unit-lg);

    @media screen and (min-width: 48em) {
      padding-block: calc(2 * var(--base-spacing-unit-xl));
    }
  }
  &::before, 
  &::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(1.5 * var(--base-spacing-unit-xl));
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-size: 100% 100%;
  }
  &::before {
    top: 0;
    background-image: url("/files/theme/img/background-bubble-bottom.svg");
    transform: rotate(180deg);
    background-position-y: 0;
  }
  &::after {
    background-image: url("/files/theme/img/background-bubble-bottom.svg");
    bottom: 0;
  }
  & .inside {
    position: relative;
    z-index: 999;
  }
} */

.hero-alt .inside {
  display: grid;
  grid-template-areas: "hero";
  height: 90svh;
  /* max-height: 800px; */
  align-items: end;
  justify-items: center;
  place-items: end center;

  > * {
    grid-area: hero;
    color: var(--color-text-inverted);
  }
  .content-text {
    z-index: 1;
    background-color: hsla(132, 52%, 29%, 0.5); /* entspricht green-10 mit 50% Opacity */
  }
  img {
    -o-object-fit: cover;
       object-fit: cover;
    /* height: min(85vh, 800px); */
    height: 90svh;
    width: 100%;
    overflow: hidden;
    z-index: -1;
  }
}
/** more article variants - Ende  */

/* COMPONENTS */
.media {
  display: flow-root;

  & p {
    max-inline-size: none;
  }
}

.media.media--right figure {
  float: right;
  margin-block: var(--base-spacing-unit-sm, 1rem);
  margin-inline-start: var(--base-spacing-unit-sm, 1rem);

  
}

.media.media--left figure {
  float: left;
  margin-block: var(--base-spacing-unit-sm, 1rem);
  margin-inline-end: var(--base-spacing-unit-sm, 1rem);
}

/* .content-text.media--left, .content-text.media--right {
  flex-wrap: wrap;
  display: flex;
}
.content-text.media--left figure, .content-text.media--right figure {
  position: relative;
  margin-bottom: var(--grid-gutter);
}
@media screen and (min-width: 34.375em) {
  .content-text.media--left figure, .content-text.media--right figure {
    flex: 0 1 40%;
    margin-bottom: 0;
  }
}
.content-text.media--left .rte, .content-text.media--right .rte {
  flex: 1 0 calc(60% - var(--grid-gutter));
}
@media screen and (min-width: 34.375em) {
  .content-text.media--left figure {
    margin-right: var(--grid-gutter);
  }
}
@media screen and (min-width: 34.375em) {
  .content-text.media--right figure {
    margin-left: var(--grid-gutter);
    order: 1;
  }
}
:is(.content-text, .content-image, .content-gallery) figcaption {
  font-size: var(--base-font-size-sm);
  text-align: center;
  margin-block-start: var(--base-spacing-unit-sm);

  strong {
    font-size: var(--base-font-size-xl);
  }
} */
/* @import 'assets/components/links.css'; */
/* @import 'assets/components/navs.css'; */
/* @import 'assets/components/slider.css'; */
/* @import 'assets/components/news.css'; */
/* @import 'assets/components/events.css'; */
/* @import 'assets/components/forms.css'; */
/* @import 'assets/components/accordion.css'; */
/* @import 'assets/components/downloads.css'; */
/* @import 'assets/components/downloads-2.css'; */
table {
  border-radius: var(--base-border-radius);

  --nice-inner-radius: calc(var(--base-border-radius) - 2px);
}

tfoot td {
  background-color: var(--surface-2);
}

td,th {
  padding: var(--space-3xs);
}
/* @import 'assets/components/newsletter.css'; */
/* @import 'assets/components/faq.css'; */
/* @import 'assets/components/comments.css'; */
/* @import 'assets/components/search.css'; */

/* .... optimist theme only */
/* @import 'assets/components/logo.css'; */
/* @import 'assets/components/facts.css'; */
/* @import 'assets/components/notes.css'; */
/** ...theme/scss/components/card.scss - Beginn  */
.card {
  border: var(--card-border);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  background: var(--card-background);
  padding: var(--card-padding);
  transition: box-shadow 0.3s, transform 0.6s;
  color: var(--text-1);
  display: flex;
  flex-direction: column;

  &:has(a):hover {
    transform: translate3d(0, -4px, 0);
  }
  & figure {
    order: -1;
    margin-block: 0 var(--base-spacing-unit-xs);
  }
  & .rte {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
}

/** ...theme/scss/components/card.scss - Ende  */

.photo-card {
  padding-block-start: 0;
  padding-inline: 0;
  overflow: hidden;

  > :not(figure) {
    padding-inline: var(--card-padding);
  }
}

/* TRUMPS */
/* @import 'assets/trumps/helper.css'; */
/* @import 'assets/trumps/print.css'; */
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-color: 220 40% 2%;
    --shadow-strength: 25%;
  }
}

/* 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);
}
/* Put theme specific styles here */
div.content-element-details:not(:first-child) {
  margin-block-start: 1px;
}

summary {
  cursor: pointer;
}

summary::marker {
	content: "💀 ";
}

details[open] summary::marker {
  content: "☠️ ";
}

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