@charset "UTF-8";
:root {
  /* ─── COLORS — Brand ──────────────────────────────────────────────── */
  --color-white: #fff;
  --color-black: #1E1E1E;
  --color-green-dark: #166A6A;
  --color-green-dark-transperent: rgba(22, 106, 106, 0.88);
  --color-green: #00AAAA;
  --color-green-light: #80D5D5;
  --color-green-lightup: #E4FF3D;
  /* Greys */
  --color-grey-dark: #3D3E40;
  --color-grey: #6B6C6E;
  --color-grey-light-medium: #C9CACC;
  --color-grey-light: #ECECEC;
  --color-grey-soft: #EAEEF1;
  /* Aliases — US-Schreibweise und „weiches" Hintergrund-Grau */
  --color-gray-dark: var(--color-grey-dark);
  --color-bg-soft: var(--color-grey-soft);
  /* Blau-Akzente — Map-Filter, Breadcrumb, Pin-Preview */
  --color-blue: #2F6FB0;
  --color-blue-light: #E1ECF7;
  --color-blue-dark: #34495E;
  --color-blue-dark-hover: #2C3E50;
  --color-blue-clear: #1B3A5C;
  /* Status / Destructive */
  --color-red: #C0392B;
  /* Transparent */
  --color-opaque: rgba(0, 0, 0, 0);
  --color-opace: var(--color-opaque);
  /* ─── COLORS — System ─────────────────────────────────────────────── */
  --color-primary: var(--color-green);
  --color-meta-main: var(--color-green-dark);
  --color-meta-alternative: var(--color-white);
  --color-secondary: var(--color-green-light);
  --color-card-bg: var(--color-grey-soft);
  --color-footer: var(--color-white);
  --color-footer-bg: var(--color-primary);
  --color-footer-supplementary: var(--color-white);
  --color-footer-supplementary-bg: var(--color-grey-dark);
  --color-text: var(--color-black);
  --c-intro-h1: var(--color-black);
  --active-opacity: .7;
  /* ─── SPACING ─────────────────────────────────────────────────────── */
  --space-small: .4rem;
  --space: 1rem;
  --space-large: 2rem;
  --space-larger: 4rem;
  /* dangling Aliase auflösen — bewusst auf bestehende Skala gemappt */
  --space-in-boxes: var(--space);
  --content-space: var(--space-large);
  --content-space-small: var(--space);
  /* Grid gap — responsive */
  --gap: var(--space);
}
@media (min-width: 48em) {
  :root {
    --gap: var(--space-large);
  }
}
:root {
  /* ─── BORDER-RADIUS (Legacy-Aliase, von Components verwendet) ───────── */
  /* Phase-4-Skala (--radius-sm/md/lg etc.) wurde nach `_tokens-app.scss`
     ausgelagert, weil `cms.scss` sonst Craft-CP-Tokens überschreiben würde
     (z. B. .pane-tabs Tab-Eckenradien). */
  --border-radius: 1rem;
  --border-radius-small: 37.5px;
  --border-radius-large: 37.5px;
}
/* ─────────────────────────────────────────────────────────────────────
   Frontend-only design tokens.

   Diese Sektion bewusst NICHT in `_variables-root.scss`, weil das von
   `cms.scss` importiert wird und ins Craft-CP-CSS leakt. Token-Namen
   wie `--radius-lg`, `--fs-base`, `--shadow-sm` kollidieren mit den
   internen Craft-CP-Tokens und überschreiben dort z. B. die Tab-Eck-
   Radien.
   ───────────────────────────────────────────────────────────────────── */
:root {
  /* ─── BORDER-RADIUS (Phase-4-Skala) ─────────────────────────────── */
  --radius-sm: 0.25rem;
  --radius-md: 1rem;
  --radius-lg: 2rem;
  --radius-pill: 999px;
  --radius-circle: 50%;
  /* ─── SHADOWS ───────────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 20px 20px rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 .5rem .5rem rgba(0, 0, 0, 0.15);
  /* ─── Z-INDEX-STACK ─────────────────────────────────────────────── */
  --z-base: 1;
  --z-content: 10;
  --z-sticky: 20;
  --z-header: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 10000;
  /* ─── MOTION ────────────────────────────────────────────────────── */
  --duration-fast: .15s;
  --duration-base: .3s;
  --duration-slow: .6s;
  --easing-base: ease;
  --easing-out: ease-out;
  --easing-in-out: ease-in-out;
  /* ─── TYPOGRAPHY ────────────────────────────────────────────────── */
  --font-title: "Outfit", sans-serif;
  --font-text: "Inter", sans-serif;
  /* Font-Size-Skala (modular, ratio ~1.18) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.8125rem;
  --fs-3xl: 3.75rem;
  /* Heading-Aliase — responsiv */
  --fs-h1: var(--fs-xl);
  --fs-h2: var(--fs-lg);
  --fs-h3: var(--fs-md);
  --fs-h4: var(--fs-base);
}
@media (min-width: 48em) {
  :root {
    --fs-h1: var(--fs-3xl);
    --fs-h2: var(--fs-2xl);
    --fs-h3: var(--fs-xl);
    --fs-h4: var(--fs-lg);
  }
}
:root {
  /* Line-Height */
  --lh-tight: 1.1;
  --lh-normal: 1.4;
  --lh-relaxed: 1.7;
  /* Font-Weight-Skala */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-extra: 900;
}
/* ─────────────────────────────────────────────────────────────────────
   Girlstrophy Brand-Overrides.

   Wird NACH _variables-root und _tokens-app geladen — die Werte hier
   überschreiben die uvsga-Defaults. Nur das auflisten, was anders sein
   soll. Alles weitere (Spacing, Radii, Typography, Greys, Blau-Akzente)
   bleibt von der Default-Token-Schicht.
   ───────────────────────────────────────────────────────────────────── */
:root {
  /* ─── BRAND COLORS — Girlstrophy (Pink/Magenta) ─────────────────── */
  --color-primary: #D22E77;
  --color-secondary: #FCC2D7;
  --color-meta-main: #3F186C;
  --color-meta-alternative: var(--color-white);
  /* ─── ROSE — konkreter Brand-Farbwert. */
  --color-rose: #E64980;
  /* ─── THEME — semantischer Slot für die Theme-Hintergrundfarbe.
         Verweist auf eine konkrete Farb-Variable (rose / primary / …),
         damit man entweder den Hex-Wert in `--color-rose` ändert oder
         hier auf eine andere Farb-Variable umhängt. theme-header.twig
         löst auf `var(--color-main-background, <preset.bg>)` auf. */
  --color-main-background: var(--color-rose);
  /* ─── SYSTEM — folgen automatisch via var()-Verweis,
         müssen aber ggf. neu gemappt werden, falls sie auf konkrete
         Brand-Slots zeigten. ─── */
  --color-footer-bg: var(--color-primary);
  --color-footer: var(--color-white);
  /* TODO: weitere Girlstrophy-Brand-Tokens (Fonts, Akzente) ergänzen,
     sobald Brand-Definition vorliegt. */
}
/* ─── Mobile-spezifischer Akzent-Override ─────────────────────────────
   `--color-green-lightup` (Default: uvsga Lime-Akzent #E4FF3D) wird in
   navigation/_main.scss als Active-Color und Dropdown-Background genutzt.
   Auf Girlstrophy-Mobile soll stattdessen das Brand-Violet sichtbar sein,
   damit das Burger-Menü/Active-Nav nicht in uvsga-Lime aufblitzt. */
@media (max-width: 47.99em) {
  body.site-girlstrophy {
    --color-green-lightup: #3F186C; /* = --color-meta-main, hier hardcoded
    weil :root-Refs zu Brand-Slots
    schlecht in @media-Scopes greifen */
  }
}
.site-nav-trigger-wrapper .sitenav span {
  display: none !important;
}
/*
.inter-<uniquifier> {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
 */
.outfit {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.inter {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
main h1, main .h1, .main h1, .main .h1 {
  font-size: 60px;
  font-weight: 900;
  text-transform: uppercase;
  animation: appearAnimationText 0.3s ease-out forwards;
}
@media (max-width: 48em) {
  main h1.no-subtitle,
  main .h1.no-subtitle, .main h1.no-subtitle,
  .main .h1.no-subtitle {
    font-size: 40px;
  }
}
main h2, main .h2, .main h2, .main .h2 {
  font-size: 45px;
  line-height: 52px;
  text-transform: uppercase;
}
main h3, main .h3, .main h3, .main .h3 {
  text-transform: uppercase;
}
@media (max-width: 48em) {
  main h1, main .h1, main h2, main .h2, main h3, main .h3, .main h1, .main .h1, .main h2, .main .h2, .main h3, .main .h3 {
    hyphens: auto;
    hyphenate-limit-chars: auto 3;
    hyphenate-limit-lines: 4;
  }
}
body.hyphenation main, body.hyphenation .main {
  hyphens: auto;
  hyphenate-limit-chars: auto 3;
  hyphenate-limit-lines: 4;
}
body.hyphenation main h2, body.hyphenation main .h2, body.hyphenation .main h2, body.hyphenation .main .h2 {
  hyphens: auto;
  hyphenate-limit-chars: auto 3;
  hyphenate-limit-lines: 4;
}
@keyframes growOverlay {
  from {
    background-position: 50% bottom;
    height: 0vh;
    margin-top: 0;
  }
  to {
    background-position: 40% bottom;
    height: 30vh;
    margin-top: -30vh;
  }
}
@keyframes appearAnimationText {
  from {
    opacity: 0;
    filter: blur(3px);
  }
  30% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes blurAnimationHomeText {
  from {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 1;
    filter: blur(3px);
  }
}
@keyframes refocusText {
  from {
    filter: blur(6px);
    opacity: 0.4;
  }
  to {
    filter: blur(0);
    opacity: 1;
  }
}
.fade-in, .main-hero-banner .slide > .text-overlay-container .lead h1, .main-hero-banner .slide > .text-overlay-container .lead p {
  opacity: 0;
  transform: translateY(0.5rem);
  animation: fadeInUp 0.6s ease forwards;
}
.delay-1, .main-hero-banner .slide > .text-overlay-container .lead h1 {
  animation-delay: 0.2s;
}
.delay-2, .main-hero-banner .slide > .text-overlay-container .lead p {
  animation-delay: 0.7s;
}
.delay-3 {
  animation-delay: 1.3s;
}
.delay-4 {
  animation-delay: 1.8s;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
html, body {
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1rem;
  padding: 0;
  margin: 0;
  color: var(--color-black);
}
body {
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
#scw {
  width: 0;
  max-width: 0;
  height: 0;
  max-height: 0px;
  display: block;
}
img {
  vertical-align: top;
}
/* Accessibility */
.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
main .rte ul,
main .facts ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
main .rte ul li,
main .facts ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.2rem;
}
main .rte ul li::before,
main .facts ul li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0em;
  color: currentColor;
}
main a {
  text-decoration: none;
  color: var(--color-black);
  border-bottom: 1px solid var(--color-primary);
}
main a:hover {
  color: var(--color-primary);
}
main a u {
  text-decoration: none;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0.5rem;
}
.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.6;
  background: var(--color-grey-soft);
  color: var(--color-grey-dark);
  border: 1px solid var(--color-grey-light);
}
/* ─── Native Form-Element-Defaults ───────────────────────────────────
   Minimaler Reset für `<input>`, `<select>`, `<textarea>`, `<button>`.
   Sorgt dafür, dass Form-Elemente die Site-Typografie erben statt
   die UA-Defaults zu nutzen — alles weitere (Padding, Background,
   Border) regeln Component-Styles (`.btn`, `.search-field input`,
   `.select-button`, Formie etc.).
   ──────────────────────────────────────────────────────────────────── */
input,
select,
textarea,
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
textarea {
  resize: vertical;
}
button {
  cursor: pointer;
}
:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
/* ─── Canonical Button-Base ──────────────────────────────────────────
   Klassen: `.btn` und `.button` sind aliasiert. Funktioniert auf
   `<a>`, `<button>`, `<input type="submit">` und `<label>`-Elementen.

   Modifier:
   - `.button-primary`   – brand-primärer Call-to-Action (gefüllt)
   - `.button-secondary` – ergänzender CTA (gefüllt, hellere Farbe)
   - `.button-pill`      – maximale Pill-Form (Radius via Token)

   Wird einmal definiert und gilt überall (Site-Pages, RTE-Output,
   Cookie-Banner, Error-Pages, Formie via `.fui-submit`-Mapping).
   ──────────────────────────────────────────────────────────────────── */
.btn,
.button {
  display: inline-block;
  padding: 6.25px 17.5px;
  border-radius: 43.75px;
  border: 1px solid var(--color-grey-light);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--fw-medium);
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: background var(--duration-fast) var(--easing-base), color var(--duration-fast) var(--easing-base), border-color var(--duration-fast) var(--easing-base);
}
.btn:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.btn.button-primary,
.button.button-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: transparent;
}
.btn.button-primary:hover,
.button.button-primary:hover {
  background: var(--color-meta-main);
  color: var(--color-white);
}
.btn.button-secondary,
.button.button-secondary {
  background: var(--color-secondary);
  color: var(--color-green-dark);
  border-color: var(--color-secondary);
}
.btn.button-secondary:hover,
.button.button-secondary:hover {
  background: var(--color-primary);
  color: var(--color-white);
}
.btn.button-pill,
.button.button-pill {
  border-radius: var(--radius-pill);
}
.custom-select {
  margin-top: 0rem;
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
  min-width: 15rem;
  max-width: 100%;
  z-index: 99;
  margin-right: 1rem;
}
.select-button {
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.675em 1em;
  border: 1px solid #caced1;
  border-radius: 0.25rem;
  background-color: var(--color-white);
  cursor: pointer;
}
.arrow {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #000;
  transition: transform ease-in-out 0.3s;
}
.select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #caced1;
  border-radius: 0.25rem;
  background-color: var(--color-white);
  list-style: none;
  padding: 10px;
  margin: 10px 0 0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  max-height: 200px;
  overflow-y: auto;
}
.select-dropdown .count-badge {
  display: inline-block;
  background-color: #f2f2f2;
  color: #111;
  border-radius: 50%;
  padding: 0.25em 0.55em;
  font-size: 0.8em;
  font-weight: bold;
  min-width: 1.5em;
  text-align: center;
  line-height: 1.5em;
  margin-left: 0.25em;
}
.select-dropdown::-webkit-scrollbar {
  width: 7px;
}
.select-dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 25px;
}
.select-dropdown::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 25px;
}
.select-dropdown li {
  padding: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.select-dropdown li.selected {
  background-color: #f2f2f2;
  border-radius: 4px;
  font-weight: bold;
}
/* Highlight the selected option */
.select-dropdown li:hover,
.select-dropdown li:focus {
  background-color: #f2f2f2;
  border-radius: 4px;
}
.select-dropdown.hidden {
  display: none;
}
.page-layout .ce-html iframe {
  width: 100%;
  border: 0;
}
.search-field {
  display: inline-block;
  margin-right: 0.5rem;
}
.search-field input {
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: var(--color-grey-light);
  max-width: 250px;
  padding: 0.4rem 0.9rem;
  height: 2.3rem;
  transition: all 0.5s ease-in-out;
  border-radius: 2rem;
  border: 0;
  outline: 1px solid var(--color-grey-dark);
  font-weight: 700;
}
.search-field input:active, .search-field input:focus {
  background: var(--color-blue-dark-hover);
  color: var(--color-grey-dark);
  outline: 1px solid var(--color-grey-dark);
  max-width: 100%;
}
@media (min-width: 48em) {
  .search-field input:active, .search-field input:focus {
    width: 280px;
  }
}
.search-field input:active::placeholder, .search-field input:active::-webkit-input-placeholder, .search-field input:active::-moz-placeholder, .search-field input:active:-ms-input-placeholder, .search-field input:active:-moz-placeholder, .search-field input:focus::placeholder, .search-field input:focus::-webkit-input-placeholder, .search-field input:focus::-moz-placeholder, .search-field input:focus:-ms-input-placeholder, .search-field input:focus:-moz-placeholder {
  color: var(--color-white);
  opacity: 1;
}
.pin-preview .box {
  border: 1px solid var(--color-blue);
  background: var(--color-blue-light);
  padding: 1rem;
  margin-bottom: 1rem;
}
.pin-preview .heading {
  font-size: 0.8rem;
  border-bottom: 1px solid var(--color-blue);
}
.pin-preview .heading .old {
  text-decoration: none;
}
.pin-preview ul {
  padding: 0;
  list-style: none;
}
.pin-preview ul li {
  font-size: 0.9rem;
  padding: 0.1rem 0;
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 0.5rem;
}
@media (min-width: 48em) {
  .pin-preview ul li {
    grid-template-columns: 3fr 5fr 5fr;
  }
}
.pin-preview ul li > span:first-child {
  color: var(--color-blue);
}
.pin-preview .old {
  text-decoration: line-through;
  display: none;
}
@media (min-width: 48em) {
  .pin-preview .old {
    display: block;
  }
}
.pin-preview .new {
  color: var(--color-green);
}
.pin-preview .hide-on-mobile {
  display: none;
}
@media (min-width: 48em) {
  .pin-preview .hide-on-mobile {
    display: block;
  }
}
.myform {
  margin-bottom: 1rem;
}
.fui-file-summary {
  max-width: 100%;
  overflow: scroll;
  padding-bottom: 1rem;
}
button.fullscreen-close.btn-round {
  display: none;
}
.fullscreen-active {
  display: flex;
  width: 100%;
}
.fullscreen-active button.fullscreen.btn-round {
  display: none;
}
.fullscreen-active button.fullscreen-close.btn-round {
  display: flex;
}
.fullscreen-buttons {
  display: inline-block;
  margin: 0 0.5rem;
}
button.fullscreen.btn-round svg,
button.fullscreen-close.btn-round svg {
  width: 1.5rem;
  height: 1.5rem;
}
@media (min-width: 48em) {
  .btn.btn-round.show-legend svg {
    width: 25px;
    height: 25px;
  }
}
.date-and-location {
  margin-bottom: var(--space-large);
}
.page-layout > header,
.page-layout > .header {
  position: relative;
  z-index: 100;
  background: var(--color-green-dark);
}
@media (max-width: 47.99em) {
  .page-layout > header,
  .page-layout > .header {
    position: sticky;
    top: 0;
  }
}
@media (min-width: 48em) {
  .page-layout > header,
  .page-layout > .header {
    background: var(--color-primary);
    padding-bottom: 0.4rem;
  }
}
.page-layout > header .access-header,
.page-layout > .header .access-header {
  width: 100%;
  margin: 0 auto;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .page-layout > header .access-header,
  .page-layout > .header .access-header {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .page-layout > header .access-header,
  .page-layout > .header .access-header {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .page-layout > header .access-header,
  .page-layout > .header .access-header {
    max-width: 90em;
  }
}
@media (min-width: 48em) {
  .page-layout > header .access-header,
  .page-layout > .header .access-header {
    padding-top: 2.5rem;
    padding-bottom: 0;
  }
}
.page-layout > header .logo,
.page-layout > .header .logo {
  background: url("/static/assets/icn/home.svg") left center no-repeat;
  background-size: contain;
  display: block;
  margin-right: auto;
  cursor: pointer;
  height: 20px;
  width: 20px;
  max-height: 20px;
  font-size: 20px;
  padding-bottom: 0;
}
@media (min-width: 48em) {
  .page-layout > header .logo,
  .page-layout > .header .logo {
    position: fixed;
    background: url("/static/assets/image/logo.svg") left center no-repeat;
    background-size: contain;
    position: relative;
    display: block;
    height: 60px;
    max-height: 60px;
    width: auto;
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
    transition: height 0.3s ease, max-height 0.3s ease, top 0.3s ease, left 0.3s ease, margin 0.3s ease;
  }
}
@media (min-width: 48em) {
  body.scrolled .page-layout > header .logo,
  body.scrolled .page-layout > .header .logo {
    position: fixed;
    top: -9px;
    left: 5vw;
    width: 78px;
    height: 50px;
    max-height: 50px;
    margin-top: 0;
    margin-bottom: 0;
    z-index: 10;
  }
}
@media (min-width: 64em) {
  body.scrolled .page-layout > header .logo,
  body.scrolled .page-layout > .header .logo {
    left: 7.5vw;
  }
}
@media (min-width: 96em) {
  body.scrolled .page-layout > header .logo,
  body.scrolled .page-layout > .header .logo {
    left: calc((100vw - 90rem) / 2);
  }
}
header a, .header a {
  color: var(--color-meta-alternative);
}
header .meta, .header .meta {
  color: var(--color-meta-alternative);
  background: var(--color-meta-main);
  padding: var(--space-small) 0;
  display: none;
}
@media (min-width: 48em) {
  header .meta, .header .meta {
    display: block;
    position: fixed;
    width: 100%;
    z-index: 9;
  }
}
header .meta > .container, .header .meta > .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}
header .meta > .container > .social-media, .header .meta > .container > .social-media {
  padding-left: 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  align-self: stretch;
  display: flex;
  align-items: center;
}
header .meta a, .header .meta a {
  color: var(--color-meta-alternative);
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding-inline-start: 0;
  text-align: left;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  text-decoration: none;
  padding-right: var(--space);
}
nav ul li a:hover,
nav ul li a .active,
nav ul li a .current {
  opacity: var(--active-opacity);
}
nav ul.horizontal.right {
  text-align: right;
}
nav ul.horizontal.right li a {
  padding-right: 0;
  padding-left: var(--space);
}
main, .main {
  min-height: 80vh;
}
.site-footer {
  color: var(--color-footer);
  background: var(--color-footer-bg);
  padding: var(--space-large) 0 0 0;
  margin-top: 3rem;
  min-height: 20vh;
}
.site-footer .footer-overlay {
  height: 30vh;
  width: 100%;
  background: url("/static/assets/image/saentis-silhouette-green.svg") right bottom no-repeat;
  background-size: auto 130%;
  margin-bottom: -3px;
}
@media (max-width: 47.99em) {
  .site-footer .footer-overlay {
    height: 20vh;
    background-position: bottom;
  }
}
.site-footer .footer-widgets {
  background: var(--color-meta-main);
  padding: var(--space) 0;
}
.site-footer .footer-widgets > .container {
  display: flex;
  align-items: center;
  gap: 2rem;
}
@media (max-width: 47.99em) {
  .site-footer .footer-widgets > .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}
.site-footer .footer-widgets > .container a {
  color: var(--color-white);
}
.site-footer .footer-widgets .footer-widgets__partners {
  flex: 1 1 auto;
}
.site-footer .footer-widgets .footer-widgets__partners .title {
  display: block;
  margin-bottom: 0.75rem;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-white);
  opacity: 0.7;
}
.site-footer .footer-widgets .footer-widgets__partners .partners-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.site-footer .footer-widgets .footer-widgets__partners .footer-logo-partner {
  max-width: 140px;
  max-height: 60px;
  display: block;
  transition: opacity 0.15s ease;
}
.site-footer .footer-widgets .footer-widgets__partners a:hover .footer-logo-partner {
  opacity: 0.8;
}
.site-footer .footer-widgets .footer-widgets__contact {
  flex: 0 0 auto;
  text-align: right;
}
@media (max-width: 47.99em) {
  .site-footer .footer-widgets .footer-widgets__contact {
    text-align: left;
    width: 100%;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-primary);
  }
}
.site-footer .footer-widgets .footer-widgets__contact .footer-logo {
  max-width: 150px;
}
.site-footer .supplementary {
  color: var(--color-footer-supplementary);
  background: var(--color-footer-supplementary-bg);
  padding: var(--space) 0;
}
.site-footer .supplementary .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
}
@media (max-width: 47.99em) {
  .site-footer .supplementary .container {
    max-width: 100%;
    margin: 0;
    padding-left: 2.5vw;
  }
}
.site-footer .supplementary nav {
  flex: 1 1 50%;
}
.site-footer .supplementary nav.social-media {
  display: flex;
  justify-content: flex-start;
}
.site-footer .supplementary nav.supplementary {
  display: flex;
  justify-content: flex-end;
}
.site-footer .supplementary nav.supplementary ul {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer .supplementary a {
  color: var(--color-footer-supplementary);
  text-decoration: none;
}
.main-hero-banner {
  max-width: 100%;
  overflow: auto;
  margin-bottom: 4rem;
}
.main-hero-banner .slide {
  max-width: 100vw;
  max-height: 60vh;
  height: 60vh;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
  position: relative;
}
.main-hero-banner .slide > .video-entry {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}
.main-hero-banner .slide > .image-entry {
  display: block;
  width: 100%;
  height: 100%;
}
.main-hero-banner .slide > .text-overlay-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
}
.main-hero-banner .slide > .text-overlay-container .lead {
  display: block;
  margin: 0 auto;
  text-align: left;
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .main-hero-banner .slide > .text-overlay-container .lead {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .main-hero-banner .slide > .text-overlay-container .lead {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .main-hero-banner .slide > .text-overlay-container .lead {
    max-width: 90em;
  }
}
.main-hero-banner .slide > .text-overlay-container .lead {
  margin-bottom: 0.75rem;
}
@media (min-width: 48em) {
  .main-hero-banner .slide > .text-overlay-container .lead {
    margin-bottom: 4rem;
  }
}
@media (min-width: 96em) {
  .main-hero-banner .slide > .text-overlay-container .lead {
    max-width: 60em !important;
  }
}
.main-hero-banner .slide > .text-overlay-container .lead h1 {
  margin-bottom: 0.25rem;
  max-width: 85vw;
}
.main-hero-banner .slide > .text-overlay-container .lead h1 .main {
  font-size: 2rem;
  line-height: 2.45rem;
}
@media (min-width: 48em) {
  .main-hero-banner .slide > .text-overlay-container .lead h1 .main {
    max-width: 70vw;
    font-size: 4rem;
    line-height: 3.5rem;
    margin-bottom: 0.8rem;
  }
}
.main-hero-banner .slide > .text-overlay-container .lead h1 .lead {
  font-weight: 300;
  margin-top: 1rem;
}
@media (min-width: 48em) {
  .main-hero-banner .slide > .text-overlay-container .lead h1 .lead {
    font-size: 2rem;
  }
}
.main-hero-banner .slide > .text-overlay-container .lead p {
  font-size: 1.15rem;
  line-height: 1.45rem;
  margin-bottom: 0.75rem;
  max-width: 85vw;
}
@media (min-width: 48em) {
  .main-hero-banner .slide > .text-overlay-container .lead p {
    max-width: 70vw;
    font-size: 1em;
    line-height: 1.25em;
    margin-bottom: 0.25rem;
  }
}
.main-hero-banner .slide > .text-overlay-container .gradient {
  width: 100%;
  padding-bottom: 0.75rem;
}
@media (min-width: 48em) {
  .main-hero-banner .slide > .text-overlay-container .gradient {
    padding-bottom: 1.5rem;
  }
}
.main-hero-banner .slide > .text-overlay-container .saentis-overlay {
  display: block;
  position: absolute;
  bottom: -1px;
  left: auto;
  width: 100%;
  height: 100%;
  background: url("/static/assets/image/saentis-overlay.svg") right bottom no-repeat;
  background-size: 50vw;
}
@media (max-width: 48em) {
  .main-hero-banner .slide > .text-overlay-container .saentis-overlay {
    width: 150%;
    background-size: 100vw;
  }
}
.main-hero-banner .slide > a img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.main-hero-banner.-- .gradient, .main-hero-banner.--default .gradient, .main-hero-banner.--darken .gradient {
  padding-top: 4rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
.main-hero-banner.-- .lead, .main-hero-banner.--default .lead, .main-hero-banner.--darken .lead {
  color: var(--color-white);
  font-size: 1.5rem;
  line-height: 100%;
}
.main-hero-banner.--lightup .gradient {
  padding-top: 4rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(228, 241, 255, 0.8));
}
.main-hero-banner.--lightup .lead {
  color: var(--color-black);
  font-size: 1.5rem;
  line-height: 100%;
}
@media (min-width: 48em) {
  .site-wrapper {
    overflow-x: hidden;
  }
}
@keyframes header-visual-from-left {
  0% {
    transform: translateX(-100%) scale(0.3);
    opacity: 0.4;
    filter: blur(14px);
  }
  50% {
    transform: translateX(-55%) scale(0.5);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateX(-10%) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes header-visual-from-right {
  0% {
    transform: translateX(100%) scale(0.3);
    opacity: 0.4;
    filter: blur(14px);
  }
  50% {
    transform: translateX(55%) scale(0.5);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateX(10%) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.header-visual {
  display: none;
}
@media (min-width: 48em) {
  .header-visual {
    display: block;
    position: absolute;
    bottom: 5vh;
    z-index: 5;
    pointer-events: none;
    max-height: 60vh;
  }
  .header-visual img {
    display: block;
    max-height: 60vh;
    width: auto;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .header-visual--left {
    left: 0;
    transform: translateX(-10%);
    transform-origin: bottom left;
    animation: header-visual-from-left 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.5s both;
  }
  .header-visual--right {
    right: 0;
    transform: translateX(10%);
    transform-origin: bottom right;
    animation: header-visual-from-right 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.5s both;
  }
}
.theme-header {
  position: relative;
  width: 100%;
  min-height: 70vh;
  background: var(--theme-header-bg, #000);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 48em) {
  .theme-header {
    min-height: 90vh;
  }
}
.theme-header__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .theme-header__fx, .theme-header__shapes {
    animation: theme-header-fade-in 2.5s ease-out both;
  }
}
.theme-header__shapes {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  pointer-events: none;
  transform: skewY(-2deg);
  filter: blur(var(--theme-header-blur, 40px));
  mix-blend-mode: var(--theme-header-blending, screen);
  isolation: isolate;
}
.theme-header__shapes circle, .theme-header__shapes rect, .theme-header__shapes polygon {
  animation-name: theme-header-drift;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  will-change: transform;
}
.theme-header__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .theme-header__content {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .theme-header__content {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .theme-header__content {
    max-width: 90em;
  }
}
.theme-header__content {
  min-height: 70vh;
  padding: var(--space-larger) 0;
  color: var(--theme-header-text, #fff);
}
@media (min-width: 48em) {
  .theme-header__content {
    min-height: 90vh;
  }
}
.theme-header__content__eyebrow,
.theme-header__content .theme-header__eyebrow {
  margin: 0 0 var(--space-small, 0.75rem) 0;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--theme-header-text, #fff);
  opacity: 0.75;
}
.theme-header__content h1 {
  margin: 0 0 var(--space) 0;
  font-family: var(--font-title);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}
.theme-header__content h1 .title--accent {
  color: var(--color-primary, currentColor);
}
.theme-header__content .lead {
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  max-width: 60ch;
  opacity: 0.92;
}
.theme-header__ctas {
  margin-top: var(--space, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.theme-header__cta {
  min-width: 10rem;
  text-align: center;
}
.theme-header__scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  width: 1.5rem;
  height: 1.5rem;
  z-index: 2;
  pointer-events: none;
  animation: theme-header-scroll-bounce 1.8s ease-in-out infinite;
}
.theme-header__scroll-hint span {
  display: block;
  width: 100%;
  height: 100%;
  border-right: 2px solid var(--theme-header-text, #fff);
  border-bottom: 2px solid var(--theme-header-text, #fff);
  transform: rotate(45deg);
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
  .theme-header__shapes circle, .theme-header__shapes rect, .theme-header__shapes polygon, .theme-header__scroll-hint {
    animation: none;
  }
}
@keyframes theme-header-drift {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(var(--dx, 30px), var(--dy, -20px));
  }
}
@keyframes theme-header-scroll-bounce {
  0%, 100% {
    transform: translate(-50%, 0);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, 8px);
    opacity: 1;
  }
}
.logo--custom {
  background-image: none !important;
}
.logo__img {
  display: block;
  width: auto;
  height: 100%;
  max-height: 4.5rem;
  -o-object-fit: contain;
     object-fit: contain;
}
@keyframes theme-header-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.container {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .container {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .container {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .container {
    max-width: 90em;
  }
}
.ce-cookie-banner {
  margin: 0 auto;
  position: fixed;
  padding: 1rem;
  background: var(--color-green-light);
  z-index: 0;
  border-radius: 0.25rem;
  bottom: 1rem;
  left: 5%;
  width: 90%;
  display: none;
}
@media (min-width: 48em) {
  .ce-cookie-banner {
    right: 2rem;
    left: auto;
    bottom: 2rem;
    top: auto;
    width: 40vw;
  }
}
.ce-cookie-banner {
  /* Buttons: globale .btn / .button-Definition aus
     fragment/_button.scss greift. Cookie-Banner-spezifisch hier
     nur der horizontale Abstand zwischen den Buttons. */
}
.ce-cookie-banner .btn,
.ce-cookie-banner .button {
  margin-right: 0.5rem;
}
.ce-cookie-banner {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ce-cookie-banner:not(.hidden) {
  display: block;
  opacity: 1;
  z-index: 9999;
  transform: translateY(0);
}
.cs-edit-link {
  position: fixed;
  z-index: 9999;
  bottom: 1rem;
  right: 1rem;
  text-decoration: none;
  cursor: pointer;
  padding: var(--space-small) var(--space);
  border-radius: var(--border-radius);
  background: var(--color-grey-dark);
  border: 1px solid var(--color-white);
  color: var(--color-white);
}
.cs-edit-link:hover {
  background: var(--color-white);
  border: 1px solid var(--color-grey-dark);
  color: var(--color-grey-dark);
}
body.lightbox-open {
  overflow: hidden;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--color-green-dark-transperent);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  gap: 1rem;
}
.lightbox.is-open {
  display: flex;
}
.lightbox__stage {
  position: relative;
  max-width: min(95vw, 1400px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
}
.lightbox__image-wrap {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  max-height: 82vh;
  min-width: 0;
}
.lightbox__image {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  background: #111;
}
.lightbox__counter {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.25rem 0.6rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  letter-spacing: 0.02em;
  border-radius: 0.25rem;
  pointer-events: none;
}
.lightbox__counter b {
  font-weight: 700;
}
.lightbox__counter[hidden] {
  display: none;
}
.lightbox__caption {
  color: #fff;
  font-size: 0.9rem;
  max-width: 60ch;
  text-align: center;
  line-height: 1.4;
  margin: 0;
  opacity: 0.85;
}
.lightbox__caption[hidden] {
  display: none;
}
.lightbox__btn {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  padding: 0;
  flex: 0 0 auto;
}
.lightbox__btn:hover, .lightbox__btn:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
  outline: none;
}
.lightbox__btn:active {
  transform: scale(0.95);
}
.lightbox__btn[hidden] {
  display: none;
}
.lightbox__btn--close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  background: transparent;
  border: none;
  border-radius: 0;
}
.lightbox__btn--close svg {
  width: 2rem;
  height: 2rem;
}
.lightbox__btn--close:hover, .lightbox__btn--close:focus-visible {
  background: transparent;
  border-color: transparent;
  color: var(--color-primary, #fff);
}
.lightbox__btn--prev, .lightbox__btn--next {
  width: 3rem;
  height: 3rem;
  background: transparent;
  border: none;
  border-radius: 0;
}
.lightbox__btn--prev:hover, .lightbox__btn--prev:focus-visible, .lightbox__btn--next:hover, .lightbox__btn--next:focus-visible {
  background: transparent;
  border-color: transparent;
  color: var(--color-primary, #fff);
}
.one-col > .ce-textwithmedia {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .one-col > .ce-textwithmedia {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .one-col > .ce-textwithmedia {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .one-col > .ce-textwithmedia {
    max-width: 90em;
  }
}
.ce-textwithmedia img {
  max-width: 100%;
  height: auto;
}
.ce-textwithmedia > .image-pos-left,
.ce-textwithmedia > .image-pos-right,
.ce-textwithmedia > .image-pos-above,
.ce-textwithmedia > .image-pos-below {
  display: flex;
  gap: 2rem;
}
.ce-textwithmedia > .image-pos-left > .content,
.ce-textwithmedia > .image-pos-left > .images,
.ce-textwithmedia > .image-pos-right > .content,
.ce-textwithmedia > .image-pos-right > .images,
.ce-textwithmedia > .image-pos-above > .content,
.ce-textwithmedia > .image-pos-above > .images,
.ce-textwithmedia > .image-pos-below > .content,
.ce-textwithmedia > .image-pos-below > .images {
  min-width: 0;
  max-width: 100%;
}
.ce-textwithmedia > .image-pos-left > .images figure,
.ce-textwithmedia > .image-pos-right > .images figure,
.ce-textwithmedia > .image-pos-above > .images figure,
.ce-textwithmedia > .image-pos-below > .images figure {
  margin: 0;
}
.ce-textwithmedia > .image-pos-left > .images img,
.ce-textwithmedia > .image-pos-right > .images img,
.ce-textwithmedia > .image-pos-above > .images img,
.ce-textwithmedia > .image-pos-below > .images img {
  display: block;
  max-width: 100%;
  height: auto;
}
.ce-textwithmedia > .image-pos-left > .images.two-cols > .entries, .ce-textwithmedia > .image-pos-left > .images.three-cols > .entries,
.ce-textwithmedia > .image-pos-right > .images.two-cols > .entries,
.ce-textwithmedia > .image-pos-right > .images.three-cols > .entries,
.ce-textwithmedia > .image-pos-above > .images.two-cols > .entries,
.ce-textwithmedia > .image-pos-above > .images.three-cols > .entries,
.ce-textwithmedia > .image-pos-below > .images.two-cols > .entries,
.ce-textwithmedia > .image-pos-below > .images.three-cols > .entries {
  display: grid;
  gap: 0.75rem;
}
.ce-textwithmedia > .image-pos-left > .images.two-cols > .entries,
.ce-textwithmedia > .image-pos-right > .images.two-cols > .entries,
.ce-textwithmedia > .image-pos-above > .images.two-cols > .entries,
.ce-textwithmedia > .image-pos-below > .images.two-cols > .entries {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ce-textwithmedia > .image-pos-left > .images.three-cols > .entries,
.ce-textwithmedia > .image-pos-right > .images.three-cols > .entries,
.ce-textwithmedia > .image-pos-above > .images.three-cols > .entries,
.ce-textwithmedia > .image-pos-below > .images.three-cols > .entries {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ce-textwithmedia > .image-pos-left > .images.media-format-original.two-cols > .entries, .ce-textwithmedia > .image-pos-left > .images.media-format-original.three-cols > .entries,
.ce-textwithmedia > .image-pos-right > .images.media-format-original.two-cols > .entries,
.ce-textwithmedia > .image-pos-right > .images.media-format-original.three-cols > .entries,
.ce-textwithmedia > .image-pos-above > .images.media-format-original.two-cols > .entries,
.ce-textwithmedia > .image-pos-above > .images.media-format-original.three-cols > .entries,
.ce-textwithmedia > .image-pos-below > .images.media-format-original.two-cols > .entries,
.ce-textwithmedia > .image-pos-below > .images.media-format-original.three-cols > .entries {
  display: block;
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.ce-textwithmedia > .image-pos-left > .images.media-format-original.two-cols > .entries figure, .ce-textwithmedia > .image-pos-left > .images.media-format-original.three-cols > .entries figure,
.ce-textwithmedia > .image-pos-right > .images.media-format-original.two-cols > .entries figure,
.ce-textwithmedia > .image-pos-right > .images.media-format-original.three-cols > .entries figure,
.ce-textwithmedia > .image-pos-above > .images.media-format-original.two-cols > .entries figure,
.ce-textwithmedia > .image-pos-above > .images.media-format-original.three-cols > .entries figure,
.ce-textwithmedia > .image-pos-below > .images.media-format-original.two-cols > .entries figure,
.ce-textwithmedia > .image-pos-below > .images.media-format-original.three-cols > .entries figure {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  margin: 0 0 0.75rem;
}
.ce-textwithmedia > .image-pos-left > .images.media-format-original.two-cols > .entries,
.ce-textwithmedia > .image-pos-right > .images.media-format-original.two-cols > .entries,
.ce-textwithmedia > .image-pos-above > .images.media-format-original.two-cols > .entries,
.ce-textwithmedia > .image-pos-below > .images.media-format-original.two-cols > .entries {
  -moz-columns: 2;
       columns: 2;
}
.ce-textwithmedia > .image-pos-left > .images.media-format-original.three-cols > .entries,
.ce-textwithmedia > .image-pos-right > .images.media-format-original.three-cols > .entries,
.ce-textwithmedia > .image-pos-above > .images.media-format-original.three-cols > .entries,
.ce-textwithmedia > .image-pos-below > .images.media-format-original.three-cols > .entries {
  -moz-columns: 3;
       columns: 3;
}
.ce-textwithmedia > .image-pos-left > .content,
.ce-textwithmedia > .image-pos-right > .content,
.ce-textwithmedia > .image-pos-above > .content,
.ce-textwithmedia > .image-pos-below > .content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ce-textwithmedia > .image-pos-above {
  flex-direction: column-reverse;
}
.ce-textwithmedia > .image-pos-below {
  flex-direction: column;
}
.ce-textwithmedia > .image-pos-left,
.ce-textwithmedia > .image-pos-right {
  flex-direction: column;
}
@media (min-width: 48em) {
  .ce-textwithmedia > .image-pos-left,
  .ce-textwithmedia > .image-pos-right {
    flex-direction: row;
    align-items: flex-start;
    gap: 3rem;
  }
  .ce-textwithmedia > .image-pos-left > .content,
  .ce-textwithmedia > .image-pos-left > .images,
  .ce-textwithmedia > .image-pos-right > .content,
  .ce-textwithmedia > .image-pos-right > .images {
    flex: 1 1 50%;
  }
}
@media (min-width: 48em) {
  .ce-textwithmedia > .image-pos-right {
    flex-direction: row;
  }
}
@media (min-width: 48em) {
  .ce-textwithmedia > .image-pos-left {
    flex-direction: row-reverse;
  }
}
.ce-textwithmedia > .image-pos-leftintext::after,
.ce-textwithmedia > .image-pos-rightintext::after {
  content: "";
  display: block;
  clear: both;
}
.ce-textwithmedia > .image-pos-leftintext > .images,
.ce-textwithmedia > .image-pos-rightintext > .images {
  margin-bottom: 1rem;
}
.ce-textwithmedia > .image-pos-leftintext > .images figure,
.ce-textwithmedia > .image-pos-rightintext > .images figure {
  margin: 0;
}
.ce-textwithmedia > .image-pos-leftintext > .images img,
.ce-textwithmedia > .image-pos-rightintext > .images img {
  display: block;
  max-width: 100%;
  height: auto;
}
.ce-textwithmedia > .image-pos-leftintext > .images > .entries,
.ce-textwithmedia > .image-pos-rightintext > .images > .entries {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 48em) {
  .ce-textwithmedia > .image-pos-leftintext > .images,
  .ce-textwithmedia > .image-pos-rightintext > .images {
    width: clamp(220px, 40%, 460px);
    margin-bottom: 0.5rem;
  }
}
@media (min-width: 48em) {
  .ce-textwithmedia > .image-pos-leftintext > .images {
    float: left;
    margin-right: 2rem;
  }
}
@media (min-width: 48em) {
  .ce-textwithmedia > .image-pos-rightintext > .images {
    float: right;
    margin-left: 2rem;
  }
}
.ce-textwithmedia .images.media-style-rounded img {
  border-radius: var(--border-radius, 1rem);
}
.page-layout .ce-contentboxed {
  margin-bottom: var(--space-larger);
}
.page-layout .ce-contentboxed .ce-header,
.page-layout .ce-contentboxed .text.rte {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .page-layout .ce-contentboxed .ce-header,
  .page-layout .ce-contentboxed .text.rte {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .page-layout .ce-contentboxed .ce-header,
  .page-layout .ce-contentboxed .text.rte {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .page-layout .ce-contentboxed .ce-header,
  .page-layout .ce-contentboxed .text.rte {
    max-width: 90em;
  }
}
.page-layout .ce-contentboxed .ce-style-dark {
  padding: 120px 0 97px 0;
  background: black;
  color: white;
  width: 100%;
  position: relative;
}
.page-layout .ce-contentboxed .ce-style-dark h2, .page-layout .ce-contentboxed .ce-style-dark h3, .page-layout .ce-contentboxed .ce-style-dark h4, .page-layout .ce-contentboxed .ce-style-dark .h2, .page-layout .ce-contentboxed .ce-style-dark .h3, .page-layout .ce-contentboxed .ce-style-dark .h4 {
  margin: 0 auto;
  padding: var(--space-in-boxes);
  text-align: center;
  display: block;
}
.page-layout .ce-contentboxed .ce-style-dark .ce-textwithmedia {
  margin-bottom: 0;
  padding-bottom: 0;
}
.page-layout .ce-contentboxed .ce-style-dark .ce-textwithmedia:nth-child(1n+1) {
  margin-top: var(--gap);
}
.page-layout .ce-contentboxed .ce-style-dark .ce-textwithmedia:nth-child(1) {
  margin-top: 0;
}
.page-layout .ce-contentboxed .ce-style-full-width {
  margin: 0;
  padding: 0;
}
.page-layout .ce-contentboxed .ce-style-full-width .ce-style-fullWidth {
  margin: 0;
  padding: 0;
}
.page-layout .ce-contentboxed .ce-style-full-width .ce-textwithmedia {
  margin-bottom: 0;
  padding-bottom: 0;
  width: 100%;
  max-width: 100%;
}
.page-layout .ce-contentboxed .ce-style-full-width .ce-textwithmedia .media-pos-above figure, .page-layout .ce-contentboxed .ce-style-full-width .ce-textwithmedia .media-pos-below figure {
  display: block;
  height: auto;
}
.page-layout .ce-contentboxed .ce-style-full-width .ce-textwithmedia .media-pos-above img, .page-layout .ce-contentboxed .ce-style-full-width .ce-textwithmedia .media-pos-below img {
  border-radius: 0;
}
.page-layout .ce-contentboxed .ce-style-numbered {
  counter-reset: num;
}
.page-layout .ce-contentboxed .ce-style-numbered .ce-textwithmedia .h2, .page-layout .ce-contentboxed .ce-style-numbered .ce-textwithmedia h3, .page-layout .ce-contentboxed .ce-style-numbered .ce-textwithmedia h4 {
  margin-bottom: 1rem;
  line-height: 2.6rem;
  padding-left: 2em;
  min-height: 2.3rem;
  display: inline-block;
  vertical-align: middle;
}
.page-layout .ce-contentboxed .ce-style-numbered .ce-textwithmedia .h2::before, .page-layout .ce-contentboxed .ce-style-numbered .ce-textwithmedia h3::before, .page-layout .ce-contentboxed .ce-style-numbered .ce-textwithmedia h4::before {
  position: absolute;
  margin-left: -4rem;
  text-indent: 0;
  background: var(--color-primary);
  color: var(--color-secondary);
  counter-increment: num;
  content: counter(num) " ";
  font-size: 1.5rem;
  padding: 1rem;
  text-align: center;
  border-top-left-radius: 0.55rem;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  margin-right: 1.15rem;
  vertical-align: middle;
  display: inline-block;
  width: 2.6rem;
  height: 2.6rem;
  font-weight: 400;
  line-height: 0.7rem;
  padding-top: 0.9rem;
}
.page-layout .ce-contentboxed .ce-style-background-color {
  background: var(--color-bg-soft);
  margin-top: var(--content-space);
  padding-top: var(--content-space);
  padding-bottom: var(--content-space);
  margin-bottom: var(--content-space);
}
.page-layout .ce-contentboxed .ce-style-background-color > h2, .page-layout .ce-contentboxed .ce-style-background-color > h3, .page-layout .ce-contentboxed .ce-style-background-color > h4 {
  padding-bottom: var(--content-space-small);
}
.page-layout .ce-contentboxed .ce-style-background-color .ce-textwithmedia {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .page-layout .ce-contentboxed .ce-style-background-color .ce-textwithmedia {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .page-layout .ce-contentboxed .ce-style-background-color .ce-textwithmedia {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .page-layout .ce-contentboxed .ce-style-background-color .ce-textwithmedia {
    max-width: 90em;
  }
}
.page-layout .ce-contentboxed .ce-style-background-color .no-images .content {
  max-width: 82%;
}
.page-layout .ce-contentboxed .ce-style-two-cols-1-1 > .ce {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .page-layout .ce-contentboxed .ce-style-two-cols-1-1 > .ce {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .page-layout .ce-contentboxed .ce-style-two-cols-1-1 > .ce {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .page-layout .ce-contentboxed .ce-style-two-cols-1-1 > .ce {
    max-width: 90em;
  }
}
@media (min-width: 48em) {
  .page-layout .ce-contentboxed .ce-style-two-cols-1-1 > .ce {
    display: grid;
    grid-template-columns: 6fr 6fr;
    gap: var(--gap);
  }
}
.page-layout .ce-contentboxed .ce-style-two-cols-2-1 > .ce {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .page-layout .ce-contentboxed .ce-style-two-cols-2-1 > .ce {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .page-layout .ce-contentboxed .ce-style-two-cols-2-1 > .ce {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .page-layout .ce-contentboxed .ce-style-two-cols-2-1 > .ce {
    max-width: 90em;
  }
}
@media (min-width: 48em) {
  .page-layout .ce-contentboxed .ce-style-two-cols-2-1 > .ce {
    display: grid;
    grid-template-columns: 9fr 4fr;
    gap: var(--gap);
  }
}
.page-layout .ce-contentboxed .ce-style-two-cols-2-1 > .ce h2 {
  line-height: 125%;
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .page-layout .ce-contentboxed .ce-style-two-cols-2-1 > .ce h2 {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .page-layout .ce-contentboxed .ce-style-two-cols-2-1 > .ce h2 {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .page-layout .ce-contentboxed .ce-style-two-cols-2-1 > .ce h2 {
    max-width: 90em;
  }
}
.page-layout .ce-contentboxed .ce-style-two-cols-1-2 > .ce {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .page-layout .ce-contentboxed .ce-style-two-cols-1-2 > .ce {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .page-layout .ce-contentboxed .ce-style-two-cols-1-2 > .ce {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .page-layout .ce-contentboxed .ce-style-two-cols-1-2 > .ce {
    max-width: 90em;
  }
}
@media (min-width: 48em) {
  .page-layout .ce-contentboxed .ce-style-two-cols-1-2 > .ce {
    display: grid;
    grid-template-columns: 4fr 9fr;
    gap: var(--space-large);
  }
}
.page-layout .ce-contentboxed > .ce > h2, .page-layout .ce-contentboxed > .ce > h3, .page-layout .ce-contentboxed > .ce > h4, .page-layout .ce-contentboxed > .ce > .h2, .page-layout .ce-contentboxed > .ce > .h3, .page-layout .ce-contentboxed > .ce > .h4 {
  margin: 0 auto;
  display: block;
}
@media (min-width: 48em) {
  .page-layout .ce-contentboxed > .ce > h2, .page-layout .ce-contentboxed > .ce > h3, .page-layout .ce-contentboxed > .ce > h4, .page-layout .ce-contentboxed > .ce > .h2, .page-layout .ce-contentboxed > .ce > .h3, .page-layout .ce-contentboxed > .ce > .h4 {
    max-width: 44em;
  }
}
@media (min-width: 64em) {
  .page-layout .ce-contentboxed > .ce > h2, .page-layout .ce-contentboxed > .ce > h3, .page-layout .ce-contentboxed > .ce > h4, .page-layout .ce-contentboxed > .ce > .h2, .page-layout .ce-contentboxed > .ce > .h3, .page-layout .ce-contentboxed > .ce > .h4 {
    max-width: 60em;
  }
}
.page-layout .container .two-cols .large-8 .ce-contentboxed .ce-style-background-color .ce-textwithmedia {
  padding-left: var(--content-space);
  padding-right: var(--content-space);
}
.page-layout .ce-contentboxed .ce-style-background-color .ce-textwithmedia {
  padding-left: var(--content-space);
  padding-right: var(--content-space);
}
.page-layout .ce-contentboxed .ce-style-background-color .ce-textwithmedia .text.rte {
  max-width: 100%;
}
.page-layout .ce-style-background-light {
  background: var(--color-grey-soft);
  margin-top: var(--space-large);
  margin-bottom: var(--space-large);
  padding-top: var(--space-large);
  padding-bottom: var(--space-large);
}
main .ce-style-default .ce-style-two-cols-1-1 header.ce-header,
main .ce-style-default .ce-style-two-cols-2-1 header.ce-header,
main .ce-style-default .ce-style-two-cols-1-2 header.ce-header {
  width: 100%;
}
.page-layout .one-col .ce-contentboxed > .ce .ce-header h2, .page-layout .one-col .ce-contentboxed > .ce .ce-header h3, .page-layout .one-col .ce-contentboxed > .ce .ce-header h4 {
  margin-bottom: 1.25rem;
}
@media (min-width: 48em) {
  .page-layout .one-col .ce-contentboxed .ce-style-two-cols-2-1 .col-left h2, .page-layout .one-col .ce-contentboxed .ce-style-two-cols-2-1 .col-left h3, .page-layout .one-col .ce-contentboxed .ce-style-two-cols-2-1 .col-left h4 {
    max-width: 79%;
    text-align: left;
    margin-left: 0;
    margin-bottom: 0.5rem;
  }
}
.page-layout .one-col .ce-contentboxed .ce-style-two-cols-2-1 .col-left .col-left .rte {
  max-width: 100%;
}
@media (min-width: 48em) {
  .page-layout .one-col .ce-contentboxed .ce-style-two-cols-2-1 .col-left .col-left .rte {
    max-width: 100%;
  }
}
.leaflet-interactive {
  fill-opacity: 1;
  animation: fadeArea 1.5s ease forwards;
  animation-delay: 1s;
}
.page-layout .ce-contentmap {
  padding-top: 1.5rem;
  background: var(--color-bg-soft);
  padding-bottom: 0;
  margin-bottom: var(--content-space);
}
.page-layout .ce-contentmap a {
  border-bottom: none;
}
.page-layout .ce-contentmap .ce-header {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .page-layout .ce-contentmap .ce-header {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .page-layout .ce-contentmap .ce-header {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .page-layout .ce-contentmap .ce-header {
    max-width: 90em;
  }
}
.page-layout .ce-contentmap .leaflet-popup-content {
  padding: 0rem;
  margin: 3px 15px 3px 3px;
}
.page-layout .ce-contentmap .content {
  padding-bottom: var(--content-space-small);
}
.page-layout .ce-contentmap > h2, .page-layout .ce-contentmap > h3, .page-layout .ce-contentmap > h4 {
  padding-top: var(--content-space);
  padding-bottom: var(--content-space-small);
}
.page-layout .ce-contentmap .show-filter {
  margin-top: 0;
  padding-top: 0;
}
.page-layout .ce-contentmap .leaflet-control-locate a,
.page-layout .ce-contentmap .leaflet-control-zoom-in,
.page-layout .ce-contentmap .leaflet-control-zoom-out {
  color: var(--color-blue);
  border: none;
  margin-bottom: 0.1rem;
}
.page-layout .ce-contentmap .debugger {
  border: 1px dotted var(--color-blue);
  padding: 1rem;
}
.page-layout .ce-contentmap .tt {
  max-width: 280px;
  padding: 0.2rem 0.55rem;
  display: grid;
  overflow: auto;
  margin-right: 0.5rem;
  grid-template-columns: 3fr 7fr;
  gap: 0.5rem;
}
@media (min-width: 48em) {
  .page-layout .ce-contentmap .tt {
    max-width: 395px;
    gap: 0.7rem;
  }
}
.page-layout .ce-contentmap .tt .col-left {
  display: flex;
  align-items: stretch;
}
.page-layout .ce-contentmap .tt a.read-more {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--border-radius-small);
  padding: 0.25rem 0.75rem;
}
.page-layout .ce-contentmap .tt a.read-more:hover {
  background: var(--color-green-dark);
}
.page-layout .ce-contentmap .tt a.read-more {
  /* ignore read more on detail – we are already on detail site */
}
.page-layout .ce-contentmap .tt a.read-more.is-open-pin {
  display: none;
}
.page-layout .ce-contentmap .tt p {
  margin-bottom: 0.75rem;
}
.page-layout .ce-contentmap .tt .img {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 0.75rem;
}
.page-layout .ce-contentmap .tt .img img {
  max-height: 140px;
  max-width: 200px;
  margin: 0 auto;
}
.page-layout .ce-contentmap .tt .img.full {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.page-layout .ce-contentmap .tt .img.full img {
  max-width: 100%;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}
.page-layout .ce-contentmap .tt h2 {
  font-size: 0.9rem;
  line-height: 100%;
  display: inline-block;
  width: 100% !important;
}
@media (min-width: 48em) {
  .page-layout .ce-contentmap .tt h2 {
    display: inline-block;
    width: 100% !important;
  }
}
@media (min-width: 64em) {
  .page-layout .ce-contentmap .tt h2 {
    display: inline-block;
    width: 100% !important;
  }
}
.page-layout .ce-contentmap .tt .address {
  display: block;
  padding-bottom: 0.3rem;
}
.page-layout .ce-contentmap .tt .tags {
  margin-top: 0;
  display: block;
  padding-bottom: 0.3rem;
}
.page-layout .ce-contentmap .tt .tags .tag {
  font-size: 0.65rem;
  margin-right: 2px;
  margin-bottom: 2px;
}
.page-layout .ce-contentmap .tt ul {
  padding-left: 1rem;
}
.page-layout .ce-contentmap .tt .link-list {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}
.page-layout .ce-contentmap .tt .link-list li {
  display: inline-block;
}
.page-layout .ce-contentmap .tt .link-list li a {
  display: inline-block;
  padding: 0.2rem 0.5rem 0.2rem 0;
}
.page-layout .ce-contentmap .tt .website a:before {
  content: " ";
  width: 22px;
  height: 22px;
  display: block;
  background: url("/static/assets/image/map/iconwww.svg");
  background-size: contain;
}
.page-layout .ce-contentmap .tt .website a span {
  display: none;
}
.page-layout .ce-contentmap .tt .phone a:before {
  content: " ";
  width: 22px;
  height: 22px;
  display: block;
  background: url("/static/assets/image/map/iconphone.svg");
  background-size: contain;
}
.page-layout .ce-contentmap .tt .phone a span {
  display: none;
}
.page-layout .ce-contentmap .tt .email a:before {
  content: " ";
  width: 22px;
  height: 22px;
  display: block;
  background: url("/static/assets/image/map/iconmail.svg");
  background-size: contain;
}
.page-layout .ce-contentmap .tt .email a span {
  display: none;
}
.page-layout .ce-contentmap .tt .directions a:before {
  content: " ";
  width: 22px;
  height: 22px;
  display: block;
  background: url("/static/assets/image/map/icondirections.svg");
  background-size: contain;
}
.page-layout .ce-contentmap .tt .directions a span {
  display: none;
}
.page-layout .ce-contentmap .leaflet-container a.leaflet-popup-close-button {
  top: 10px;
  right: 10px;
  position: absolute;
  z-index: 1001;
}
.content-map {
  position: relative;
  margin-bottom: 0;
  z-index: 20;
}
.content-map > .leaflet-pane {
  z-index: 20;
}
.uvsga-map {
  position: relative;
}
.map-loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 500;
  background: transparent;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.35s ease;
}
.map-loader.is-hidden {
  opacity: 0;
}
.map-loader .map-loader-bar {
  height: 100%;
  width: 0;
  background: var(--color-green);
  transition: width 0.25s ease-out;
}
.additional-note {
  color: rgba(0, 0, 0, 0.45);
  font-size: 0.7rem;
  line-height: 0.7rem;
  display: inline-block;
}
.leaflet-container .leaflet-control-search {
  position: relative;
  float: left;
  background: var(--color-white);
  color: var(--color-blue-clear);
  outline: 1px solid var(--color-grey-light-medium);
  background-clip: padding-box;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.8);
  margin-left: 10px;
  margin-top: 10px;
}
.leaflet-control-search.search-exp { /*expanded*/
  background: var(--color-white);
  border: 2px solid rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}
.leaflet-control-search .search-input {
  display: block;
  float: left;
  background: var(--color-white);
  border: 1px solid #666;
  border-radius: 2px;
  height: 22px;
  padding: 0 20px 0 2px;
  margin: 4px 0 4px 4px;
}
.leaflet-control-search.search-load .search-input {
  background: url("/static/assets/image/map/loader.gif") no-repeat center right #fff;
}
.leaflet-control-search.search-load .search-cancel {
  visibility: hidden;
}
.leaflet-control-search .search-cancel {
  display: block;
  width: 22px;
  height: 22px;
  position: absolute;
  right: 28px;
  margin: 6px 0;
  background: url("/static/assets/image/map/search-icon.png") no-repeat 0 -46px;
  text-decoration: none;
  filter: alpha(opacity=80);
  opacity: 0.8;
}
.leaflet-control-search .search-cancel:hover {
  filter: alpha(opacity=100);
  opacity: 1;
}
.leaflet-control-search .search-cancel:hover span {
  color: #aaa;
}
.leaflet-control-search .search-cancel span {
  display: none; /* comment for cancel button imageless */
  font-size: 18px;
  line-height: 20px;
  color: #ccc;
  font-weight: bold;
}
.leaflet-control-search .search-button {
  display: block;
  float: left;
  width: 30px;
  height: 30px;
  background: url("/static/assets/image/map/search-icon.png") no-repeat 4px 4px var(--color-white);
  border-radius: 4px;
}
.leaflet-control-search .search-button:hover {
  background: url("/static/assets/image/map/search-icon.png") no-repeat 4px -20px #fafafa;
}
.leaflet-control-search .search-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  float: left;
  list-style: none;
  padding-left: 0;
  min-width: 120px;
  max-height: 122px;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 1010;
  overflow-y: auto;
  overflow-x: hidden;
  cursor: pointer;
}
.leaflet-control-search .search-tip {
  margin: 2px;
  padding: 2px 4px;
  display: block;
  color: black;
  background: #eee;
  border-radius: 0.25em;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
}
.leaflet-control-search .search-button:hover {
  background-color: var(--color-white);
}
.leaflet-control-search .search-tip-select,
.leaflet-control-search .search-tip:hover {
  background-color: var(--color-white);
}
.leaflet-control-search .search-alert {
  cursor: pointer;
  clear: both;
  font-size: 0.75em;
  margin-bottom: 5px;
  padding: 0 0.25em;
  color: var(--color-red);
  font-weight: bold;
  border-radius: 0.25em;
}
.leaflet-marker-icon {
  transition: opacity 1s ease;
  opacity: 1;
}
.leaflet-marker-icon.fade-out {
  opacity: 0;
}
.map-container {
  background: var(--color-bg-soft);
}
.my-nr-label {
  display: none;
}
@keyframes fadeArea {
  to {
    fill-opacity: 0.25;
  }
}
.ct-map {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .ct-map {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .ct-map {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .ct-map {
    max-width: 90em;
  }
}
.ct-map > .text {
  margin-top: 1rem;
}
.ct-map .show-filter {
  display: flex;
  margin-bottom: 0.5rem;
}
.filter-trigger {
  position: relative;
  display: inline-block;
}
.filter-trigger .filter-button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-secondary);
  border: 0;
  color: var(--color-green-dark);
  border-radius: 2rem;
  padding: 0.4rem 0.9rem;
  font-size: 1rem;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s ease-in-out;
  outline: 1px solid var(--color-green-dark);
  white-space: nowrap;
  margin-right: 0.5rem;
}
.filter-trigger .filter-button:hover {
  background: var(--color-primary);
  outline: 1px solid var(--color-green-dark);
  color: var(--color-white);
}
.filter-trigger .filter-button:hover .filter-icon svg {
  fill: var(--color-white);
}
.filter-trigger .filter-button .filter-icon svg {
  fill: var(--color-green-dark);
}
.filter-trigger .filter-button .filter-count[data-count-filters="0"] {
  display: none;
}
.filter-trigger .filter-button .filter-icon svg {
  display: block;
}
.filter-trigger .filter-button .filter-label {
  display: inline-block;
  font-weight: 700;
}
.filter-trigger .filter-button .filter-count {
  display: inline-block;
  background: var(--color-green-dark);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 600;
  width: 1.4rem;
  height: 1.4rem;
  text-align: center;
  line-height: 1.4rem;
  border-radius: 50%;
  position: absolute;
  top: -0.6rem;
  right: -0.6rem;
}
.filter-layer {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.filter-layer.active {
  display: flex;
}
.filter-layer .filter-layer-inner {
  position: relative;
  background: var(--color-white);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  max-width: 600px;
  width: 100%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  max-height: 90vh;
}
.filter-layer .filter-layer-inner h2 {
  font-size: 1.4rem;
  margin: 0 0 0.75rem;
}
.filter-layer .filter-layer-inner .filter-button {
  font-size: 0.85rem;
  padding: 0.2rem 0.6rem;
}
.filter-layer .filter-layer-inner .level-3 .filter-button {
  font-size: 0.65rem;
}
.filter-layer button.filter-close {
  position: absolute;
  top: 0;
  right: 0.5rem;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-green);
}
.map-container.map-legend-visible button.show-legend {
  background: var(--color-green-light);
  color: var(--color-white);
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.15);
  outline: 1px solid var(--color-white);
}
.map-container.map-legend-visible button.show-legend path,
.map-container.map-legend-visible button.show-legend rect {
  fill: none;
  stroke: var(--color-white);
}
.map-container.fullscreen-active button.fullscreen-close {
  background: var(--color-green);
  color: var(--color-white);
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.15);
  outline: 1px solid var(--color-white);
}
.map-container.fullscreen-active button.fullscreen-close path {
  fill: none;
  stroke: var(--color-white);
}
.btn.btn-round {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 100%;
  border: none;
  outline: 1px solid var(--color-grey-dark);
  background: var(--color-white);
  color: var(--color-grey-dark);
  font-size: 1.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease-in-out, background 0.2s ease, color 0.2s ease;
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0);
}
.btn.btn-round svg {
  stroke: currentColor;
  transition: stroke 0.2s ease, fill 0.2s ease;
}
.btn.btn-round:hover {
  background: var(--color-green);
  color: var(--color-white);
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.15);
  outline: 1px solid var(--color-white);
}
.btn.btn-round.fullscreen:hover, .btn.btn-round.fullscreen-close:hover, .btn.btn-round.show-legend:hover {
  outline: 1px solid var(--color-white);
}
.btn.btn-round.fullscreen:hover path,
.btn.btn-round.fullscreen:hover rect, .btn.btn-round.fullscreen-close:hover path,
.btn.btn-round.fullscreen-close:hover rect, .btn.btn-round.show-legend:hover path,
.btn.btn-round.show-legend:hover rect {
  fill: none;
  stroke: var(--color-white);
}
.btn.btn-round.show-legend {
  margin: 0 0 0 0.65rem;
}
.btn.btn-round .icon {
  display: inline-block;
  line-height: 1;
}
.btn.btn-round[disabled], .btn.btn-round.is-disabled {
  border-color: var(--color-green-light);
  cursor: not-allowed;
}
.btn.btn-round[disabled] path, .btn.btn-round.is-disabled path {
  stroke: var(--color-green-light);
}
.btn.btn-round[disabled]:hover, .btn.btn-round.is-disabled:hover {
  border-color: var(--color-green-light);
  background: var(--color-white);
}
.btn.btn-round[disabled]:hover path, .btn.btn-round.is-disabled:hover path {
  stroke: var(--color-green-light);
}
.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--color-grey-soft);
  border-radius: 2rem;
  font-size: 1rem;
  background-color: white;
  color: var(--color-blue-dark);
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}
.filter-button:hover {
  border-color: #666;
}
input[type=checkbox].checkbox.hidden {
  display: none;
}
/* Aktiver Status */
input[type=checkbox].checkbox.hidden:checked + .filter-button {
  background-color: var(--color-blue-dark-hover, #2c3e50);
  color: var(--color-white);
  border-color: var(--color-blue-dark-hover, #2c3e50);
}
.accordion-item {
  border-bottom: 1px solid var(--color-grey-soft);
  padding: 0.5rem 0;
}
.accordion-header {
  font-size: 0.9rem;
  font-weight: bold;
  cursor: default;
  margin: 0 0 0.25rem;
  letter-spacing: 0.02em;
}
.accordion-content {
  padding-left: 0;
}
.filter-footer {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.clear-results-button,
.show-results-button {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 2rem;
  font-weight: bold;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.5rem 0.8rem;
}
.clear-results-button:hover,
.show-results-button:hover {
  color: var(--color-white);
  background-color: var(--color-green-dark);
}
.show-results-button {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.show-results-button:hover {
  background-color: var(--color-green-dark);
}
.ce-contentmap .content-map-legend h3 {
  font-weight: 500;
  display: block;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-blue-dark-hover);
}
.ce-contentmap .content-map-legend h3 > span {
  font-weight: 300;
  font-size: 1rem;
}
.ce-contentmap .content-map-legend .tt.columns .img.full {
  max-width: 94%;
  padding-left: 3%;
}
.ce-contentmap .uvsga-map p, .ce-contentmap .uvsga-map a, .ce-contentmap .uvsga-map span {
  font-size: 0.8rem;
  line-height: 1.3;
}
.ce-contentmap .uvsga-map a.read-more {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--color-grey);
}
.ce-contentmap .uvsga-map .leaflet-control-container a, .ce-contentmap .uvsga-map .leaflet-control-container span {
  font-size: 1.3rem;
  line-height: 1.3rem;
}
.ce-contentmap .uvsga-map .leaflet-control-attribution p, .ce-contentmap .uvsga-map .leaflet-control-attribution a, .ce-contentmap .uvsga-map .leaflet-control-attribution span {
  font-size: 0.75rem;
  line-height: 0.75rem;
}
.content-map {
  position: relative;
}
.content-map .leaflet-marker-icon.faded {
  opacity: 0.3 !important;
}
.content-map .content-map-legend.pos-right {
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.05);
}
.content-map .content-map-legend .map-legend-list {
  margin-top: 0;
}
.content-map .content-map-legend ul {
  list-style-type: none;
  padding-left: 0;
}
.content-map .content-map-legend ul li {
  border-bottom: 1px solid var(--color-white);
  padding: 0.5rem 0;
}
.content-map .content-map-legend ul li .tags .tag {
  font-size: 0.65rem;
  margin-right: 2px;
  margin-bottom: 2px;
}
.content-map-legend.pos-below ul {
  padding: 0;
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .content-map-legend.pos-below ul {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .content-map-legend.pos-below ul {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .content-map-legend.pos-below ul {
    max-width: 90em;
  }
}
.content-map-legend.pos-below ul li {
  border-bottom: none;
  display: block;
  width: 100%;
}
.content-map-legend.pos-below ul li .tags {
  display: none;
}
.content-map-legend.pos-below ul li li {
  width: initial;
}
.content-map-legend.pos-below .map-legend-item .tt.columns {
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-blue-dark-hover);
  width: 100%;
  max-width: 100%;
}
@media (min-width: 48em) {
  .content-map-legend.pos-below .map-legend-item .tt.columns {
    display: grid;
    grid-template-columns: 2fr 10fr;
    gap: 1rem;
  }
}
.content-map-legend.pos-below .map-legend-item .tt.columns:hover {
  background: var(--color-grey-soft);
}
.content-map-legend.pos-below .map-legend-item .tt.columns:hover img {
  mix-blend-mode: multiply;
  background-color: transparent;
}
.content-map-legend.pos-below .map-legend-item .tt.columns .col-left .img.full img {
  display: block;
  max-width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (min-width: 48em) {
  .content-map-legend.pos-below .map-legend-item .tt.columns .col-right {
    display: grid;
    grid-template-columns: 2fr 1fr 4fr;
    gap: 1rem;
  }
}
.content-map-legend.pos-below .map-legend-item .tt.columns .col-right h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}
.content-map-legend.pos-below .map-legend-item .tt.columns .col-right .address {
  font-size: 0.9rem;
  color: var(--color-gray-dark);
}
.content-map-legend.pos-below .map-legend-item .tt.columns .col-right .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.content-map-legend.pos-below .map-legend-item .tt.columns .col-right .tags .tag {
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
}
.content-map-legend.pos-below .map-legend-item .tt.columns .col-right .tags .tag-toggle {
  cursor: pointer;
}
.content-map-legend.pos-below .map-legend-item .tt.columns .col-right p {
  margin: 0;
}
.content-map-legend.pos-below .map-legend-item .tt.columns .col-right .link-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.content-map-legend.pos-below .map-legend-item .tt.columns .col-right .link-list li {
  font-size: 0.85rem;
}
.uvsga-map .content-map {
  height: 55vh;
  flex: 1 1 100vw;
}
.uvsga-map .content-map-legend {
  z-index: 99;
  background: var(--color-white);
  transition: all 0.4s ease;
}
.uvsga-map .content-map-legend.pos-right {
  pointer-events: auto;
  transform: translateX(0);
}
.uvsga-map .content-map-legend.pos-below {
  pointer-events: auto;
  transform: translateY(0);
}
.uvsga-map .content-map-legend .legend-content {
  padding: 3rem 0.75rem 1rem;
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .uvsga-map .content-map-legend .legend-content {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .uvsga-map .content-map-legend .legend-content {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .uvsga-map .content-map-legend .legend-content {
    max-width: 90em;
  }
}
.uvsga-map .content-map-legend .legend-content {
  /* default style for legend */
}
.uvsga-map .content-map-legend .legend-content h3 {
  margin-top: -3rem;
  position: absolute;
  padding-top: 1rem;
  background: var(--color-white);
}
.uvsga-map .content-map-legend .legend-content ul {
  list-style: none;
  padding-left: 0;
}
.map-container .hidden {
  display: none !important;
}
.map-container.legendpos-below .content-map-legend, .map-container.legendpos-right .content-map-legend {
  display: none;
}
.map-container.legendpos-right.map-legend-visible .uvsga-map {
  display: flex;
}
.map-container.legendpos-right.map-legend-visible .content-map {
  flex: 1 1 20vw;
  height: 55vh;
}
@media (min-width: 48em) {
  .map-container.legendpos-right.map-legend-visible .content-map {
    flex: 1 1 70vw;
  }
}
.map-container.legendpos-right.map-legend-visible .content-map-legend {
  display: flex;
  flex: 0 0 80vw;
  height: 55vh;
  max-height: 55vh;
  overflow-y: hidden;
}
@media (min-width: 48em) {
  .map-container.legendpos-right.map-legend-visible .content-map-legend {
    flex: 0 0 30vw;
  }
}
.map-container.legendpos-right.map-legend-visible .content-map-legend .entries {
  overflow-y: scroll;
  height: 100%;
}
.map-container.legendpos-right.fullscreen-active {
  display: block;
}
.map-container.legendpos-right.fullscreen-active .content-map {
  flex: 1 1 100vw;
  height: 100vh;
}
.map-container.legendpos-right.fullscreen-active .content-map-legend {
  height: 100vh;
  max-height: 100vh;
}
.map-container.legendpos-below.map-legend-visible .map-container {
  display: grid;
  grid-template-columns: 1fr;
}
.map-container.legendpos-below.map-legend-visible .uvsga-map {
  display: grid;
  grid-template-columns: 1fr;
}
.map-container.legendpos-below.map-legend-visible .content-map {
  height: 55vh;
}
.map-container.legendpos-below.map-legend-visible .content-map-legend {
  display: block;
  height: 100%;
}
.map-container.legendpos-below.fullscreen-active {
  display: grid;
  grid-template-columns: 1fr;
}
.map-container.legendpos-below.fullscreen-active .uvsga-map {
  display: grid;
  grid-template-columns: 1fr;
}
.map-container.legendpos-below.fullscreen-active .content-map {
  flex: 1 1 100vw;
  height: 100vh;
}
.map-container.legendpos-below.fullscreen-active .content-map-legend {
  height: 0vh;
  max-height: 0vh;
}
.map-container.legendpos-below.fullscreen-active.map-legend-visible .content-map {
  flex: 1 1 55vw;
  height: 55vh;
}
.map-container.legendpos-below.fullscreen-active.map-legend-visible .content-map-legend {
  height: 45vh;
  max-height: 45vh;
}
.map-container {
  /*
  &.fullscreen-active {
    display: block;

    .content-map {
      flex: 1 1 100vw;
      height: 100vh;
    }

    .content-map-legend {
      height: 100vh;
      max-height: 100vh;
    }

    &.legendpos-bottom {
      .content-map {
        flex: 1 1 65vh;
        height: 65vh;
      }

      .content-map {
        flex: 1 1 35vh;
        height: 35vh;
      }

      .legend-content {
        .entries {
          overflow-y: auto;
        }
      }
    }
  }*/
  /*
  &.legendpos-right {
    .uvsga-map {
      height: 55vh;
      display: flex;
      align-items: stretch;
    }

    .content-map-legend {
      flex: 0 0 0;
      max-height: 100%;
      overflow-y: auto;
    }
  }

  &.legendpos-bottom {
    .uvsga-map {
      height: 55vh;
      display: flex;
      align-items: stretch;
    }

    .content-map-legend {
      display: none;
    }
  }*/
}
/*
.map-container {
  &.map-legend-visible {
    .content-map-legend {
      opacity: 1;

      &.pos-bottom {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }

      &.pos-right {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
      }

      &.pos-below {
        display: block;
      }
    }



}

.map-container.fullscreen-active {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;

  .ct-map {
    flex: 0 0 auto;
    max-height: 25vh;
    overflow: auto;
    @include wMaxContent;
  }

  .content-map {
    flex: 1 1 auto;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  .ct-map {
    width: 98vw;
  }
}

.content-map-legend {
  opacity: 0;

  &.pos-bottom {
    opacity: 0;
    pointer-events: none;
    transition: transform 1s ease-in-out, opacity 0.5s ease;
    transform: translateY(250px);
  }

  &.pos-right {
    opacity: 0;
    pointer-events: none;
    transition: transform 1s ease-in-out, opacity 0.5s ease;
    transform: translateX(250px);
  }

  &.pos-below {
    display: none;
  }
}
 */
.ce-contentteaser {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .ce-contentteaser {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .ce-contentteaser {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .ce-contentteaser {
    max-width: 90em;
  }
}
.ce-contentteaser .header h3 {
  margin-bottom: 0.5rem;
}
.ce-contentteaser ul[class^=layout-] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-large);
  margin-bottom: var(--space-large);
}
.ce-contentteaser .teaser-card {
  background: var(--color-card-bg);
  padding-bottom: 1.75rem;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 6px solid var(--color-primary);
}
.ce-contentteaser .teaser-card:hover img {
  transform: scale(1.25);
}
.ce-contentteaser .teaser-card--linked {
  cursor: pointer;
}
.ce-contentteaser .teaser-card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.ce-contentteaser .teaser-card__photo {
  display: block;
  width: 100%;
  height: 260px;
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.ce-contentteaser .teaser-card__photo img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: transform 0.3s ease;
}
.ce-contentteaser .teaser-card__title {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  line-height: 1.1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  width: 95%;
  text-align: left;
  margin-left: var(--space-large);
  padding-right: var(--space-large);
}
.ce-contentteaser .teaser-card__description {
  width: 95%;
  text-align: left;
  margin-left: var(--space-large);
  padding-right: var(--space-large);
}
.ce-contentteaser .layout-small {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.ce-contentteaser .layout-small .teaser-card {
  display: grid;
  grid-template-columns: 90px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 1rem;
  min-height: 100px;
  text-align: left;
}
.ce-contentteaser .layout-small .teaser-card .teaser-card__photo {
  grid-row: 1/span 2;
  grid-column: 1/2;
  width: 100%;
  height: 260px;
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: 0;
  align-self: center;
  justify-self: center;
}
.ce-contentteaser .layout-small .teaser-card .teaser-card__name {
  grid-row: 1/2;
  grid-column: 2/3;
  margin-bottom: 0.25rem;
  font-size: 1.15rem;
  text-align: left;
}
.ce-contentteaser .layout-small .teaser-card .teaser-card__role {
  grid-row: 2/3;
  grid-column: 2/3;
  font-size: 0.95rem;
  color: var(--color-primary);
  text-align: left;
}
.ce-contentteaser .layout-small .teaser-card .teaser-card__description,
.ce-contentteaser .layout-small .teaser-card .teaser-card__contact {
  display: none;
}
.ce-contentteaser .layout-medium {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ce-contentteaser .layout-medium .teaser-card__description {
  display: none;
}
.ce-contentteaser .layout-large {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}
.ce-contentperson {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .ce-contentperson {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .ce-contentperson {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .ce-contentperson {
    max-width: 90em;
  }
}
.ce-contentperson .header h3 {
  margin-bottom: 0.5rem;
}
.ce-contentperson ul[class^=layout-] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-large);
  margin-bottom: var(--space-large);
}
.ce-contentperson .person-card {
  background: var(--color-card-bg);
  padding: 1.6rem 1.5rem 1.5rem;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 6px solid var(--color-primary);
}
.ce-contentperson .person-card:hover img {
  transform: scale(1.25);
}
.ce-contentperson .person-card__photo {
  display: block;
  width: 180px;
  height: 180px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.ce-contentperson .person-card__photo img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  max-width: 100%;
  transition: all 0.3s ease;
}
.ce-contentperson .person-card__name {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  line-height: 1.1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-green-dark);
  width: 100%;
}
.ce-contentperson .person-card__role {
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 1rem;
  width: 100%;
}
.ce-contentperson .person-card__bio {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  color: var(--color-black);
  width: 100%;
}
.ce-contentperson .person-card__bio.empty {
  display: none;
}
.ce-contentperson .person-card__contact {
  margin-top: auto;
  padding-top: 1.5rem;
  display: inline-block;
  width: 100%;
  text-align: left;
}
.ce-contentperson .person-card__contact ul {
  list-style-type: none;
  padding: 0;
}
.ce-contentperson .person-card__contact ul li {
  margin-bottom: 0.5rem;
}
.ce-contentperson .person-card__contact ul li:last-child {
  margin-bottom: 0;
}
.ce-contentperson .person-card__contact ul li a.person-card__phone {
  text-decoration: none;
  border-bottom: 1px solid var(--color-opace);
}
.ce-contentperson .person-card__phone {
  font-size: 0.95rem;
}
.ce-contentperson .person-card__mail {
  display: inline-block;
  text-align: left;
  padding: 0.6rem 1.5rem;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}
.ce-contentperson .person-card__mail:hover {
  opacity: 0.85;
}
.ce-contentperson .layout-small {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.ce-contentperson .layout-small .person-card {
  display: grid;
  grid-template-columns: 90px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 1rem;
  min-height: 100px;
  text-align: left;
}
.ce-contentperson .layout-small .person-card .person-card__photo {
  grid-row: 1/span 2;
  grid-column: 1/2;
  width: 90px;
  height: 90px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  margin-bottom: 0;
  align-self: center;
  justify-self: center;
}
.ce-contentperson .layout-small .person-card .person-card__name {
  grid-row: 1/2;
  grid-column: 2/3;
  margin-bottom: 0.25rem;
  font-size: 1.15rem;
  text-align: left;
}
.ce-contentperson .layout-small .person-card .person-card__role {
  grid-row: 2/3;
  grid-column: 2/3;
  font-size: 0.95rem;
  color: var(--color-primary);
  text-align: left;
}
.ce-contentperson .layout-small .person-card .person-card__bio,
.ce-contentperson .layout-small .person-card .person-card__contact {
  display: none;
}
.ce-contentperson .layout-medium {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ce-contentperson .layout-medium .person-card__bio {
  display: none;
}
.ce-contentperson .layout-large {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}
.page-layout .ce-contentboxed .ce-style-background-light .person-card {
  background: var(--color-white);
}
.ce-contentevents .event.listShort.has-mini-calendar {
  display: grid;
  grid-template-columns: 1fr 16rem;
  grid-template-rows: auto;
  gap: 0 2rem;
  align-items: start;
  margin-bottom: var(--space-larger);
}
@media (max-width: 47.99em) {
  .ce-contentevents .event.listShort.has-mini-calendar {
    grid-template-columns: 1fr;
  }
}
.ce-contentevents .event.listShort.has-mini-calendar .content-list-event {
  grid-column: 1;
}
@media (min-width: 48em) {
  .ce-contentevents .event.listShort.has-mini-calendar .content-list-event--short {
    -moz-column-count: 2;
         column-count: 2;
  }
}
.ce-contentevents .event.listShort.has-mini-calendar .mini-calendar {
  grid-column: 2;
  position: sticky;
  top: 1.5rem;
}
@media (max-width: 47.99em) {
  .ce-contentevents .event.listShort.has-mini-calendar .mini-calendar {
    grid-column: 1;
    position: static;
    order: -1;
    padding-bottom: 0.75rem;
  }
}
.ce-contentevents .event.list.has-mini-calendar {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-larger);
}
.ce-contentevents .event.list.has-mini-calendar .mini-calendar {
  order: 1;
  max-width: 420px;
  width: 100%;
  margin: 0 auto 1.5rem;
  padding: 0.25rem 0.5rem;
}
.ce-contentevents .event.list.has-mini-calendar .mini-calendar .mini-calendar__grid {
  display: none;
}
.ce-contentevents .event.list.has-mini-calendar .mini-calendar .mini-calendar__stepper {
  border-bottom: none;
  margin-bottom: 0;
  padding: 0.5rem 0.25rem;
}
.ce-contentevents .event.list.has-mini-calendar .mini-calendar .mini-calendar__today {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.ce-contentevents .event.list.has-mini-calendar .content-list-event {
  order: 2;
  width: 100%;
}
.mini-calendar {
  font-size: 0.8rem;
}
.mini-calendar__stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-grey-light, #e5e5e5);
}
.mini-calendar__label {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-blue-dark, #222);
  letter-spacing: 0.01em;
}
.mini-calendar__nav-btn {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--color-grey-dark);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mini-calendar__nav-btn:hover {
  background: var(--color-grey-light);
  color: var(--color-primary);
}
.mini-calendar__nav-btn:focus-visible {
  outline: none;
  border-color: var(--color-primary);
}
.mini-calendar__today {
  display: block;
  margin: 0 auto 0.75rem;
  padding: 0.2rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: transparent;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.mini-calendar__today:hover, .mini-calendar__today:focus-visible {
  background: var(--color-primary);
  color: #fff;
  outline: none;
}
.mini-calendar__today[hidden] {
  display: none;
}
.mini-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.mini-calendar__wd {
  text-align: center;
  font-weight: 600;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-grey-dark);
  opacity: 0.45;
  padding-bottom: 4px;
}
.mini-calendar__day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: 0.75rem;
  color: var(--color-grey-light);
  border: none;
  background: none;
  padding: 0;
  cursor: default;
}
.mini-calendar__day.is-today {
  font-weight: 700;
  color: var(--color-text);
}
.mini-calendar__day.has-events {
  color: var(--color-text);
  cursor: pointer;
  background: var(--color-grey-light, #e5e5e5);
}
.mini-calendar__day.has-events:hover {
  background: var(--color-primary);
  color: #fff;
}
.mini-calendar__day.has-events.is-today {
  background: var(--color-primary);
  color: #fff;
}
.mini-calendar__day.is-flashing {
  animation: mini-calendar-day-flash 0.6s ease-out;
}
.mini-calendar__day--empty {
  visibility: hidden;
}
@keyframes mini-calendar-day-flash {
  0% {
    transform: scale(1);
    background: var(--color-primary);
    color: #fff;
  }
  40% {
    transform: scale(1.3);
    background: var(--color-primary);
    color: #fff;
  }
  100% {
    transform: scale(1);
  }
}
.ce-contentevents .content-list-event--short {
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 48em) {
  .ce-contentevents .content-list-event--short {
    -moz-column-count: 3;
         column-count: 3;
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }
  .ce-contentevents .content-list-event--short .entry-header {
    -moz-column-span: all;
         column-span: all;
  }
  .ce-contentevents .content-list-event--short .entry-item {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
}
.ce-contentevents .content-list-event--short .entry-empty {
  color: var(--color-grey-dark);
  opacity: 0.45;
  padding: var(--space-small) 0;
}
.ce-contentevents .content-list-event--short .entry-header {
  margin-top: 1.5rem;
  padding-top: var(--space-small);
  padding-bottom: var(--space-small);
  border-bottom: 1px solid var(--color-grey-dark);
  text-transform: uppercase;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.ce-contentevents .content-list-event--short .entry-header:first-child {
  margin-top: 0;
}
.ce-contentevents .content-list-event--short .entry-item {
  padding-top: var(--space-small);
  padding-bottom: var(--space-small);
  border-bottom: 1px solid var(--color-grey-light, #e5e5e5);
  transition: background 0.15s ease, opacity 0.15s ease;
}
.ce-contentevents .content-list-event--short .entry-item.is-past {
  opacity: 0.45;
}
.ce-contentevents .content-list-event--short .entry-item.is-past:hover {
  opacity: 1;
}
.ce-contentevents .content-list-event--short .entry-item:hover .date .date--day {
  color: var(--color-primary);
}
.ce-contentevents .content-list-event--short .entry-item .text {
  display: flex;
  gap: var(--space-small);
  align-items: flex-start;
}
.ce-contentevents .content-list-event--short .entry-item .date {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3rem;
  text-align: center;
}
.ce-contentevents .content-list-event--short .entry-item .date .date--weekday {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
  line-height: 1.2;
}
.ce-contentevents .content-list-event--short .entry-item .date .date--day {
  font-size: 2rem;
  font-weight: 200;
  line-height: 1;
  transition: color 0.15s ease;
}
.ce-contentevents .content-list-event--short .entry-item .entry-infos {
  flex: 1;
  min-width: 0;
}
.ce-contentevents .content-list-event--short .entry-item .entry-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.ce-contentevents .content-list-event--short .entry-item .entry-category {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}
.ce-contentevents .content-list-event--short .entry-item .title {
  margin: 0 0 2px;
  display: block;
}
.ce-contentevents .content-list-event--short .entry-item .title,
.ce-contentevents .content-list-event--short .entry-item .title h3 {
  font-size: 1rem;
  font-weight: 600;
  text-transform: initial;
  margin: 0;
}
@media (max-width: 47.99em) {
  .ce-contentevents .content-list-event--short .entry-item .title,
  .ce-contentevents .content-list-event--short .entry-item .title h3 {
    font-size: 0.9rem;
    line-height: 1.3;
  }
}
.ce-contentevents .content-list-event--short .entry-item .title h3 {
  display: inline;
}
.ce-contentevents .content-list-event--short .entry-item .title a {
  border-bottom: none;
  color: inherit;
}
.ce-contentevents .content-list-event--short .entry-item .title a:hover {
  color: var(--color-primary);
}
.ce-contentevents .content-list-event--short .entry-item .event-date-range {
  margin: 0 0 4px;
  font-size: 0.8rem;
  color: var(--color-grey-dark, #666);
  line-height: 1.3;
}
.ce-contentevents .content-list-event--short .entry-item .teaser {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--color-grey-dark);
}
.ce-contentevents .content-list-event--short .entry-item .teaser p {
  margin: 0 0 4px;
}
.ce-contentevents .content-list-event--short .entry-item .button-more {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: none;
}
.ce-contentevents .content-list-event--short .entry-item .button-more:hover {
  text-decoration: underline;
}
.ce-contentevents {
  margin-bottom: var(--space-larger);
}
.ce-contentevents .ce-header,
.ce-contentevents .event,
.ce-contentevents .text.rte {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .ce-contentevents .ce-header,
  .ce-contentevents .event,
  .ce-contentevents .text.rte {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .ce-contentevents .ce-header,
  .ce-contentevents .event,
  .ce-contentevents .text.rte {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .ce-contentevents .ce-header,
  .ce-contentevents .event,
  .ce-contentevents .text.rte {
    max-width: 90em;
  }
}
.ce-contentevents .event > ul {
  list-style-type: none;
  padding-left: 0;
}
.ce-contentevents .list,
.ce-contentevents .listShort {
  margin-bottom: var(--space-larger);
}
.ce-contentevents .ce-link-button {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .ce-contentevents .ce-link-button {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .ce-contentevents .ce-link-button {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .ce-contentevents .ce-link-button {
    max-width: 90em;
  }
}
.ce-contentform {
  margin-bottom: var(--space-larger);
}
.ce-contentform .ce-header,
.ce-contentform .custom-form,
.ce-contentform .text.rte {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .ce-contentform .ce-header,
  .ce-contentform .custom-form,
  .ce-contentform .text.rte {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .ce-contentform .ce-header,
  .ce-contentform .custom-form,
  .ce-contentform .text.rte {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .ce-contentform .ce-header,
  .ce-contentform .custom-form,
  .ce-contentform .text.rte {
    max-width: 90em;
  }
}
.ce-contentform {
  /* Formie-Submit übernimmt das Look-&-Feel der globalen
     .btn.button-primary aus fragment/_button.scss — gleiche Padding-,
     Radius- und Border-Werte, gleiche Hover-Logik. */
}
.ce-contentform .fui-submit {
  display: inline-block;
  padding: 6.25px 17.5px;
  border-radius: 43.75px;
  background: var(--color-primary);
  color: var(--color-white);
  border: 1px solid var(--color-blue-dark);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-base), color var(--duration-fast) var(--easing-base), border-color var(--duration-fast) var(--easing-base);
}
.ce-contentform .fui-submit:hover {
  background: var(--color-meta-main);
  border-color: var(--color-blue-dark);
  color: var(--color-white);
}
.ce-contentform {
  /* Übrige Formie-Buttons (Multi-Step, Reset etc.) auf gleichen
     Radius wie .btn bringen. */
}
.ce-contentform .fui-btn:not(:disabled):not(.disabled) {
  border-radius: 43.75px;
}
.ce-contentform .fui-progress-bar {
  background-color: var(--color-primary);
}
.ce-contentgoogledocuments {
  margin-bottom: var(--space-larger);
}
.ce-contentgoogledocuments .shared-content {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .ce-contentgoogledocuments .shared-content {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .ce-contentgoogledocuments .shared-content {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .ce-contentgoogledocuments .shared-content {
    max-width: 90em;
  }
}
.ce-contentgoogledocuments .header h3 {
  margin-bottom: 0.5rem;
}
.ce-contentgoogledocuments .mobile {
  width: 100%;
  min-height: 80vh;
  border: 0;
}
/* ─── Content Element: Downloads ────────────────────────────────────────
   Asset-Liste mit Filename, Endung, Grösse. Trennlinien zwischen
   Items, Hover-Akzent über Brand-Token. */
.ce-contentdownloads .ce-downloads__lead {
  margin-bottom: 1rem;
}
.ce-contentdownloads .ce-downloads__list {
  list-style: none;
  padding: 0;
  margin: 1em 0;
}
.ce-contentdownloads .ce-downloads__item {
  border-bottom: 1px solid var(--color-grey-soft);
}
.ce-contentdownloads .ce-downloads__item:first-child {
  border-top: 1px solid var(--color-grey-soft);
}
.ce-contentdownloads .ce-downloads__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7em 0;
  text-decoration: none;
  color: inherit;
}
.ce-contentdownloads .ce-downloads__link:hover .ce-downloads__title {
  color: var(--color-primary);
}
.ce-contentdownloads .ce-downloads__title {
  flex: 1 1 auto;
  transition: color 150ms ease;
}
.ce-contentdownloads .ce-downloads__meta {
  flex: 0 0 auto;
  color: var(--color-grey-medium, #888);
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* ─── Content Element: Partner ──────────────────────────────────────────
   Logo-Grid (default) oder horizontale Row. Logos werden leicht
   entsättigt, bei Hover voll farbig. Items reagieren auf Container-
   Breite via auto-fill. */
.ce-contentpartner .ce-partner__list {
  list-style: none;
  padding: 0;
  margin: 1em 0;
}
.ce-contentpartner .ce-partner__list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1.5rem;
  align-items: center;
}
.ce-contentpartner .ce-partner__list--row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}
.ce-contentpartner .ce-partner__item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ce-contentpartner .ce-partner__item a {
  display: inline-flex;
  text-decoration: none;
}
.ce-contentpartner .ce-partner__item img {
  max-width: 100%;
  height: auto;
  filter: grayscale(0.2);
  transition: filter 200ms ease;
}
.ce-contentpartner .ce-partner__item img:hover {
  filter: grayscale(0);
}
.ce-contentpartner .ce-partner__label {
  color: var(--color-grey-medium, #666);
  font-size: 0.95em;
}
/* ─── Content Element: Movie ────────────────────────────────────────────
   Click-to-load-Embed mit 16:9-Aspect-Ratio. Vor Klick: Poster +
   Play-Button. Nach Klick wird der Button durch ein iframe ersetzt
   (siehe modules/movieEmbed.js). */
.ce-contentmovie .ce-movie {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
}
.ce-contentmovie .ce-movie__play {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.ce-contentmovie .ce-movie__play img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.ce-contentmovie .ce-movie__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 4rem;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.ce-contentmovie iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.ce-contentpdfviewer {
  margin-top: var(--space-large);
  margin-bottom: var(--space-large);
}
.pdf-viewer {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--color-blue-light);
}
.pdf-viewer .ce-header {
  text-align: left;
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .pdf-viewer .ce-header {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .pdf-viewer .ce-header {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .pdf-viewer .ce-header {
    max-width: 90em;
  }
}
.pdf-viewer .pdf-canvas-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 70vh;
  overflow: auto;
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .pdf-viewer .pdf-canvas-wrap {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .pdf-viewer .pdf-canvas-wrap {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .pdf-viewer .pdf-canvas-wrap {
    max-width: 90em;
  }
}
.pdf-viewer canvas {
  max-width: 100%;
  max-height: 70vh;
  background: var(--color-white);
  border: 1px solid var(--color-white);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  cursor: zoom-in;
}
.pdf-viewer.is-zoomed .pdf-canvas-wrap {
  align-items: flex-start;
  justify-content: flex-start;
}
.pdf-viewer.is-zoomed canvas {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}
.pdf-viewer .pdf-zoom-icon {
  display: inline-flex;
  line-height: 0;
}
.pdf-viewer .pdf-zoom-icon--out {
  display: none;
}
.pdf-viewer.is-zoomed .pdf-zoom-icon--in {
  display: none;
}
.pdf-viewer.is-zoomed .pdf-zoom-icon--out {
  display: inline-flex;
}
.pdf-viewer .pdf-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pdf-viewer .pdf-controls .page-status {
  font-size: 0.95rem;
  color: #333;
}
.pdf-viewer .is-hidden {
  display: none !important;
}
.pdf-viewer .page-nr {
  font-weight: bold;
  padding-right: 0.2rem;
}
.pdf-viewer .total-pages {
  padding-left: 0.2rem;
}
.pdf-viewer .total-pages:before {
  padding-right: 0.2rem;
  content: "/";
}
.pdf-thumbs {
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem 0.2rem;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.pdf-thumbs[hidden] {
  display: none;
}
.pdf-thumbs::-webkit-scrollbar {
  height: 6px;
}
.pdf-thumbs::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.pdf-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 60px;
  height: 80px;
  padding: 0;
  border: 2px solid transparent;
  background: var(--color-white);
  cursor: pointer;
  scroll-snap-align: center;
  overflow: hidden;
  opacity: 0.75;
  transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdf-thumb canvas {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.pdf-thumb__nr {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 0.65rem;
  line-height: 1;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 2px;
  pointer-events: none;
}
.pdf-thumb:hover, .pdf-thumb:focus-visible {
  opacity: 1;
  outline: none;
  border-color: rgba(0, 0, 0, 0.2);
}
.pdf-thumb.is-active {
  opacity: 1;
  border-color: var(--color-blue);
}
.pdf-download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 600px;
  padding: 0.75rem 1rem;
  background: var(--color-white);
  color: var(--color-blue);
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pdf-download:hover, .pdf-download:focus-visible {
  border-color: var(--color-blue);
  outline: none;
}
.pdf-download__about {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.pdf-download__title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdf-download__meta {
  font-size: 0.85rem;
  opacity: 0.75;
}
.pdf-download__meta > span:after {
  content: " | ";
}
.pdf-download__meta > span:last-child:after {
  content: "";
}
.pdf-download__icon {
  flex: 0 0 auto;
  color: var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  .pdf-thumb,
  .pdf-download {
    transition: none;
  }
}
/* ─── Content Element: Free HTML ────────────────────────────────────────
   Wrapper-Klasse für freien HTML-Output. Bewusst minimal: das
   Markup kommt direkt vom Editor und bringt seine Stile typischerweise
   selbst mit. Hier nur ein vertikales Flow-Spacing als Sicherheitsnetz. */
.ce-contenthtml .ce-html {
  margin: 1em 0;
}
/* ─── Content Element: Hero ─────────────────────────────────────────────
   Eyebrow + Headline + Lead + Bild + bis zu zwei CTAs. Bewusst kein
   Full-Bleed-Wrapper hier — der Hero respektiert das umgebende
   `.container`-Grid. Wer ein randloses Hero will, kann via Boxed-
   Wrapper-Container den Hintergrund extern setzen. */
.ce-contenthero .ce-hero {
  display: grid;
  gap: 1.5rem;
  padding: 2rem 0;
}
@media (min-width: 48em) {
  .ce-contenthero .ce-hero {
    grid-template-columns: 1fr;
    align-items: center;
  }
}
@media (min-width: 48em) {
  .ce-contenthero .ce-hero--has-image {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
  }
}
.ce-contenthero .ce-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.25rem;
}
.ce-contenthero .ce-hero__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
}
.ce-contenthero .ce-hero__headline {
  margin: 0 0 0.75rem;
  line-height: 1.1;
}
.ce-contenthero .ce-hero__lead {
  margin: 0 0 1.5rem;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--color-grey-medium, #444);
}
.ce-contenthero .ce-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.ce-contenthero .ce-hero__cta {
  /* Erbt von existierenden .btn / .button-primary / .button-secondary
     Klassen — hier nur Hero-spezifische Mindestbreite und Spacing. */
  min-width: 10rem;
  text-align: center;
}
.ce-contentflickrgallery {
  margin-bottom: var(--space-larger);
}
.flickr-gallery {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .flickr-gallery {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .flickr-gallery {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .flickr-gallery {
    max-width: 90em;
  }
}
.flickr-gallery {
  position: relative;
}
.flickr-gallery .ce-header {
  text-align: left;
}
.flickr-gallery .fullscreen-buttons {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  margin: 0;
}
.flickr-gallery__embed img,
.flickr-gallery__embed iframe {
  max-width: 100%;
  height: auto;
  display: block;
}
.flickr-gallery.fullscreen-active {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem;
  background: var(--color-white);
  overflow: auto;
}
.flickr-gallery.fullscreen-active .fullscreen-buttons {
  top: 1rem;
  right: 1rem;
}
.flickr-gallery.fullscreen-active .flickr-gallery__embed {
  max-width: 100%;
}
.flickr-gallery.fullscreen-active .flickr-gallery__embed img,
.flickr-gallery.fullscreen-active .flickr-gallery__embed iframe {
  max-height: 90vh;
  width: auto;
  margin: 0 auto;
}
/* ─── Content Element: FAQ — Accordion ──────────────────────────────────
   Layout angelehnt an GitLab contact-sales: Liste aus fetter Frage-Zeile
   mit +/–-Toggle rechts, duenne Divider, aufklappbarer Antworttext.
   Nutzt natives <details>/<summary> (zugaenglich, kein JS noetig).
   Bewusst KEINE Font-Family-Overrides — erbt die Site-Typografie; hier nur
   Gewicht/Groesse/Spacing/Farben ueber bestehende Tokens. */
/* Ins Basis-Raster legen — wie textWithMedia & Co.: als direktes Kind von
   .one-col auf die zentrierte Lese-Breite (wMaxContent) begrenzen. Sonst
   liefe der Block ueber die volle Section-Breite. */
.one-col > .ce-contentfaq {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .one-col > .ce-contentfaq {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .one-col > .ce-contentfaq {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .one-col > .ce-contentfaq {
    max-width: 90em;
  }
}
.ce-contentfaq .faq > div {
  margin-top: var(--space-small);
}
.ce-contentfaq {
  /* Layout 'width-70' (Dropdown layoutSettings): schmalere Spalte innerhalb
     des Basis-Rasters. Erst ab dem ersten wMaxContent-Breakpoint, sonst waere
     70% auf Mobile zu schmal. */
}
@media (min-width: 48em) {
  .ce-contentfaq .faq--width-70 {
    max-width: 70%;
  }
}
.ce-contentfaq details {
  border-top: 1px solid var(--color-grey-soft);
}
.ce-contentfaq details:last-child {
  border-bottom: 1px solid var(--color-grey-soft);
}
.ce-contentfaq {
  /* ── Sanftes Auf-/Zuklappen — progressive Enhancement ──────────────────
     Animiert die Hoehe der Antwort ueber ::details-content + interpolate-size
     (Hoehe 0 -> auto weich). Browser ohne Support klappen instant auf
     (= bisheriges Verhalten, voll funktional). interpolate-size wird hier
     scoped auf das FAQ gesetzt, nicht global. */
  interpolate-size: allow-keywords;
}
@media (prefers-reduced-motion: no-preference) {
  .ce-contentfaq details::details-content {
    height: 0;
    opacity: 0;
    overflow: clip;
    transition: height 0.3s ease, opacity 0.25s ease 0.05s, content-visibility 0.3s allow-discrete;
  }
  .ce-contentfaq details[open]::details-content {
    height: auto;
    opacity: 1;
  }
}
.ce-contentfaq summary {
  list-style: none; /* Firefox: Default-Marker weg */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
  padding: var(--space) 0;
  font-weight: 700; /* fette Frage — Family bleibt geerbt */
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--color-text);
  /* WebKit/Blink: Default-Disclosure-Marker weg */
}
.ce-contentfaq summary::-webkit-details-marker {
  display: none;
}
.ce-contentfaq summary {
  /* +/–-Icon rechts, rein per CSS (zwei Balken in --color-text) */
}
.ce-contentfaq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  background: linear-gradient(var(--color-text), var(--color-text)) center/100% 2px no-repeat, linear-gradient(var(--color-text), var(--color-text)) center/2px 100% no-repeat;
  transition: transform 0.2s ease;
}
.ce-contentfaq summary:hover {
  color: var(--color-primary);
}
.ce-contentfaq summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.ce-contentfaq {
  /* Geoeffnet: vertikaler Balken weg -> Minus */
}
.ce-contentfaq details[open] > summary::after {
  background: linear-gradient(var(--color-text), var(--color-text)) center/100% 2px no-repeat;
}
.ce-contentfaq {
  /* Antwort */
}
.ce-contentfaq details > div {
  padding: 0 0 var(--space) 0;
  max-width: 60ch; /* Lesbarkeit wie im Vorbild */
  line-height: 1.6;
  color: var(--color-text);
}
.ce-contentfaq details > div > *:first-child {
  margin-top: 0;
}
.ce-contentfaq details > div > *:last-child {
  margin-bottom: 0;
}
/* ─── Content Element: Table ─────────────────────────────────────────────
   Schlichte, lesbare Tabelle. Erbt die Site-Typografie (kein Font-Override),
   nutzt bestehende Tokens fuer Spacing/Farben. Auf schmalen Viewports
   horizontal scrollbar statt umzubrechen. */
/* Ins Basis-Raster legen — wie textWithMedia/FAQ: als direktes Kind von
   .one-col auf die zentrierte Lese-Breite begrenzen. */
.one-col > .ce-contenttable {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .one-col > .ce-contenttable {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .one-col > .ce-contenttable {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .one-col > .ce-contenttable {
    max-width: 90em;
  }
}
.ce-contenttable .content-table__scroll {
  margin-top: var(--space-small);
  background: #fff; /* Tabelle auf weissem Grund (steht auf farbiger Seite) */
  padding: 0.75rem; /* groesseres Padding rundherum */
  overflow-x: auto; /* schmale Screens: scrollen statt quetschen */
  -webkit-overflow-scrolling: touch;
}
.ce-contenttable table {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.5;
}
.ce-contenttable th,
.ce-contenttable td {
  padding: var(--space-small) var(--space);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-grey-soft);
}
.ce-contenttable thead th {
  font-weight: 700;
  color: var(--color-text);
  border-bottom-width: 2px;
  white-space: nowrap;
}
.ce-contenttable tbody tr:last-child td {
  border-bottom: 0;
}
body.pageHome .theme-header__content {
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  body.pageHome .theme-header__content {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  body.pageHome .theme-header__content {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  body.pageHome .theme-header__content {
    max-width: 90em;
  }
}
body.pageHome .theme-header__content {
  padding: var(--space-larger) 0;
}
body.pageHome .intro h1 {
  transition: transform 1s ease;
}
body.pageHome .intro h1 .title--abbrev.load-anim-done, body.pageHome .intro h1 .title--main.load-anim-done, body.pageHome .intro h1 .title--localisation.load-anim-done {
  animation: none;
  opacity: 1;
  filter: blur(0);
  transition: filter 0.5s ease, opacity 0.5s ease;
}
body.pageHome .intro h1.nav-refocusing .title--abbrev.load-anim-done {
  animation: refocusText 0.8s ease-out forwards;
  animation-delay: 0s;
}
body.pageHome .intro h1.nav-refocusing .title--main.load-anim-done {
  animation: refocusText 0.8s ease-out forwards;
  animation-delay: 0.08s;
}
body.pageHome .intro h1.nav-refocusing .title--localisation.load-anim-done {
  animation: refocusText 0.8s ease-out forwards;
  animation-delay: 0.16s;
}
body.pageHome.navigating .intro h1 {
  transform: scale(0.95);
}
body.pageHome.navigating .intro h1 .title--abbrev.load-anim-done, body.pageHome.navigating .intro h1 .title--main.load-anim-done, body.pageHome.navigating .intro h1 .title--localisation.load-anim-done {
  filter: blur(6px);
  opacity: 0.4;
}
body.pageHome .intro {
  background: #004545;
  background: linear-gradient(0deg, rgb(0, 69, 69) 0%, rgb(1, 171, 170) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#004545", endColorstr="#01ABAA", GradientType=0);
  width: 100%;
  height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
body.pageHome .intro h1 {
  margin: 0;
  color: var(--color-white);
  font-size: inherit;
}
body.pageHome .intro h1 > span {
  display: inline-block;
  width: 100%;
  text-align: center;
}
body.pageHome .intro h1 .title--abbrev {
  color: var(--color-black);
  font-size: 80px;
  line-height: 1;
  font-weight: 800;
  opacity: 0;
  animation: appearAnimationText 1.5s ease-out forwards;
  animation-delay: 0.3s;
}
@media (min-width: 48em) {
  body.pageHome .intro h1 .title--abbrev {
    font-size: 130px;
  }
}
body.pageHome .intro h1 .title--main {
  font-size: 50px;
  line-height: 1;
  font-weight: 800;
  margin-bottom: 0.85rem;
  opacity: 0;
  animation: appearAnimationText 1.5s ease-out forwards;
  animation-delay: 1s;
}
@media (min-width: 48em) {
  body.pageHome .intro h1 .title--main {
    font-size: 70px;
    margin-bottom: 0.55rem;
  }
}
body.pageHome .intro h1 .title--localisation {
  font-size: 22px;
  line-height: 1;
  font-weight: 200;
  margin-bottom: 30vh;
  opacity: 0;
  animation: appearAnimationText 1.5s ease-out forwards;
  animation-delay: 1.5s;
}
@media (min-width: 48em) {
  body.pageHome .intro h1 .title--localisation {
    font-size: 32px;
  }
}
body.pageHome .profile-overlay {
  height: 30vh;
  width: 100%;
  margin-top: -30vh;
  background: url("/static/assets/image/saentis-silhouette.svg") 30% bottom no-repeat;
  background-size: auto 100%;
  animation: growOverlay 2s ease-out forwards;
}
body.pageHome .intro-text {
  margin: 1rem auto;
  max-width: 80vw;
  text-align: center;
}
@media (min-width: 48em) {
  body.pageHome .intro-text {
    max-width: 50%;
  }
}
body.pageHome .intro-text h2 {
  font-size: 36px;
  line-height: 44px;
  font-weight: 200;
}
@media (min-width: 48em) {
  body.pageHome .intro-text h2 {
    font-size: 50px;
    line-height: 58px;
  }
}
body.pageHome .intro-text p {
  font-size: 20px;
  line-height: 35px;
  font-weight: 200;
}
@media (min-width: 48em) {
  body.pageHome .intro-text p {
    font-size: 26px;
    line-height: 35px;
  }
}
body.errors .intro {
  height: auto;
  min-height: 100vh;
  flex-direction: column;
  justify-content: center;
  padding: 5rem var(--space) 30vh;
  box-sizing: border-box;
}
body.errors .intro h1 {
  margin-bottom: 2rem;
  max-width: 85vw;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 48em) {
  body.errors .intro h1 {
    max-width: 70vw;
  }
}
body.errors .intro h1 .title--main {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
@media (min-width: 48em) {
  body.errors .intro h1 .title--main {
    font-size: 44px;
  }
}
body.errors .intro h1 .title--localisation {
  margin-bottom: 1.5rem;
}
body.errors .intro p {
  color: var(--color-white);
  text-align: center;
  font-size: 18px;
  line-height: 28px;
  font-weight: 300;
  max-width: 60ch;
  margin: 0 auto 0.75rem;
}
@media (min-width: 48em) {
  body.errors .intro p {
    font-size: 20px;
    line-height: 30px;
  }
}
body.errors .intro p.small {
  opacity: 0.85;
  font-size: 15px;
  line-height: 22px;
}
@media (min-width: 48em) {
  body.errors .intro p.small {
    font-size: 16px;
    line-height: 24px;
  }
}
body.errors .intro a.btn {
  margin-top: 1rem;
}
body.errors .site-footer {
  min-height: 0;
  padding-top: 0;
}
body.errors .site-footer .footer-overlay,
body.errors .site-footer .footer-widgets {
  display: none;
}
body.recordClub main .club-grid, body.recordClub .main .club-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-large);
}
@media (min-width: 48em) {
  body.recordClub main .club-grid, body.recordClub .main .club-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
body.recordClub main .club-grid a.club-logo, body.recordClub .main .club-grid a.club-logo {
  border-bottom: none;
}
body.events .ce-calendarcontent {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.navigation {
  list-style-type: none;
  padding-left: 0;
}
nav.site-nav > ul {
  display: flex;
  align-items: center;
  width: 100%;
}
nav.site-nav > ul > li {
  flex: 0 1 auto;
}
@media (min-width: 48em) {
  nav.site-nav > ul > li:first-child {
    flex: 0 0 1;
    min-width: 200px;
    text-align: left;
    margin-right: auto;
  }
}
nav.site-nav > ul > li:last-child {
  flex: 0 0 1;
  min-width: 200px;
  text-align: right;
  margin-left: auto;
}
nav.site-nav > ul > li:last-child > a {
  padding-right: 0;
}
nav.site-nav > ul > li:last-child > ul {
  transform: translate(0%);
}
nav.site-nav > ul > li {
  /*
        &:not(:first-child):not(:last-child) {
          flex: 1 1 0; // mittlere Lis wachsen gleichmässig
          text-align: center;
        }
  */
}
nav.site-nav > ul > li > a {
  font-size: 18px;
  font-weight: 900;
  padding-left: var(--space);
  text-transform: uppercase;
  padding-bottom: 1.5rem;
}
@media (min-width: 48em) {
  nav.site-nav > ul > li > a {
    font-size: 33px;
  }
}
nav.site-nav > ul > li > a:hover {
  padding-bottom: 1rem;
}
nav.site-nav > ul > li ul {
  position: absolute;
  background: var(--color-green-lightup);
  max-width: 200px;
  z-index: 2;
  box-sizing: border-box;
  width: auto;
  min-width: 16rem;
  padding: 1.2rem;
  margin-top: 0.8rem;
  display: none;
  transform: translate(-30%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
nav.site-nav > ul > li ul:before {
  content: " ";
}
nav.site-nav > ul > li ul li {
  display: block;
}
nav.site-nav > ul > li ul li:last-child a {
  border-bottom: none;
}
nav.site-nav > ul > li ul a {
  color: var(--color-black);
  border-bottom: 1px solid var(--color-primary);
  padding: 0.5rem 0;
  display: block;
  width: 100%;
  font-size: 1.25rem;
  font-weight: 300;
}
nav.site-nav > ul > li:hover ul {
  display: block;
}
nav.site-nav > ul > li:hover > a, nav.site-nav > ul > li.active > a, nav.site-nav > ul > li.current > a {
  color: var(--color-green-lightup);
  opacity: 1;
}
nav.site-nav .overview-mobile {
  display: none;
}
nav.site-nav {
  /* Mobile explicit */
}
@media (max-width: 48em) {
  nav.site-nav .overview-mobile {
    display: block;
  }
  nav.site-nav > ul {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  nav.site-nav {
    /* Font size main */
  }
  nav.site-nav > ul > li > a {
    font-size: 1.55rem;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }
  nav.site-nav > ul > li > a.logo {
    padding-right: 1.3rem;
  }
  nav.site-nav > ul > li > ul {
    position: absolute;
    top: 2.5rem;
    width: 100%;
    max-width: 100%;
    transform: none;
    left: 0;
    right: 0;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 2rem;
  }
  nav.site-nav > ul > li > ul > li.active a, nav.site-nav > ul > li > ul > li.current a {
    font-weight: 500;
  }
  nav.site-nav > ul > li > ul > li a {
    border-bottom: none;
    padding: 0.35rem 0;
  }
  nav.site-nav > ul > li > ul > li.full-col-width {
    grid-column: 1/-1;
    border-bottom: 1px solid var(--color-primary);
    padding-bottom: 0.5rem;
  }
  nav.site-nav > ul > li > ul > li.overview-mobile a {
    width: 100%;
  }
  nav.site-nav > ul > li > ul > li:last-child {
    border-bottom: none;
  }
  nav.site-nav {
    /* spacing correction */
  }
  nav.site-nav > ul > li:nth-child(2) a {
    padding-left: 0.15rem;
    padding-right: 0.35rem;
  }
  nav.site-nav > ul > li:last-child > a {
    padding-right: 0;
  }
  nav.site-nav > ul > li:last-child {
    min-width: 100px;
  }
  nav.site-nav > ul > li:hover ul {
    display: grid;
  }
}
.service-navigation {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}
.service-navigation li a {
  padding-right: 0;
}
.supplementary-links ul {
  text-align: right;
}
.supplementary-links ul li:last-child a {
  padding-right: 0;
}
.social-media ul {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.social-media li {
  display: block;
}
.social-media a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background-color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.social-media a:hover, .social-media a:focus-visible {
  transform: scale(1.05);
  background-color: var(--color-primary);
}
.social-media a:hover::before, .social-media a:focus-visible::before {
  background-color: var(--color-white);
}
.social-media a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.75rem;
  height: 1.75rem;
  transform: translate(-50%, -50%);
  background-color: var(--color-grey-dark);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.social-media a.instagram::before {
  -webkit-mask-image: url("/static/assets/icn/instagram.svg");
          mask-image: url("/static/assets/icn/instagram.svg");
}
.social-media a.linkedin::before {
  -webkit-mask-image: url("/static/assets/icn/linkedin.svg");
          mask-image: url("/static/assets/icn/linkedin.svg");
}
.social-media a.whatsapp::before {
  -webkit-mask-image: url("/static/assets/icn/whatsapp.svg");
          mask-image: url("/static/assets/icn/whatsapp.svg");
}
.social-media a.facebook::before {
  -webkit-mask-image: url("/static/assets/icn/facebook.svg");
          mask-image: url("/static/assets/icn/facebook.svg");
}
.social-media a.snapchat::before {
  -webkit-mask-image: url("/static/assets/icn/snapchat.svg");
          mask-image: url("/static/assets/icn/snapchat.svg");
}
.social-media a.youtube::before {
  -webkit-mask-image: url("/static/assets/icn/youtube.svg");
          mask-image: url("/static/assets/icn/youtube.svg");
}
.social-media a.vimeo::before {
  -webkit-mask-image: url("/static/assets/icn/vimeo.svg");
          mask-image: url("/static/assets/icn/vimeo.svg");
}
.social-media a.flickr::before {
  -webkit-mask-image: url("/static/assets/icn/flickr.svg");
          mask-image: url("/static/assets/icn/flickr.svg");
}
.social-media--bare.social-media--bare ul {
  gap: 0.5rem;
  margin-top: 0.5rem;
}
@media (min-width: 48em) {
  .social-media--bare.social-media--bare ul {
    margin-top: 1rem;
  }
}
.social-media--bare.social-media--bare ul li {
  padding-left: 0;
  margin-bottom: 0;
}
.social-media--bare.social-media--bare ul li::before {
  content: none;
  display: none;
}
.social-media--bare.social-media--bare a {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0;
  background: none;
  text-decoration: none;
  border-bottom: 0;
  transition: transform 0.2s ease;
}
.social-media--bare.social-media--bare a:hover, .social-media--bare.social-media--bare a:focus-visible {
  transform: scale(1.1);
  background: none;
  text-decoration: none;
  border-bottom: 0;
}
.social-media--bare.social-media--bare a:hover::before, .social-media--bare.social-media--bare a:focus-visible::before {
  background-color: var(--color-primary);
}
.social-media--bare.social-media--bare a::before {
  position: static;
  transform: none;
  width: 100%;
  height: 100%;
  background-color: var(--color-grey-dark);
  transition: background-color 0.2s ease;
}
.social-media--inline ul {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.social-media--inline a {
  width: 1em;
  height: 1em;
  border-radius: 0;
  background: none;
}
.social-media--inline a:hover, .social-media--inline a:focus-visible {
  transform: none;
  background: none;
}
.social-media--inline a:hover::before, .social-media--inline a:focus-visible::before {
  background-color: var(--color-primary);
}
.social-media--inline a::before {
  width: 1em;
  height: 1em;
  background-color: var(--color-white);
}
@media (min-width: 64em) {
  .page-layout .breadcrumb-spacer,
  .page-layout .breadcrumb {
    margin-bottom: 2.5rem;
  }
}
.breadcrumb-spacer,
.breadcrumb {
  display: block;
  padding-left: 0;
  padding-right: var(--layout-padding);
  margin: 0 auto;
  max-width: 95vw;
}
@media (min-width: 48em) {
  .breadcrumb-spacer,
  .breadcrumb {
    max-width: 90vw;
  }
}
@media (min-width: 64em) {
  .breadcrumb-spacer,
  .breadcrumb {
    max-width: 85vw;
  }
}
@media (min-width: 96em) {
  .breadcrumb-spacer,
  .breadcrumb {
    max-width: 90em;
  }
}
.breadcrumb-spacer,
.breadcrumb {
  margin: 0.5rem auto 0.5rem auto;
}
@media (min-width: 48em) {
  .breadcrumb-spacer,
  .breadcrumb {
    margin: 1rem auto 1rem auto;
  }
}
.breadcrumb-spacer > ul,
.breadcrumb > ul {
  padding: 0;
}
.breadcrumb-spacer svg,
.breadcrumb svg {
  max-height: 2rem;
  max-width: 2rem;
  display: inline-block;
  margin-right: 0.45rem;
}
.breadcrumb-spacer li, .breadcrumb-spacer a,
.breadcrumb li,
.breadcrumb a {
  color: var(--color-blue-dark);
  opacity: 1;
  border-bottom: none;
}
.breadcrumb-spacer li,
.breadcrumb li {
  display: inline-block;
}
.breadcrumb-spacer li a,
.breadcrumb li a {
  padding-left: 0;
  padding-right: 0.3rem;
  border-bottom: none;
}
.breadcrumb-spacer li a:hover,
.breadcrumb li a:hover {
  opacity: 1;
  border-bottom: none;
}
.breadcrumb-spacer li > a:after,
.breadcrumb li > a:after {
  content: " ";
  width: 0.825rem;
  height: 0.7rem;
  display: inline-block;
  padding-top: 0.3rem;
  background: url("/static/assets/image/arrow-right.svg") center center no-repeat;
  background-size: 75%;
  margin-left: 0.3rem;
}
.breadcrumb-spacer li:last-child,
.breadcrumb li:last-child {
  opacity: 1;
}
.breadcrumb-spacer li:last-child > a,
.breadcrumb li:last-child > a {
  color: var(--color-blue-dark-hover);
}
.breadcrumb-spacer li:last-child > a:hover,
.breadcrumb li:last-child > a:hover {
  color: var(--color-blue-dark);
  text-decoration: none;
}
.breadcrumb-spacer li:last-child > a:after,
.breadcrumb li:last-child > a:after {
  content: "";
  background: none;
}
/* ─────────────────────────────────────────────────────────────────────
   Microsite-Overrides.

   Wird von Microsite-Bundles (`girlstrophy.scss`, später ggf. weitere)
   als LETZTES geladen — überschreibt damit shared Component-Defaults aus
   `scss/navigation`, `scss/section` etc., die für die uvsga-Default-Site
   gelten, aber auf den Microsites unerwünscht sind.

   uvsga (`main.scss`) lädt diese Datei NICHT.
   ───────────────────────────────────────────────────────────────────── */
/* ─── Site-Navigation ───────────────────────────────────────────────────
   Default in `scss/navigation/_main.scss` zwingt das letzte Nav-Item ab
   48em zu 200px Min-Breite, rechtsbündig, mit `margin-left: auto` als
   Spacer. Das passt auf der uvsga-Hauptnavigation, ist auf den schlankeren
   Microsite-Layouts aber zu starr — der Reset entkoppelt das letzte Item
   und lässt es sich frei in den Flex-Container einfügen. */
@media (min-width: 48em) {
  nav.site-nav > ul > li:last-child {
    min-width: 0;
    text-align: inherit;
    margin-left: 0;
  }
}
/* ─── Page-Header Background ────────────────────────────────────────────
   Default in `scss/section/_header.scss` setzt mobile auf `--color-green-dark`
   (uvsga-Teal), Desktop wechselt erst bei 48em auf `--color-primary`. Auf
   Microsites ist die Mobile-Variante mit dem fremden Teal markenfremd —
   gleiche Brand-Background-Farbe wie Desktop durchziehen. */
.page-layout > header,
.page-layout > .header {
  background: var(--color-primary);
}
/* ─── Page-Background — Girlstrophy ─────────────────────────────────────
   Flache Rosa-Fläche nur auf girlstrophy.ch. Anker-Klasse
   `site-girlstrophy` wird von `base.twig` aus `currentSite.handle`
   abgeleitet → UVSGA-Body unangetastet. Wert kommt aus
   `--color-secondary` (Light Pink #FCC2D7), gepflegt in
   `_tokens-girlstrophy.scss`. */
body.site-girlstrophy {
  background-color: var(--color-secondary);
}
/* ─────────────────────────────────────────────────────────────────────
   Girlstrophy — Component-Layer-Overrides.

   Wird von `girlstrophy.scss` als allerletztes geladen, NACH den shared
   Components. `_tokens-girlstrophy.scss` setzt Brand-Farben, dieses File
   setzt sichtbares Component-Verhalten (Typo-Verläufe, Sponsor-Kacheln,
   Timetable etc.).

   Scope: alles unter `body.site-girlstrophy` damit nichts auf andere
   Microsites bleibt.
   ───────────────────────────────────────────────────────────────────── */
body.site-girlstrophy {
  /* ─── Top-Nav Active/Hover/Current ─────────────────────────────────
     Default in `navigation/_main.scss` setzt `color: var(--color-green-lightup)`
     (uvsga-Lime) auf den Link. Auf Pink-Background ist Lime markenfremd —
     stattdessen Violet als Text-Farbe für den Active-State. */
}
body.site-girlstrophy nav.site-nav > ul > li:hover > a,
body.site-girlstrophy nav.site-nav > ul > li.active > a,
body.site-girlstrophy nav.site-nav > ul > li.current > a {
  color: var(--color-meta-main);
}
body.site-girlstrophy {
  /* ─── Dropdown / Untermenue ────────────────────────────────────────
     Default (navigation/_main.scss) gibt dem Dropdown
     `background: var(--color-green-lightup)` (uvsga-Lime) — auf Pink
     markenfremd. Auf das Balken-Pink (color-primary) ziehen; Link-Text
     auf weiss (sonst schwarz auf Pink schlecht lesbar) und der Trenn-
     Border (default color-primary -> unsichtbar) auf dezentes Weiss. */
}
@media (min-width: 48em) {
  body.site-girlstrophy nav.site-nav > ul > li ul {
    background: var(--color-primary);
  }
  body.site-girlstrophy nav.site-nav > ul > li ul a {
    color: var(--color-white);
    border-bottom-color: rgba(255, 255, 255, 0.25);
  }
}
body.site-girlstrophy {
  /* ─── Social-Icons im Meta-Balken praesenter ───────────────────────
     Default (.social-media--inline) rendert 1em (=16px) — sehr dezent.
     Auf girlstrophy etwas groesser, damit sie oben rechts klar sichtbar
     sind. Nur die Inline-Variante im Meta-Balken, uvsga unberuehrt. */
}
body.site-girlstrophy .meta .social-media--inline a,
body.site-girlstrophy .meta .social-media--inline a::before {
  width: 20px;
  height: 20px;
}
body.site-girlstrophy {
  /* ─── Saentis-Silhouette ist uvsga.ch-exklusiv ─────────────────────
     Die Saentis-Overlays sind ein uvsga-Markenelement und gehoeren nicht
     auf die Microsite: Header-Slider (.saentis-overlay) und Footer
     (.footer-overlay, gruene Variante). Auf girlstrophy ausblenden.
     `!important`, weil die Hero-Regel (`.main-hero-banner … .saentis-overlay
     { display:block }` in section/_header-hero.scss) mehr Klassen hat und
     sonst dieses `display:none` schlägt — der Berg blieb auf /event/ sichtbar. */
}
body.site-girlstrophy .saentis-overlay,
body.site-girlstrophy .footer-overlay {
  display: none !important;
}
body.site-girlstrophy {
  /* ─── Lightbox-Backdrop ────────────────────────────────────────────
     Default (_lightbox.scss) nutzt `--color-green-dark-transperent`
     (uvsga-Teal rgba(22,106,106,.88)) → markenfremd auf girlstrophy.
     Dunkles Brand-Violett stattdessen (Bild bleibt im Fokus). */
}
body.site-girlstrophy .lightbox {
  background: rgba(31, 4, 32, 0.94);
}
body.site-girlstrophy {
  /* ─── Secondary-CTA Textfarbe ──────────────────────────────────────
     Globaler `.button-secondary` (fragment/_button.scss) setzt im Ruhe-
     Zustand `color: var(--color-green-dark)` — das ist das uvsga-Teal und
     auf Girlstrophy markenfremd. Hier auf Brand-Pink (color-primary). Der
     Hover (bg primary / weisser Text) kommt unveraendert aus dem Default. */
}
body.site-girlstrophy .btn.button-secondary,
body.site-girlstrophy .button.button-secondary {
  color: var(--color-primary);
  /* Hover: der Default macht den BG zu color-primary -> der primary-Text von
     oben waere dann unsichtbar (gleiche Farbe). Schrift auf die Outline-Farbe
     (border-color = color-secondary) setzen -> lesbar und passend zur Outline. */
}
body.site-girlstrophy .btn.button-secondary:hover,
body.site-girlstrophy .button.button-secondary:hover {
  color: var(--color-secondary);
}
body.site-girlstrophy {
  /* ─── Heading-Verlauf (Pink → Deep-Purple) ─────────────────────────
     Wirkt auf alle h1/h2 im Main-Content. Headings im theme-header
     (white-on-anim) sind ausgenommen, sonst kollidiert der Verlauf mit
     dem hellen Theme-Text. */
}
body.site-girlstrophy main h1, body.site-girlstrophy main .h1,
body.site-girlstrophy main h2, body.site-girlstrophy main .h2 {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-meta-main) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
body.site-girlstrophy {
  /* Theme-Header Headings sollen weiss bleiben — Verlauf hier killen. */
}
body.site-girlstrophy .theme-header h1,
body.site-girlstrophy .theme-header h2 {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--theme-header-text, #fff);
  -webkit-text-fill-color: currentColor;
}
body.site-girlstrophy {
  /* Hero-Bild-Titel ist Gradient-Text (background-clip:text). Bei der knappen
     Hero-line-height (0.875 = 3.5rem/4rem in _header-hero.scss) ragen
     Diakritika (z.B. Ü-Pünktchen) über die Mal-Box hinaus und werden nicht
     gefüllt → oben abgeschnitten. Headroom via padding-top gibt den Pünktchen
     Platz, OHNE die enge Zeilenstapelung mehrzeiliger Titel zu verändern
     (anders als eine grössere line-height). Nur ≥48em — mobil ist die
     line-height ohnehin grosszügig (2.45rem/2rem = 1.225). */
}
@media (min-width: 48em) {
  body.site-girlstrophy .main-hero-banner .text-overlay-container h1 {
    padding-top: 0.5rem;
  }
}
body.site-girlstrophy {
  /* ─── Sponsor / Partner-Kacheln ────────────────────────────────────
     Markup kommt aus contentPartner.twig:
       <ul class="partner-list">
         <li class="partner-list__item">
           <a class="partner-list__link">
             <img class="partner-list__logo"> | <span class="partner-list__name">
           </a>
         </li>
       </ul>
  */
}
body.site-girlstrophy .partner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Mobile: zwei Kacheln pro Reihe, zusammen = Content-Breite. */
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  /* Desktop: feste 250px-Kacheln, links ausgerichtet, wrap natürlich.
     Kein 1fr-Stretch mehr — die Kacheln füllen nicht mehr die ganze
     Content-Breite, sondern stehen kompakt nebeneinander. */
}
@media (min-width: 48em) {
  body.site-girlstrophy .partner-list {
    grid-template-columns: repeat(auto-fill, 250px);
    justify-content: start;
    gap: 1.5rem;
  }
}
body.site-girlstrophy .partner-list__item {
  background: var(--color-white);
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(63, 24, 108, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  aspect-ratio: 5/3;
  display: flex;
  align-items: stretch;
}
body.site-girlstrophy .partner-list__item:hover, body.site-girlstrophy .partner-list__item:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(63, 24, 108, 0.18);
}
body.site-girlstrophy .partner-list__link,
body.site-girlstrophy .partner-list__static {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.5rem 0.75rem; /* schlanker als vorher → Logo bekommt mehr Platz */
  text-decoration: none;
  color: inherit;
}
body.site-girlstrophy .partner-list__logo {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain; /* skaliert auf max. Tile-Innenfläche, behält Proportion */
}
body.site-girlstrophy .partner-list__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  letter-spacing: 0.02em;
  text-align: center;
  /* Wenn ein Name statt Logo gerendert wird, bekommt der Verlauf */
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-meta-main) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
body.site-girlstrophy {
  /* ─── Timetable ────────────────────────────────────────────────────
     Kompakter, lesbarer Time-Title-Layout. Markup im pageHomeGirlstrophy
     Template.
     <ol class="timetable">
       <li class="timetable__row">
         <time class="timetable__time">09:00</time>
         <div class="timetable__body">
           <h3 class="timetable__title">…</h3>
           <p class="timetable__meta">…</p>
         </div>
       </li>
     </ol>
  */
}
body.site-girlstrophy .timetable {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  border-top: 1px solid var(--color-grey-soft);
}
body.site-girlstrophy .timetable__row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-grey-soft);
  align-items: baseline;
}
@media (min-width: 48em) {
  body.site-girlstrophy .timetable__row {
    grid-template-columns: 6rem 1fr;
    gap: 1.5rem;
    padding: 1.25rem 0;
  }
}
body.site-girlstrophy .timetable__time {
  font-family: var(--font-title);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.02em;
  /* Verlauf nur auf der Zeit, nicht auf dem Titel daneben — sonst zu busy */
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-meta-main) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
body.site-girlstrophy .timetable__body {
  min-width: 0; /* fix für grid-overflow bei langen Titeln */
}
body.site-girlstrophy .timetable__title {
  margin: 0 0 0.25rem;
  font-family: var(--font-title);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  color: var(--color-text);
  /* eigene Headline-Klasse, kein Verlauf hier */
  background: none;
  -webkit-text-fill-color: currentColor;
}
body.site-girlstrophy .timetable__meta {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-grey-dark);
  line-height: var(--lh-normal);
}
body.site-girlstrophy {
  /* ─── Theme-Header Hero-Media-Slot ─────────────────────────────────
     Das headerMedia wird via `media`-Slot innerhalb von .theme-header
     gerendert. Stack-Order im theme-header (alle im selben Isolation-
     Stacking-Context):
       z 0 → __shapes (Particle-Animation)
       z 1 → __media  (Bild/Video, 80% Zone-Höhe, max-width 100%)
       z 2 → __content (Title/Lead — immer oberster Layer) */
}
body.site-girlstrophy .theme-header__shapes {
  z-index: 0;
}
body.site-girlstrophy .theme-header__media {
  position: absolute;
  /* Top 10%, bottom 0 → ~90% Höhe, unten am Header-Rand angeschlagen. */
  inset: 10% 0 0 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: flex-end; /* Bild sitzt unten in der Box, nicht zentriert */
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  padding: 0 var(--space);
}
body.site-girlstrophy .theme-header__content {
  z-index: 2; /* überschreibt den Default z-index: 1 aus _theme-header.scss */
}
body.site-girlstrophy .gs-hero-media__asset {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center bottom;
     object-position: center bottom; /* Bild bleibt am Boden seiner Box stehen */
  border-radius: 1.25rem;
  /* Kein box-shadow — User möchte clean ohne Schatten. */
}
body.site-girlstrophy {
  /* ─── Intro/Theme-Header — Mobile-Stack ────────────────────────────
     Auf Mobile soll der Text (Eyebrow, Titel, CTAs) NICHT mittig über dem
     Inhaltsbild liegen, sondern oben direkt auf dem animierten Verlauf
     sitzen — das Bild folgt darunter. Umsetzung: theme-header wird zum
     Flex-Column-reverse (im DOM kommt __media vor __content, reverse zieht
     den Content nach oben), die __media-Box verlässt das absolute Overlay
     und fliesst unter den Text. Ab 48em greift wieder das Overlay-Layout. */
}
@media (max-width: 47.99em) {
  body.site-girlstrophy .theme-header {
    display: flex;
    flex-direction: column-reverse;
    min-height: 0; /* keine erzwungene 70vh-Bühne */
  }
  body.site-girlstrophy .theme-header__content {
    min-height: 0;
    justify-content: flex-start;
    padding-top: 4.5rem; /* Luft unter der fixen Logo/Burger-Leiste */
    padding-bottom: var(--space, 1.5rem);
  }
  body.site-girlstrophy .theme-header__media {
    position: relative;
    inset: auto;
    align-items: center;
    padding: 0 var(--space, 1.5rem) var(--space, 1.5rem);
  }
  body.site-girlstrophy .gs-hero-media__asset {
    width: 100%;
    height: auto;
    max-height: 55vh;
    -o-object-position: center;
       object-position: center;
  }
  body.site-girlstrophy {
    /* Scroll-Hint sitzt sonst am 70vh-Boden — hier ans untere Bildende. */
  }
  body.site-girlstrophy .theme-header__scroll-hint {
    bottom: 0.75rem;
  }
}
body.site-girlstrophy {
  /* ─── Generic content section spacing ──────────────────────────────
     pageHomeGirlstrophy bekommt mehrere stacked Sections — hier Abstand
     setzen. */
}
body.site-girlstrophy .gs-section {
  padding: 3rem 0;
}
@media (min-width: 48em) {
  body.site-girlstrophy .gs-section {
    padding: 4.5rem 0;
  }
}
body.site-girlstrophy .gs-section + .gs-section {
  border-top: 1px solid var(--color-grey-soft);
}
body.site-girlstrophy .gs-section__lead {
  max-width: 60ch;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--color-grey-dark);
  margin: 0 0 2rem;
}
body.site-girlstrophy {
  /* ─── Text+Bild (textWithMedia) — Brand-Polish ─────────────────────
     Das Layout selbst (1 Bild gross, 2 Bilder gestapelt, 3+ als Grid;
     Positionen links/rechts/oben/unten) kommt vollständig aus dem shared
     `component/ce/_textwithmedia.scss` und gilt site-übergreifend. Hier nur
     Girlstrophy-Feinschliff. Echte Klassen: Wrapper `.ce-textwithmedia`,
     Bild-Container `.images`, Text `.content` (NICHT `.textWithMedia`/`.media`
     — das war ein toter Selektor und wurde entfernt). */
}
body.site-girlstrophy .ce-textwithmedia .images img {
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(63, 24, 108, 0.1);
}
body.site-girlstrophy {
  /* mediaStyle "noShadow": clean ohne Schatten UND ohne Rundung.
     Hebt den Girlstrophy-Default (Radius + Schatten oben) gezielt auf;
     hoehere Spezifitaet (.media-style-noshadow) gewinnt. Klassen-Wert kommt
     klein aus dem Template (media-style-noshadow). */
}
body.site-girlstrophy .ce-textwithmedia .images.media-style-noshadow img {
  border-radius: 0;
  box-shadow: none;
}
body.site-girlstrophy {
  /* Titel/Text linksbündig — NUR bei Bild-Layouts (above/below/left/right).
     Im contentboxed-Kontext zieht der ce-boxed-Default `.ce-header`/`.text.rte`
     via wMaxContent (margin:0 auto) horizontal in die Mitte. Bei Bild oben/unten
     (volle Breite) zentriert `margin:auto` den Titel sichtbar → hier links
     ziehen. WICHTIG: text-only-Blöcke (`.no-images`) NICHT anfassen — dort ist
     die wMaxContent-Zentrierung der gewollte Seiten-Einzug (sonst klebt der
     Inhalt am linken Rand, vgl. /event/2027-vision/). */
}
body.site-girlstrophy .ce-textwithmedia > .image-pos-left .ce-header,
body.site-girlstrophy .ce-textwithmedia > .image-pos-left .text.rte,
body.site-girlstrophy .ce-textwithmedia > .image-pos-right .ce-header,
body.site-girlstrophy .ce-textwithmedia > .image-pos-right .text.rte,
body.site-girlstrophy .ce-textwithmedia > .image-pos-above .ce-header,
body.site-girlstrophy .ce-textwithmedia > .image-pos-above .text.rte,
body.site-girlstrophy .ce-textwithmedia > .image-pos-below .ce-header,
body.site-girlstrophy .ce-textwithmedia > .image-pos-below .text.rte,
body.site-girlstrophy .ce-textwithmedia > .image-pos-leftintext .ce-header,
body.site-girlstrophy .ce-textwithmedia > .image-pos-leftintext .text.rte,
body.site-girlstrophy .ce-textwithmedia > .image-pos-rightintext .ce-header,
body.site-girlstrophy .ce-textwithmedia > .image-pos-rightintext .text.rte {
  margin-left: 0;
}
body.site-girlstrophy {
  /* ─── Scroll: Meta-Balken kippt nach links (schräge Unterkante) ──────
     Nur Desktop (≥64em — darunter ist der Meta-Balken im Burger-Modus
     ausgeblendet). Beim Scrollen setzt headerObserver.js `body.scrolled`;
     rein CSS, kein zusätzliches JS. Die Unterkante fällt nach links ab
     (rechts angehoben, links volle Tiefe). Der Schnitt lebt komplett im
     zusätzlichen Bottom-Padding → er nimmt nur Leerraum weg, nie die Nav.
     Grund- und Scroll-Zustand haben beide einen 4-Punkt-clip-path, darum
     ist der Übergang animierbar. Slope per Custom-Prop leicht justierbar. */
}
@media (min-width: 64em) {
  body.site-girlstrophy header .meta,
  body.site-girlstrophy .header .meta {
    --gs-meta-slope: 26px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    /* drop-shadow statt box-shadow: folgt der clip-path-Silhouette (die
       schräge Unterkante), box-shadow würde vom clip-path weggeschnitten.
       Grund-Zustand transparent → animiert weich zum Scroll-Schatten. */
    filter: drop-shadow(0 0 0 rgba(30, 10, 60, 0));
    transition: clip-path 0.35s ease, padding-bottom 0.35s ease, filter 0.35s ease;
  }
  body.site-girlstrophy.scrolled header .meta, body.site-girlstrophy.scrolled .header .meta {
    padding-bottom: calc(var(--space-small) + var(--gs-meta-slope));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gs-meta-slope)), 0 100%);
    /* Dunkler + kräftiger als der erste Versuch (0.22 Deep-Purple ging
       gegen den vibranten Hero-Verlauf unter). */
    filter: drop-shadow(0 6px 14px rgba(30, 10, 60, 0.4));
  }
  body.site-girlstrophy {
    /* Logo im Scroll-Zustand sicher in der Meta-Bar verankern.
       Die geteilte Scroll-Regel (_header.scss) ist auf das uvsga-Background-
       Logo (78×50, fixe Box) ausgelegt; girlstrophy rendert stattdessen ein
       <img>-Wortmark (.logo--custom, background:none) — in der 78px-Box +
       top:-9px verschwand/verrutschte es. Hier explizit: mittig in der jetzt
       höheren Diagonale-Bar, Breite nach Inhalt (Wortmark nicht quetschen),
       z-index sicher über Balken (9) und dessen drop-shadow. `left` bleibt
       aus der geteilten Regel (folgt den wMaxContent-Breakpoints). */
  }
  body.site-girlstrophy.scrolled .page-layout > header .logo, body.site-girlstrophy.scrolled .page-layout > .header .logo {
    top: 6px;
    width: auto;
    height: 40px;
    max-height: 40px;
    z-index: 11;
  }
}
body.site-girlstrophy {
  /* Reduced-Motion: Endzustand ja, Animation nein. */
}
@media (prefers-reduced-motion: reduce) {
  body.site-girlstrophy header .meta,
  body.site-girlstrophy .header .meta {
    transition: none;
  }
}
body.site-girlstrophy {
  /* Logo am linken Content-Rand ausrichten (Desktop, ungescrollt).
     Die geteilte Nav-Regel gibt JEDEM Link `padding-left: var(--space)` (1rem);
     beim Logo schiebt das die Wortmark 16px rechts über den wMaxContent-Rand,
     an dem Titel/Breadcrumb (und das gescrollte Mini-Logo via left:7.5vw)
     sitzen. Padding fürs Logo nullen → bündig mit dem Content. */
}
@media (min-width: 48em) {
  body.site-girlstrophy nav.site-nav > ul > li > a.logo {
    padding-left: 0;
  }
}
body.site-girlstrophy {
  /* ─── Mobile-Header-Logo ────────────────────────────────────────────
     Auf <48em zeigt der geteilte Header sonst nur ein 20px-Home-Icon
     (_header.scss). Da girlstrophy das echte Logo als <img class="logo__img">
     rendert (.logo--custom, Custom-Layout aktiv), vergrössern wir die
     Logo-Box auf Menü-Grösse (2.5rem) — gleiche Höhe wie im Burger-Overlay.
     Nur girlstrophy (Datei ist body.site-girlstrophy-scoped) → uvsga bleibt. */
}
@media (max-width: 47.99em) {
  body.site-girlstrophy {
    /* Brand-Farbverlauf statt grün-dunkel — nur Mobile, nur girlstrophy.
       Diagonal: Deep Purple (oben-links) → Pink → Magenta (unten-rechts). */
  }
  body.site-girlstrophy .page-layout > header,
  body.site-girlstrophy .page-layout > .header {
    background: linear-gradient(115deg, var(--color-meta-main) 0%, var(--color-primary) 60%, var(--color-rose) 100%);
  }
  body.site-girlstrophy .page-layout > header .logo.logo--custom,
  body.site-girlstrophy .page-layout > .header .logo.logo--custom {
    width: auto;
    height: 2.5rem;
    max-height: 2.5rem;
  }
  body.site-girlstrophy .page-layout > header .logo.logo--custom .logo__img,
  body.site-girlstrophy .page-layout > .header .logo.logo--custom .logo__img {
    height: 2.5rem;
    max-height: 2.5rem;
  }
}
body.site-girlstrophy {
  /* ─── Burger-Menü (Microsite, <64em) ───────────────────────────────
     Markup: navigation_burger.twig (nur auf girlstrophy eingebunden).
     Aktiv auf Mobile + Tablet (<64em); ab 64em greift die Horizontal-Nav.
     Hintergrund = animierter Marken-Gradient aus den Brand-Tokens
     (--color-primary/-meta-main/-rose/-secondary), Logik nach dem
     zauberkita-Muster (background-size + position-Keyframe). */
  /* Toggle-Button — default versteckt; erst <64em sichtbar (Media unten). */
}
body.site-girlstrophy .gs-burger-toggle {
  display: none;
  /* Vertikal mittig im Header verankert (Header ist position:relative/sticky)
     → unabhängig von der Header-Höhe immer zentriert. */
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  z-index: 60;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  /* Der designte Floorball (burger.svg) bringt eigenen Ball + Schatten mit →
     Button selbst transparent, nur Hit-Area. */
  background: transparent;
  cursor: pointer;
}
body.site-girlstrophy .gs-burger-toggle__icon {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
body.site-girlstrophy .gs-burger-toggle {
  /* Designter Floorball (geschlossener Zustand) + sanfter Schlagschatten,
     damit der Ball vom Header-Verlauf abhebt. */
}
body.site-girlstrophy .gs-burger-toggle__ball {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.22));
  transition: opacity 0.2s ease, transform 0.3s ease;
}
body.site-girlstrophy .gs-burger-toggle {
  /* Schliessen-✕ als pinker Kreis (nur im Offen-Zustand sichtbar).
     Inset = gleiche Grösse wie der sichtbare Ball (SVG-Kreis ≈ 83.8% der
     Box), damit die Kreisfläche beim Öffnen NICHT grösser wird als der Ball. */
}
body.site-girlstrophy .gs-burger-toggle__x {
  position: absolute;
  inset: 0.25rem;
  border-radius: 50%;
  /* Gleicher Verlauf wie der Ball-Körper (Headline-Verlauf). */
  background: linear-gradient(90deg, var(--color-primary), var(--color-meta-main));
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: rotate(0deg) scale(0.8);
  transition: opacity 0.2s ease, transform 0.3s ease;
}
body.site-girlstrophy .gs-burger-toggle__x span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--color-white);
  transform: translate(-50%, -50%);
}
body.site-girlstrophy .gs-burger-toggle__x span:last-child {
  transform: translate(-50%, -50%) rotate(90deg);
}
body.site-girlstrophy {
  /* Fullscreen-Overlay — geschlossener Default. */
}
body.site-girlstrophy .gs-burger {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space, 1.5rem);
  background: linear-gradient(135deg, var(--color-primary), var(--color-meta-main), var(--color-rose), var(--color-secondary));
  background-size: 800% 800%;
  /* Verlauf-Animation NICHT hier (läuft sonst auch unsichtbar weiter und
     steht beim Öffnen an einer zufälligen Position → sichtbarer „Sprung").
     Sie wird erst im .gs-burger-open-Zustand gestartet (mittige Startpos). */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.75rem);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
body.site-girlstrophy .gs-burger__inner {
  margin: auto;
  width: 100%;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 4.5rem 0 2.5rem;
  text-align: center;
}
body.site-girlstrophy {
  /* Logo oben links im Overlay (themeSettings.logo). */
}
body.site-girlstrophy .gs-burger__logo {
  position: absolute;
  top: 1.1rem;
  left: 1.25rem;
  z-index: 1;
  display: inline-flex;
}
body.site-girlstrophy .gs-burger__logo img {
  display: block;
  height: 2.5rem;
  width: auto;
}
body.site-girlstrophy {
  /* 1. Hauptpunkte — gross & fett (nur Top-Level). */
}
body.site-girlstrophy .gs-burger__main {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
body.site-girlstrophy .gs-burger__main > li > a {
  display: inline-block;
  padding: 0.35rem 0;
  color: var(--color-white);
  font-weight: 900;
  font-size: 1.9rem;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.15s ease;
}
body.site-girlstrophy .gs-burger__main > li.is-active > a,
body.site-girlstrophy .gs-burger__main > li > a:hover,
body.site-girlstrophy .gs-burger__main > li > a:focus-visible {
  color: var(--color-meta-main);
}
body.site-girlstrophy {
  /* Untermenü — IMMER aufgeklappt (offen) auf Mobile/Tablet. Kleiner und
     feiner als die Hauptpunkte, leicht eingerückt. */
}
body.site-girlstrophy .gs-burger__sub {
  list-style: none;
  margin: 0.25rem 0 0.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
body.site-girlstrophy .gs-burger__sub li > a {
  display: inline-block;
  padding: 0.2rem 0;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}
body.site-girlstrophy .gs-burger__sub li > a:hover, body.site-girlstrophy .gs-burger__sub li > a:focus-visible {
  color: var(--color-meta-main);
}
body.site-girlstrophy .gs-burger__sub li.is-active > a {
  color: var(--color-meta-main);
}
body.site-girlstrophy {
  /* 2. Meta / Themen — kleiner, feiner, abgesetzt. */
}
body.site-girlstrophy .gs-burger__meta {
  list-style: none;
  margin: 0;
  padding: 1.25rem 0 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.25rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}
body.site-girlstrophy .gs-burger__meta li > a {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}
body.site-girlstrophy .gs-burger__meta li > a:hover, body.site-girlstrophy .gs-burger__meta li > a:focus-visible {
  color: var(--color-white);
  text-decoration: underline;
}
body.site-girlstrophy {
  /* 3. Social-Icons — zentriert. */
}
body.site-girlstrophy .gs-burger__social {
  margin-top: 0.25rem;
}
body.site-girlstrophy .gs-burger__social ul {
  justify-content: center;
}
body.site-girlstrophy {
  /* Offen-Zustand (Body-Klasse via burgerMenu.js). */
}
body.site-girlstrophy.gs-burger-open {
  /* Scroll-Lock solange das Overlay offen ist. */
  overflow: hidden;
}
body.site-girlstrophy.gs-burger-open .gs-burger {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  /* Erst beim Öffnen starten → immer gleicher, mittiger Startpunkt,
     kein zufälliger Positions-Sprung. */
  animation: gsBurgerBg 60s ease infinite;
}
body.site-girlstrophy.gs-burger-open {
  /* Floorball „rollt" weg → Schliessen-✕ blendet ein. */
}
body.site-girlstrophy.gs-burger-open .gs-burger-toggle__ball {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}
body.site-girlstrophy.gs-burger-open .gs-burger-toggle__x {
  opacity: 1;
  /* +-Kreuz um 45° gedreht → echtes ×. */
  transform: rotate(45deg) scale(1);
}
body.site-girlstrophy {
  /* Schaltzone: <64em → Burger statt Horizontal-Nav. */
}
@media (max-width: 63.99em) {
  body.site-girlstrophy {
    /* Toggle sichtbar. */
  }
  body.site-girlstrophy .gs-burger-toggle {
    display: inline-flex;
  }
  body.site-girlstrophy {
    /* Auf der Startseite den Button beim Laden von oben reinbouncen.
       Endet auf translateY(-50%) = Ruhelage (vertikal mittig). `backwards`
       hält ihn während des Delays oben/unsichtbar. */
  }
  body.site-girlstrophy.pageHomeGirlstrophy .gs-burger-toggle {
    animation: gsBurgerBounceIn 1.1s ease-out 0.35s backwards;
  }
  body.site-girlstrophy {
    /* Horizontal-Nav-Items ausblenden, Logo (first-child) behalten. */
  }
  body.site-girlstrophy nav.site-nav > ul > li:not(:first-child) {
    display: none;
  }
  body.site-girlstrophy {
    /* Meta-Balken (Service + Social) wandert in den Burger → hier weg,
       sonst Dopplung + Kollision mit dem fixen Toggle (Meta zeigt 48–64em). */
  }
  body.site-girlstrophy header .meta,
  body.site-girlstrophy .header .meta {
    display: none;
  }
}
/* Gradient-Wander-Animation (zauberkita-Muster). */
@keyframes gsBurgerBg {
  0% {
    background-position: 50% 50%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 50% 50%;
  }
}
/* Button-Entrance (Startseite): von oben reinfallen + 2× ausschwingen.
   translateY ist relativ zur Button-Höhe; Ruhelage = -50% (vertikal mittig).
   -340% = weit über dem Header; weniger negativ = tiefer (unter Mitte). */
@keyframes gsBurgerBounceIn {
  /* Fall: ease-in = beschleunigt (zackig, harter Aufprall), auf 32% gekürzt. */
  0% {
    transform: translateY(-340%);
    opacity: 0;
    animation-timing-function: ease-in;
  }
  32% {
    transform: translateY(-42%);
    opacity: 1;
    animation-timing-function: ease-out;
  } /* harter Aufprall, unter Mitte */
  48% {
    transform: translateY(-63%);
    animation-timing-function: ease-in;
  } /* grosser Rückprall über die Mitte */
  62% {
    transform: translateY(-44%);
    animation-timing-function: ease-out;
  } /* runter */
  74% {
    transform: translateY(-56%);
    animation-timing-function: ease-in;
  } /* zweiter Bounce hoch */
  84% {
    transform: translateY(-47%);
    animation-timing-function: ease-out;
  } /* runter */
  93% {
    transform: translateY(-52%);
    animation-timing-function: ease-in;
  } /* dritter, kleiner Bounce */
  100% {
    transform: translateY(-50%);
  }
}
/* Reduced-Motion: Verlauf stehen lassen + kein Bounce (Button direkt da). */
@media (prefers-reduced-motion: reduce) {
  body.site-girlstrophy .gs-burger {
    animation: none;
  }
  body.site-girlstrophy .gs-burger-toggle {
    animation: none;
  }
}

/*# sourceMappingURL=girlstrophy.min.css.map */