/*
  Minimal structural CSS only.
  Webflow should own layout, spacing, typography, colors, animation, and breakpoints.
*/

/*
  Ein Hover-Zoom fuer alle Bilder der Site. Die Werte stammen aus dem Zoom der
  Lightbox-Bilder (Biografie, Editionen, Atelier) - der war das Vorbild, alle
  anderen Bildhover ziehen jetzt nach: Werk-Uebersicht, Werk-Detail, Canvas
  (Kontexte/Werke) und die Werkkarte im Modal. Das grosse Modal-Bild bleibt
  bewusst ohne Zoom - dort animiert nur das Lightbox-Icon.

  0.62s ist nach Augenmass gesetzt, knapp unter Stufe 5 der Skala (0.685s) - hier zaehlt
  das Gefuehl, nicht die Herleitung. Die Kurve ist bewusst nicht expo.out wie beim
  Zeilen-Reveal: die steckt fast die ganze Bewegung in das erste Drittel, dann wuerde die
  laengere Dauer gar nicht auffallen. easeOutCubic verteilt sie gleichmaessiger, das Bild
  gleitet sichtbar.

  Wer einzelne Bilder anders haben will, ueberschreibt die Variablen am Element
  oder am Container - nicht die Regeln selbst, sonst laufen die Seiten wieder
  auseinander.
*/
:root {
  --fw-image-zoom: 1.035;
  --fw-image-zoom-duration: 0.62s;
  --fw-image-zoom-ease: cubic-bezier(0.33, 1, 0.68, 1);

  --eo: cubic-bezier(.05, .85, .05, 1);
  --fw-button-fill-duration: 1.3s;
  --fw-button-arrow-duration: 1.4s;
  --fw-button-reduced-duration: 0.01s;
}

/* Aus dem Site-Head-Custom-Code hierher gezogen (04.09.2026). Diese Datei
   laedt nach der Webflow-CSS, gewinnt bei gleicher Spezifitaet und ersetzt den
   Inline-Block damit eins zu eins.

   Animierte Underline: der Strich ist ein eigenes ::after statt
   text-decoration, weil sich nur so von links nach rechts aufziehen laesst.
   clip-path statt scaleX, damit die 1px-Linie beim Aufziehen nicht unscharf
   wird. text-decoration: none gilt hier bewusst mit einer Klasse Spezifitaet —
   der Designer setzt auf .footer_link.u-txt-footer-caps.u-animate-underline
   .w--current eine echte Unterstreichung fuer die aktive Seite, und die soll
   gewinnen. */
.u-animate-underline {
  position: relative;
  display: inline-block;
  width: fit-content;
  text-decoration: none;
}

.footer.u-section {
  padding-block: clamp(1.5rem, 2.5vw, 2.5rem);
}

.u-animate-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 1.5px;
  background-color: currentColor;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 300ms cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
}

/* Gemeinsamer Unterstrich fuer den Sprachumschalter: dieselbe Linie gleitet
   vom aktiven Eintrag zur gerade gehooverten bzw. fokussierten Sprache. */
.site-menu__languages {
  position: relative;
}

.site-menu__language {
  text-decoration: none !important;
}

.site-menu__language::after {
  display: none;
}

.site-menu__language-indicator {
  position: absolute;
  left: 0;
  height: 1.5px;
  background-color: currentColor;
  pointer-events: none;
  opacity: 0;
  transition:
    transform 300ms cubic-bezier(0.76, 0, 0.24, 1),
    width 300ms cubic-bezier(0.76, 0, 0.24, 1),
    opacity 120ms ease;
}

.site-menu__languages.has-language-indicator .site-menu__language-indicator {
  opacity: 1;
}

.u-animate-underline:hover::after,
.u-animate-underline:focus-visible::after {
  clip-path: inset(0 0 0 0);
}

p:last-of-type {
  margin-bottom: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
}

h3 {
  font-weight: 500;
}

html.lenis,
html.lenis body {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}

html.is-modal-open,
html.is-lightbox-open,
body.is-modal-open,
body.is-lightbox-open {
  overscroll-behavior: contain;
}

/* Page transition: a short fade to and from white. */
:root {
  --eo: cubic-bezier(.05, .85, .05, 1);
  --pt-ease: cubic-bezier(.4, 0, .2, 1);
  --pt-cover-duration: .15s;
  --pt-uncover-duration: .15s;
}

[data-page-transition-overlay],
.page-transition-overlay,
.curtain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  z-index: 2000;
  background: #fff;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
  transition: opacity var(--pt-cover-duration) var(--pt-ease);
}

.curtain.is-covering,
.curtain.is-covered,
html.is-page-transition-pending .curtain {
  opacity: 1;
}

.curtain.is-uncovering {
  opacity: 0 !important;
  transition-duration: var(--pt-uncover-duration);
}

.curtain.is-resetting {
  transition: none !important;
  opacity: 0 !important;
}

.page-transition-overlay__title { display: none !important; }

/* The existing animated hero grain should not compete with the curtain. */
html.is-page-transition-pending #fw-hero-grained::before,
html.is-page-transition-covering #fw-hero-grained::before {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .curtain {
    transition-duration: .01s !important;
  }
}

/* Covers the first paint until site-body.js creates the real overlay. */
html.is-page-transition-boot::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2001;
  background: #fff;
  pointer-events: none;
}

.top_bar_center [data-logo-variant] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  pointer-events: none;
  display: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .top_bar_center .nav_logo_link:hover,
  .top_bar_center .nav_logo_link:hover *,
  .top_bar_center .nav_logo_image_link:hover,
  .top_bar_center .nav_logo_image_link:hover * {
    cursor: none;
  }
}

[data-site-menu] {
  /* Breite der Site: 21rem. Stand bis 04.09.2026 als eigener <style>-Block im
     Site-Head, weil der Designer-Wert auf .site-menu bei gleicher Spezifitaet
     gegen diese Datei verliert — der Wert gehoert also hierher, nicht in den
     Designer. Der frueher hier stehende Default (26.5625rem) war ohnehin tot. */
  --site-menu-width: min(21rem, calc(100vw - 2rem));
  --site-menu-toggle-height: 3.125rem;
  --site-menu-offset: 1.5rem;
  --site-menu-open-height: calc(100dvh - (2 * var(--site-menu-offset)));
  --site-menu-arrow-icon: url("data:image/svg+xml,%3Csvg width='20' height='12' viewBox='0 0 20 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.9997 4.7998H3.33301V7.1998H14.9997V4.7998Z' fill='%2306021A'/%3E%3Cpath d='M17.4986 5.4034L11.8557 0L10.0947 1.69033L14.4297 5.83736V6.16264L10.0947 10.3097L11.8557 12L17.4986 6.5966C17.4989 6.36364 17.4989 5.63636 17.4986 5.4034Z' fill='%2306021A'/%3E%3C/svg%3E");
  position: fixed;
  right: var(--site-menu-offset);
  bottom: var(--site-menu-offset);
  /* Das Menue liegt ueber dem Seiteninhalt, aber unter Modal und Lightbox. Die 900
     von frueher waren zu niedrig: .top_bar_section steht auf 999 und hat
     das offene Panel oben angeschnitten (auf kurzen Fenstern die ersten
     100px). Der Designer
     meint auf .site-menu ohnehin 1001 — gleiche Spezifitaet wie dieser
     Selektor, aber diese Datei laedt spaeter und gewinnt, der Wert muss
     also hier stehen. Modal (1850), Lightbox (1860) und die beiden Vollbild-Decken des
     Seitenwechsels: Work-Flip-Ghost (1900) und Transition-Overlay (2000). */
  z-index: 1800;
  width: var(--site-menu-width);
}

[data-site-menu-panel] {
  width: 100%;
  height: var(--site-menu-toggle-height, 3.125rem);
  max-height: var(--site-menu-open-height, calc(100dvh - 3rem));
  overflow: hidden;
  will-change: height;
}

[data-site-menu].is-ready [data-site-menu-panel] {
  visibility: visible;
}

[data-site-menu].is-open [data-site-menu-panel] {
  height: auto;
  overflow-y: auto;
}

[data-site-menu-toggle] {
  text-align: left;
  cursor: pointer;
}

/* Textwechsel wie eine vertikale Laufschrift: die Beschriftung ist die Maske,
   die alte und neue Textebene fahren in entgegengesetzte Richtungen. */
[data-site-menu-toggle-label] {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  overflow: hidden;
  vertical-align: bottom;
  text-align: left;
  white-space: nowrap;
  transition: color 160ms ease;
}

[data-site-menu-toggle-label-text] {
  display: inline-block;
  white-space: nowrap;
}

[data-site-menu-toggle-label-ghost] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  white-space: nowrap;
  pointer-events: none;
}

[data-site-menu].is-open [data-site-menu-toggle-label] {
  color: var(--FW_Dark_Purple_50, var(--fw_dark_purple_50, #82808c));
}

/* Toggle-Icon — Zustaende und Uebergaenge. Struktur und Grundstyling liegen in
   Webflow, hier stehen nur die States, die sich dort nicht als Selektor
   ausdruecken lassen. Lag bis 04.09.2026 im Site-Head-Custom-Code und ist
   hierher gezogen, damit die Menue-Styles an einer Stelle liegen — diese Datei
   laedt nach der Webflow-CSS und gewinnt bei gleicher Spezifitaet.

   Alle Werte hier liegen bewusst auf ganzen Pixeln (Icon = 21x20px, Balken =
   2px hoch). Krumme Werte fallen zwischen zwei Pixelreihen und rendern
   sichtbar blasser als ihre Nachbarn. */
.site-menu__toggle {
  transition: color 200ms ease;
}

.site-menu__toggle-icon > span {
  transition:
    transform 300ms cubic-bezier(0.76, 0, 0.24, 1),
    width 240ms cubic-bezier(0.76, 0, 0.24, 1),
    left 240ms cubic-bezier(0.76, 0, 0.24, 1);
}

/* Offen: alle drei Balken laufen auf die Mittellinie zusammen, Farbe gedaempft.
   0.5625rem = 9px = Abstand zur Mittellinie bei 2px hohen Balken auf 20px Icon.
   Muss zur top-Position von --mid (45%) passen, sonst treffen sie sich daneben. */
[data-site-menu].is-open [data-site-menu-toggle] {
  color: var(--fw_dark_purple_50);
}

[data-site-menu].is-open .site-menu__toggle-bar--top {
  transform: translateY(0.5625rem);
}

[data-site-menu].is-open .site-menu__toggle-bar--bottom {
  transform: translateY(-0.5625rem);
}

[data-site-menu-link] {
  position: relative;
}

[data-site-menu-item] {
  position: relative;
}

/* Hover-Flaeche der Menuepunkte bis in die Zwischenraeume ziehen.
   Webflow setzt den Zeilenabstand als margin — auf margin gibt es kein
   :hover, deshalb war zwischen zwei Punkten ein toter Streifen. Gleicher
   Wert als padding: die Zeilenhoehen und der optische Abstand bleiben
   exakt gleich (die Sektionen sind Flex-Spalten, Margins kollabieren dort
   ohnehin nicht), aber die ganze Zeile inklusive Abstand reagiert.
   Zwei Klassen im Selektor, damit die Regel unabhaengig von der
   Ladereihenfolge gegen die Webflow-Klasse gewinnt. */
[data-site-menu-item].site-menu__link--large {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

[data-site-menu-item].site-menu__link--small {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Gleicher Zeilenabstand und dieselbe Hover-Flaeche wie bei den kleinen Links.
   Den groesseren Aussenabstand gibt es nur, wenn der ganze Inhalt ins Panel passt. */
.site-menu__footer-links {
  row-gap: 0;
  margin-top: 1.375rem;
  margin-bottom: 0.875rem;
}

[data-site-menu].has-footer-room .site-menu__footer-links {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

[data-site-menu-item].site-menu__footer-link {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Zweiter Teil derselben Sache: der Streifen zwischen einer Trennlinie und
   dem ersten bzw. letzten Punkt einer Sektion (0.75rem Margin der
   Trennlinie) sowie der Streifen unter einer Ueberschrift ("Person",
   "Werk" — die sind keine Links) waren weiter tot. Bei News, Atelier und
   Editionen ist das die Haelfte der sichtbaren Zeile.

   Hier bewusst ein Pseudo-Element statt Padding: die Flaeche waechst in
   fremden Abstand hinein, der zu einem anderen Element gehoert. Als
   Padding muesste ich diesen Abstand woanders wieder abziehen und der
   Pfeil (top: 50%) saesse nicht mehr auf der Textmitte. Das ::before
   liegt transparent ueber dem Link, ist selbst kein Event-Ziel — Hover und
   Klick landen auf dem Link. Ober- und Unterkante stossen genau an der
   Trennlinie aneinander, es ueberlappt also nichts. */
[data-site-menu-item][data-site-menu-link]::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.site-menu__section > [data-site-menu-item][data-site-menu-link]:first-child::before {
  top: -0.75rem;
}

.site-menu__section > [data-site-menu-item][data-site-menu-link]:last-child::before {
  bottom: -0.75rem;
}

/* Erster Link direkt unter einer Ueberschrift: deren 0.5rem nach unten. */
.site-menu__section
  > [data-site-menu-item]:not([data-site-menu-link])
  + [data-site-menu-item][data-site-menu-link]::before {
  top: -0.5rem;
}

[data-site-menu-item][data-site-menu-link]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1.0625rem;
  height: 0.6375rem;
  background-color: currentColor;
  -webkit-mask: var(--site-menu-arrow-icon) center / contain no-repeat;
  mask: var(--site-menu-arrow-icon) center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -50%, 0);
  transition: opacity 160ms ease;
}

[data-site-menu-link][tabindex="-1"] {
  outline: 0;
}

[data-site-menu-indicator] {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity 160ms ease, transform 180ms ease;
}

[data-site-menu-link].is-active [data-site-menu-indicator],
[data-site-menu-link].w--current [data-site-menu-indicator] {
  opacity: 1;
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  [data-site-menu-link],
  [data-site-menu-item] {
    transition: color 160ms ease, opacity 160ms ease, transform 180ms ease;
  }

  [data-site-menu-link]:hover,
  [data-site-menu-link]:focus-visible {
    transform: translate3d(0.25rem, 0, 0);
  }

  [data-site-menu-item][data-site-menu-link]:hover::after,
  [data-site-menu-item][data-site-menu-link]:focus-visible::after {
    opacity: 1;
  }

  [data-site-menu].is-open:has([data-site-menu-item][data-site-menu-link]:is(:hover, :focus-visible))
    [data-site-menu-item]:not(:hover):not(:focus-visible) {
    color: var(--fw_dark_purple_50, #82808c);
  }

  [data-site-menu-link]:hover [data-site-menu-indicator],
  [data-site-menu-link]:focus-visible [data-site-menu-indicator] {
    opacity: 1;
    transform: scaleX(1);
  }

  /* Toggle-Hover im geschlossenen Zustand: der Mittelbalken zieht sich mittig
     zusammen. 23.81% / 52.38% von 21px = 5px Versatz, 11px Breite — mittig und
     pixelgenau. Im geschlossenen Zustand deckt sich die Nav-Box exakt mit dem
     Balken, :hover auf ihr ist also dieselbe Flaeche wie der Toggle-Button.

     Der rosa Balken selbst waechst hier bewusst nicht mehr mit: der frueher
     dazugehoerige Spread-Ring (2px in --fw_rosa) ist am 04.09.2026 entfallen.
     Der Schlagschatten des Panels kommt unveraendert aus dem Designer
     (.site-menu__panel, 0 0 0.75rem #00000026). */
  [data-site-menu]:not(.is-open) [data-site-menu-toggle]:hover .site-menu__toggle-bar--mid {
    left: 23.81%;
    width: 52.38%;
  }
}

/* Menue-Reveal (Split-Line): Jeder Punkt hat eine Maske, der Text faehrt von
   unten ein, die Trennlinien zeichnen sich von links nach rechts. Staffelung:
   --i = Reihenfolge in der Welle, --g = Welle (0 = Ueberschriften, 1 = kleine
   Links und Footer), gesetzt in site-menu.ts. Der Ausgangszustand gilt erst mit
   .is-ready, ohne JavaScript bleibt das Menue normal sichtbar. */
[data-site-menu] {
  --site-menu-reveal-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --site-menu-reveal-start: 300ms;
  --site-menu-reveal-step: 50ms;
  --site-menu-reveal-dur: 700ms;
  --site-menu-reveal-gap: 320ms;
  --site-menu-reveal-reset: 0.55s;
}

.site-menu__line {
  display: block;
  max-width: 100%;
  overflow: hidden;
  /* Luft fuer Unterlaengen, ohne den Zeilenabstand zu aendern. */
  padding: 0.14em 0;
  margin: -0.14em 0;
}

.site-menu__line-in {
  display: block;
}

[data-site-menu].is-ready .site-menu__line-in {
  transform: translateY(110%);
  /* Zuruecksetzen erst, wenn das Panel eingefahren ist. */
  transition: transform 0s linear var(--site-menu-reveal-reset);
}

[data-site-menu].is-ready.is-open .site-menu__line-in {
  transform: translateY(0);
  transition: transform var(--site-menu-reveal-dur) var(--site-menu-reveal-ease)
    calc(
      var(--site-menu-reveal-start) + var(--g, 0) * var(--site-menu-reveal-gap) +
        var(--i, 0) * var(--site-menu-reveal-step)
    );
}

[data-site-menu].is-ready .site-menu__divider {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0s linear var(--site-menu-reveal-reset);
}

[data-site-menu].is-ready.is-open .site-menu__divider {
  transform: scaleX(1);
  transition: transform calc(var(--site-menu-reveal-dur) * 0.9) var(--site-menu-reveal-ease)
    calc(
      var(--site-menu-reveal-start) + var(--g, 0) * var(--site-menu-reveal-gap) +
        var(--i, 0) * var(--site-menu-reveal-step) + 60ms
    );
}

@media (prefers-reduced-motion: reduce) {
  [data-site-menu].is-ready .site-menu__line-in,
  [data-site-menu].is-ready .site-menu__divider {
    transform: none;
    transition: none;
  }
}

@media (max-width: 767px) {
  /* Die Startseiten-Signatur war 96px breit, auf Unterseiten 136px.
     Ein gemeinsamer mobiler Wert hebt Home um 20% an und gilt fuer alle Seiten. */
  .top_bar_section .top_bar_center .nav_logo_link,
  .top_bar_section .top_bar_center .nav_logo_image_link {
    width: 7.2rem;
    max-width: none;
  }

  .top_bar_section .top_bar_center .nav_logo_image_link img.nav_logo {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* Der spaeter geladene Head-Style begrenzt .site-menu ebenfalls in der Breite.
     Die kombinierte Klasse setzt das Menue auf Mobil bis an alle Seitenraender. */
  .site-menu[data-site-menu] {
    --site-menu-width: 100%;
    --site-menu-offset: 0px;
    --site-menu-open-height: 100dvh;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    box-sizing: border-box;
  }

  .site-menu__header {
    margin-bottom: 2.5rem;
  }

  .site-menu__brand,
  .site-menu__language,
  .site-menu__link--small,
  .site-menu__footer-link,
  .site-menu__toggle {
    font-size: calc(var(--_sizes---footer-14, 0.875rem) + 0.125rem);
  }

  .site-menu__link--large {
    font-size: calc(var(--_sizes---h2-font-size, 1.667rem) + 0.125rem);
  }

  .site-menu__footer-links {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }

  /* Platz fuer die fixierte Menueleiste am Seitenende: Die letzte Footer-Zeile
     bleibt auch bei maximalem Scrollen oberhalb des 3.125rem hohen Menues. */
  .footer .footer_container {
    padding-bottom: 3.125rem;
  }

  /* Biografie und Kontexte teilen sich eine Zeile, sobald beide Buttons
     mit ihren Beschriftungen in den verfuegbaren Platz passen. */
  .about_button_wrapper {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .about_button_wrapper > .button-outlined {
    flex: 1 1 10rem;
    min-width: 10rem;
  }

  /* Die Intro-Beschriftung steht mobil vor dem Bild, ohne den Inhalt im
     Designer fuer Desktop umzubauen. */
  .news_event .intro_layout {
    row-gap: 0;
  }

  .news_event .intro_content_about {
    display: contents;
  }

  .news_event .intro_content_about > .u-text-eyebrow {
    order: -2;
    justify-self: center;
    margin-bottom: 1rem;
    text-align: center;
  }

  .news_event .intro_img {
    order: -1;
    aspect-ratio: 382 / 250;
    margin-bottom: 1.5rem;
    object-position: center;
  }

  .news_event .img-zoom:is([data-site-image-reveal="event"], [data-atelier-image-mask]) {
    order: -1;
    margin-bottom: 1.5rem;
  }

  .news_event .img-zoom:is([data-site-image-reveal="event"], [data-atelier-image-mask]) img.intro_img {
    margin-bottom: 0;
  }

  .news_event .intro_content_about > .text-link {
    margin-bottom: 1rem;
  }

  .news_event .intro_content_about > .u-h2,
  .news_event .intro_date_h2.u-h2,
  .news_highlight_section .news_date > .u-h2 {
    margin-bottom: 0.8rem;
  }

  .news_event .intro_date_h2.u-h2 {
    margin-bottom: 1rem;
  }

  .news_event .intro_date_infos,
  .news_event .intro_date_infos > .button-outlined {
    width: 100%;
  }

  .news_event .intro_date_infos > .button-outlined {
    box-sizing: border-box;
  }

  /* Die Karte wird im Figma-Entwurf ab der unteren Haelfte abgedunkelt.
     Der Verlauf sitzt nur auf dem Kartenbild, hinter der Infokarte. */
  .map_section .map_bg::after {
    content: "";
    position: absolute;
    inset: 50% 0 0;
    background: linear-gradient(to bottom, transparent, rgb(6 2 26 / 30%));
    pointer-events: none;
  }
}

/* News links sit at the bottom of their text columns and date panels. */
.news_event:has(.intro_date_infos a.button-outlined[href], a.text-link[href]) {
  cursor: pointer;
}

.news_event .intro_date > h3.u-h3,
.news_highlight_section .news_date > h3.u-h3 {
  display: block;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: clamp(1.67rem, calc(var(--fw-fluid-font-base, 1rem) * 1.67), 1.8rem) !important;
  font-size: var(--_sizes---h2-font-size, 1.667rem) !important;
  line-height: 1 !important;
  font-weight: 500;
}

.news_event .intro_content_about > .text-link,
.news_highlight_section .news_content > .text-link {
  margin-top: auto;
}

.news_event .intro_date_infos,
.news_highlight_section .intro_date_infos {
  flex: 1 1 auto;
  width: 100%;
  gap: 0;
  justify-content: flex-start;
}

.news_event .intro_date_infos > .button-outlined,
.news_highlight_section .intro_date_infos > .button-outlined {
  margin-top: auto;
}

.news_event .intro_date_infos > a.button-outlined,
.news_highlight_section .intro_date_infos > a.button-outlined {
  margin-top: auto !important;
}

@media (min-width: 992px) {
  .u-p-small.w-richtext {
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 767px) {
  .u-p.w-richtext {
    margin-bottom: 0;
  }

  .news_event .intro_date > h3.u-h3,
  .news_highlight_section .news_date > h3.u-h3 {
    margin-bottom: 0.8rem !important;
  }

  .news_event .intro_date_infos,
  .news_highlight_section .intro_date_infos {
    flex: 0 0 auto;
  }

  .news_event .intro_date_infos > a.button-outlined,
  .news_highlight_section .intro_date_infos > a.button-outlined {
    margin-top: 1.5rem !important;
  }
}

@media (max-width: 767px) {
  /* The accordion icon keeps its motion; headings and panels stay aligned. */
  .accordion_heading,
  .accordion_body {
    transform: none !important;
  }

  /* Promote the highlight label and image to the mobile grid. */
  .news_hi_layout > div:first-child,
  .news_hi_layout .news_content {
    display: contents;
  }

  .news_hi_layout {
    row-gap: 0;
  }

  .news_hi_layout .news_content > .u-text-eyebrow {
    order: -2;
    justify-self: center;
    margin-bottom: 1rem;
    text-align: center;
  }

  .news_hi_layout .news_img {
    order: -1;
    grid-area: auto;
    width: 100%;
    margin-left: 0;
    margin-bottom: 1.5rem;
  }

  .news_hi_layout .news_h1.u-h1 {
    margin-bottom: 0.8rem;
  }

  .news_hi_layout .news_content > .text-link {
    margin-bottom: 1rem;
  }

  .news_hi_layout .news_date {
    order: 1;
  }

  /* The fixed menu already reserves the last 50px of the viewport. On the
     flex-column legal/contact pages the footer must still fit its children. */
  .footer.u-section {
    min-height: 0;
    height: auto;
    flex-shrink: 0;
  }

  .atelier_location_txt.u-p,
  .atelier_location_icon {
    display: none;
  }

  body:has(.atelier_about_section) .u-text-eyebrow {
    margin-bottom: 0.7rem;
  }

  .atelier_about_section.u-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .atelier_about_p.u-p {
    margin-left: 0;
  }

  .editionen_list {
    gap: 4rem;
  }

  .editionen_section .editionen_title.u-h1 {
    margin-bottom: 1.5rem;
  }

  .editionen_media .editionen_nav,
  .editionen_media .editionen_nav_icon {
    width: 42px;
    height: 42px;
  }
}

/* Match the available edition color variants to the supplied palette. */
.editionen_swatches .editionen_swatch {
  width: 12px;
  height: 12px;
  border: 0.5px solid #444153;
}

.editionen_swatches .editionen_swatch.is-rosa { background-color: #ffc7d1; }
.editionen_swatches .editionen_swatch.is-yellow { background-color: #f2f291; }
.editionen_swatches .editionen_swatch.is-red { background-color: #fa9189; }
.editionen_swatches .editionen_swatch.is-green { background-color: #bae3a5; }

@media (prefers-reduced-motion: reduce) {
  [data-site-menu-panel],
  [data-site-menu-link],
  [data-site-menu-indicator],
  .site-menu__toggle,
  .site-menu__toggle-icon > span,
  [data-page-transition-overlay],
  .page-transition-overlay {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    will-change: auto;
  }
}

[data-modal][hidden],
[data-site-modal][hidden],
[data-site-lightbox][hidden] {
  display: none !important;
}

[data-modal-content] {
  display: none !important;
}

[data-modal],
[data-site-modal] {
  position: fixed;
  inset: 0;
  z-index: 1850;
}

[data-modal].is-active,
[data-site-modal].is-active {
  display: flex;
}

[data-modal-panel] {
  max-height: 100dvh;
  overflow: auto;
}

.site-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1860;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: rgba(6, 2, 26, 0.8);
  background: color-mix(in srgb, var(--fw_dark_purple) 80%, transparent);
  color: var(--fw_off_white);
}

.site-lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: min(calc(100vw - 10rem), 75rem);
  max-height: calc(100dvh - 4rem);
  margin: 0;
}

.site-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 6rem);
  width: auto;
  height: auto;
  object-fit: contain;
}

.site-lightbox__caption {
  margin-top: 0.5rem;
  color: var(--fw_off_white);
  font-family: 'StyreneA', sans-serif;
  font-size: var(--_sizes---footer-12);
  line-height: 1.3;
}

.site-lightbox__caption[hidden] {
  display: none !important;
}

.site-lightbox__credit {
  display: block;
  margin-top: 0.3rem;
  color: var(--fw_dark_purple_50, #82808c);
  font-family: 'StyreneA', sans-serif;
  font-size: 0.75rem;
  line-height: 1.4;
}

.site-lightbox__credit[hidden] {
  display: none !important;
}

.site-lightbox__close,
.site-lightbox__previous,
.site-lightbox__next {
  cursor: pointer;
}

.site-lightbox__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  z-index: 2;
  width: 1.4875rem;
  height: 1.4875rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  line-height: 0;
  overflow: visible;
}

.site-lightbox__close svg {
  display: block;
  width: 1.4875rem;
  height: 1.4875rem;
  overflow: visible;
}

.site-lightbox__close circle {
  fill: var(--fw_off_white);
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 150ms ease, transform 150ms ease-out;
}

.site-lightbox__close path {
  fill: var(--fw_dark_purple);
}

.site-lightbox__close:hover circle {
  fill: var(--fw_rosa);
  transform: scale(1.15);
}

.site-lightbox__close:focus-visible {
  outline: 2px solid var(--fw_rosa);
  outline-offset: 3px;
}

.site-lightbox__previous,
.site-lightbox__next {
  position: absolute;
  top: 50%;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--fw_off_white);
  color: var(--fw_dark_purple);
  font-size: 2rem;
  line-height: 1;
  transform: translateY(-50%);
}

.site-lightbox__previous {
  left: 2rem;
}

.site-lightbox__next {
  right: 2rem;
}

.site-lightbox-trigger {
  cursor: pointer;
}

/*
  Der Wrapper steht zwischen Rahmen und Bild, also darf er sich nicht selbst
  am Bild messen: als inline-block nimmt er seine Groesse vom Kind, ein Bild
  mit width/height: 100% nimmt sie vom Wrapper - beide warten aufeinander und
  fallen auf 0x0 zusammen. Bei `loading="lazy"` wird das Bild dann nicht einmal
  angefordert, die Flaeche bleibt komplett leer. Deshalb block: die Breite kommt
  vom Rahmen, nicht vom Inhalt.

  Die Hoehe reicht er bewusst NICHT pauschal durch. Wo ein Bild seine Hoehe aus
  dem Seitenverhaeltnis bezieht (Biografie), waere der Wrapper sonst hoeher als
  das Bild und das Icon rutschte unter die Bildkante. Rahmen, die Breite und
  Hoehe vorgeben und deren Bild sie mit object-fit: cover fuellen soll, sagen
  das ueber `data-lightbox-fill` (siehe unten).
*/
.site-lightbox-trigger {
  position: relative;
  display: block;
  max-width: 100%;
  line-height: 0;
}

/*
  `data-lightbox-fill` gehoert im Designer auf dasselbe Element wie `js-lightbox`,
  also aufs Bild - lightbox.ts traegt es beim Verpacken auf den Wrapper um.

  Die Regeln greifen an allen drei Stellen: am Wrapper, am Bild darin und am
  Rahmen darum. Das ist Absicht - CSS und JS haengen an getrennten jsDelivr-Pins
  und laufen regelmaessig auseinander. Faengt die CSS nur den Wrapper ab, ist
  das Attribut wirkungslos, solange das JS noch aelter ist; genau das ist am
  04.09.2026 passiert.
*/
.site-lightbox-trigger[data-lightbox-fill],
.site-lightbox-trigger:has(> [data-lightbox-fill]),
[data-lightbox-fill] > .site-lightbox-trigger {
  width: 100%;
  height: 100%;
}

/*
  Die Hoehe am Bild zu wiederholen ist kein Ueberfluss: Webflows eigenes
  height: 100% am Bild misst sich am Wrapper, dessen Hoehe zu dem Zeitpunkt noch
  nicht feststeht, und faellt auf auto zurueck - das Bild bliebe in seinem
  Seitenverhaeltnis stehen statt den Rahmen zu fuellen (auf der Atelier-Seite
  gemessen: 399x299 statt 399x326). Erst diese Regel greift auf die dann
  aufgeloeste Wrapper-Hoehe zu.
*/
.site-lightbox-trigger[data-lightbox-fill] > .site-lightbox-trigger__image,
.site-lightbox-trigger > .site-lightbox-trigger__image[data-lightbox-fill],
[data-lightbox-fill] > .site-lightbox-trigger > .site-lightbox-trigger__image {
  height: 100%;
}

.site-lightbox-trigger__image {
  display: block;
  max-width: 100%;
  height: auto;
}

/*
  Parallax-Fenster: der Rahmen steht fest, das Bild dahinter wandert. Die Ebene dazwischen
  legt parallax.ts an; sie ist oben und unten ueber den Rahmen hinaus aufgespannt - um
  1px weiter, als sie faehrt, sonst kann an den Endpunkten eine Subpixel-Haarlinie
  aufblitzen.

  Warum ueberhaupt eine Zwischenebene: auf Bildern kann bereits ein CSS-transform liegen,
  etwa der Hover-Zoom der Lightbox-Bilder. GSAPs inline transform wuerde den schlucken -
  inline schlaegt Stylesheet. So besitzt jede Seite ihr eigenes transform, und ein Icon
  im Rahmen bleibt als Geschwister der Ebene stehen, statt mitzufahren.
*/
.fw-parallax-window {
  position: relative;
  overflow: hidden;
}

/*
  Nur fuer Rahmen, die ihre Hoehe bisher vom Bild im Fluss bezogen haben und
  sonst auf 0 zusammenfallen. Rahmen mit eigener Hoehe bekommen das nicht, sonst
  zerstoert es ihr Layout.
*/
.fw-parallax-window--self-sized {
  display: block;
  width: 100%;
}

.fw-parallax-inner {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  will-change: transform;
}

.fw-parallax-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .fw-parallax-inner {
    will-change: auto;
  }
}

/*
  Hover-Zoom auf Lightbox-Bildern. Der Trigger-Wrapper wird von lightbox.ts selbst um
  das Bild gelegt, deshalb darf er hier beschnitten werden - das Bild waechst sonst
  ueber seine Box hinaus. Das Icon liegt 1rem vom Rand entfernt und bleibt auch
  vergroessert innerhalb, wird vom Clipping also nicht angeschnitten.

  Timing und Zoomstaerke kommen aus den :root-Tokens ganz oben. --fw-lightbox-zoom
  bleibt als Sonderweg fuer einzelne Lightbox-Bilder bestehen; ohne Wert faellt es
  auf den Site-Wert zurueck.
*/
.site-lightbox-trigger {
  overflow: hidden;
}

.site-lightbox-trigger__image {
  transition: transform var(--fw-image-zoom-duration, 0.62s) var(--fw-image-zoom-ease, cubic-bezier(0.33, 1, 0.68, 1));
}

/* Nur auf Geraeten mit echtem Zeiger: nach einem Tap bliebe der Zoom sonst kleben. */
@media (hover: hover) and (pointer: fine) {
  .site-lightbox-trigger:hover .site-lightbox-trigger__image {
    transform: scale(var(--fw-lightbox-zoom, var(--fw-image-zoom, 1.035)));
  }
}

.site-lightbox-trigger:focus-visible .site-lightbox-trigger__image {
  transform: scale(var(--fw-lightbox-zoom, var(--fw-image-zoom, 1.035)));
}

/* The leading News highlight keeps a fixed image on hover and focus. Event
   cards below it retain their separate Atelier mask and image hover. */
.news_highlight_section .news_img img {
  scale: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .news_img img,
  .site-lightbox-trigger__image,
  .fwm-modal__work-image {
    transition: none;
  }

  .news_img img {
    transform: none !important;
  }

  .site-lightbox-trigger:hover .site-lightbox-trigger__image,
  .site-lightbox-trigger:focus-visible .site-lightbox-trigger__image,
  .fwm-modal__work-card[href]:hover .fwm-modal__work-image,
  .fwm-modal__work-card[href]:focus-visible .fwm-modal__work-image {
    transform: none;
  }
}

/* Match Atelier's single settle, with the start scale present before JS runs. */
.bio_hero_section > img.bio_hero_img {
  transform: scale(1.075) !important;
  transition: transform 1.4s cubic-bezier(0, 0, .2, 1);
}

.bio_hero_section > img.bio_hero_img.is-site-image-in {
  transform: scale(1) !important;
}

/* Biography's top bar and date share one 200 ms fade. */
body:has(.bio_hero_section) .top_bar_section {
  opacity: 0;
  transition: opacity .2s linear;
}

body:has(.bio_hero_eyebrow.is-masked-reveal-playing) .top_bar_section {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .bio_hero_section > img.bio_hero_img { transform: none !important; transition: none !important; }
  body:has(.bio_hero_section) .top_bar_section { opacity: 1; transition: none; }
}

.bio_photo .bio_image_reveal.bio_fade {
  opacity: 1 !important;
  transform: none !important;
}

.bio_photo [data-site-image-reveal="bio"] {
  overflow: hidden;
  opacity: 0;
  transition: opacity .4s ease-out;
}

.bio_photo [data-site-image-reveal="bio"].is-site-image-in {
  opacity: 1;
}

.bio_photo [data-site-image-reveal="bio"] img {
  transform: scale(1.075) !important;
  transition: transform 1.2s cubic-bezier(0, 0, .2, 1) !important;
}

.bio_photo [data-site-image-reveal="bio"].is-site-image-in img {
  transform: scale(1) !important;
}

/* Event cards outside Atelier get its two-layer mask and hover motion. The
   existing .img-zoom is reused where Webflow already provides one. */
.news_event .img-zoom[data-site-image-reveal="event"] {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0 !important;
  opacity: 0;
  transition: opacity .4s ease-out;
}

.news_event .img-zoom[data-site-image-reveal="event"].is-site-image-in {
  opacity: 1;
}

.news_event [data-site-event-zoom] {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(0, 0, .2, 1);
}

.news_event .img-zoom[data-site-image-reveal="event"] [data-site-event-zoom] > img.intro_img {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0 !important;
  clip-path: none !important;
  transform: scale(1.075) !important;
  transition: transform 1.2s cubic-bezier(0, 0, .2, 1) !important;
}

.news_event .img-zoom[data-site-image-reveal="event"].is-site-image-in [data-site-event-zoom] > img.intro_img {
  transform: scale(1) !important;
}

@media (max-width: 991px) {
  .news_event .img-zoom[data-site-image-reveal="event"] {
    height: auto;
  }

  .news_event .img-zoom[data-site-image-reveal="event"] [data-site-event-zoom] > img.intro_img {
    height: auto;
  }
}

:is(.news_event, .news_highlight_section) a.text-link {
  transition: transform .6s cubic-bezier(0, 0, .2, 1);
}

:is(.news_event, .news_highlight_section) a.text-link .arrow :is(.arrow-dot, .arrow-arrow),
:is(.news_event, .news_highlight_section) a.text-link .more-arrow :is([data-more-arrow-dot], [data-more-arrow-head]) {
  transition-timing-function: cubic-bezier(0, 0, .2, 1);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .bio_photo [data-site-image-reveal="bio"].is-site-image-in:hover img {
    transform: scale(1.045) !important;
  }

  .news_event:hover .img-zoom[data-site-image-reveal="event"].is-site-image-in [data-site-event-zoom] {
    transform: scale(1.03);
  }

  .news_event:hover .img-zoom[data-site-image-reveal="event"].is-site-image-in [data-site-event-zoom] > img.intro_img {
    transform: scale(1.015) !important;
  }

  :is(.news_event, .news_highlight_section):hover a.text-link {
    transform: translateX(6px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .bio_photo [data-site-image-reveal="bio"].is-site-image-in:focus-visible img {
    transform: scale(1.045) !important;
  }

  .news_event:focus-within .img-zoom[data-site-image-reveal="event"].is-site-image-in [data-site-event-zoom] {
    transform: scale(1.03);
  }

  .news_event:focus-within .img-zoom[data-site-image-reveal="event"].is-site-image-in [data-site-event-zoom] > img.intro_img {
    transform: scale(1.015) !important;
  }

  :is(.news_event, .news_highlight_section):focus-within a.text-link {
    transform: translateX(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bio_photo [data-site-image-reveal="bio"],
  .bio_photo [data-site-image-reveal="bio"] img,
  .news_event .img-zoom[data-site-image-reveal="event"],
  .news_event [data-site-event-zoom],
  .news_event .img-zoom[data-site-image-reveal="event"] [data-site-event-zoom] > img.intro_img,
  :is(.news_event, .news_highlight_section) a.text-link {
    opacity: 1;
    clip-path: none;
    transform: none !important;
    transition: none !important;
  }
}

/* Contact: the frame stays fixed while only its image settles into place. */
@media (prefers-reduced-motion: no-preference) {
  .contact_img [data-site-image-reveal="contact"] {
    overflow: hidden;
  }

  .contact_img [data-site-image-reveal="contact"] img {
    scale: 1.075;
    transition: scale 1.2s cubic-bezier(0, 0, .2, 1),
      transform var(--fw-image-zoom-duration, .62s) var(--fw-image-zoom-ease, cubic-bezier(.33, 1, .68, 1));
  }

  .contact_img [data-site-image-reveal="contact"].is-site-image-in img {
    scale: 1;
  }
}

/*
  z-index, damit kein positioniertes Geschwister das Icon verdeckt: Webflow gibt
  formatfuellenden Bildern gern selbst eins mit (`.image-absolute-full` steht auf
  1). 10 liegt komfortabel darueber und bleibt weit unter der Z-Landschaft der
  Site (Modal 1000, Lightbox 1100, Menue 1800).
*/
.site-lightbox-trigger__icon {
  position: absolute;
  z-index: 10;
  left: 1rem;
  bottom: 1rem;
  width: 1.4875rem;
  height: 1.4875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: visible;
}

.site-lightbox-trigger__icon svg {
  width: 1.4875rem;
  height: 1.4875rem;
  display: block;
  overflow: visible;
}

.site-lightbox-trigger__icon-circle {
  fill: var(--fw_off_white);
  opacity: 0.2;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.site-lightbox-trigger__icon-arrow {
  fill: var(--fw_dark_purple_50);
  transition: fill 0.18s ease, transform 0.18s ease;
}

.site-lightbox-trigger:hover .site-lightbox-trigger__icon-circle,
.site-lightbox-trigger:focus-visible .site-lightbox-trigger__icon-circle {
  fill: var(--fw_rosa);
  opacity: 1;
  transform: scale(1.133333);
}

.site-lightbox-trigger:hover .site-lightbox-trigger__icon-arrow,
.site-lightbox-trigger:focus-visible .site-lightbox-trigger__icon-arrow {
  fill: var(--fw_dark_purple);
}

.site-lightbox-trigger:hover .site-lightbox-trigger__icon-arrow--bottom,
.site-lightbox-trigger:focus-visible .site-lightbox-trigger__icon-arrow--bottom {
  transform: translate3d(-2px, 2px, 0);
}

.site-lightbox-trigger:hover .site-lightbox-trigger__icon-arrow--top,
.site-lightbox-trigger:focus-visible .site-lightbox-trigger__icon-arrow--top {
  transform: translate3d(2px, -2px, 0);
}

footer a.w--current,
footer a.w--current:hover,
footer a.w--current:focus-visible,
.footer a.w--current,
.footer a.w--current:hover,
.footer a.w--current:focus-visible {
  animation: none !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
  transition: none !important;
}

footer a.w--current::before,
footer a.w--current::after,
footer a.w--current:hover::before,
footer a.w--current:hover::after,
footer a.w--current:focus-visible::before,
footer a.w--current:focus-visible::after,
.footer a.w--current::before,
.footer a.w--current::after,
.footer a.w--current:hover::before,
.footer a.w--current:hover::after,
.footer a.w--current:focus-visible::before,
.footer a.w--current:focus-visible::after {
  animation: none !important;
  content: none !important;
  transition: none !important;
}

.fwm-modal {
  justify-content: flex-end;
  background-color: rgba(6, 2, 26, 0);
  pointer-events: none;
  transition: background-color 420ms ease;
}

.fwm-modal.is-visible {
  background-color: rgba(6, 2, 26, 0.5);
  pointer-events: auto;
}

.fwm-modal__panel {
  width: 32.775rem;
  max-width: 92vw;
  height: 100dvh;
  background: var(--fw_off_white);
  box-shadow: -0.625rem 0 3.125rem 0.625rem rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  padding: 0.75rem 1.5625rem;
  color: var(--fw_dark_purple);
  font-family: 'StyreneA', sans-serif;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 420ms cubic-bezier(0.76, 0, 0.24, 1);
  will-change: clip-path;
}

.fwm-modal.is-visible .fwm-modal__panel {
  clip-path: inset(0 0 0 0);
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.fwm-modal__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.125rem;
}

.fwm-modal__address {
  min-width: 0;
  color: var(--fw_dark_purple_50);
  font-size: var(--_sizes---p-small-font-size);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.fwm-modal__close {
  width: 1.4875rem;
  height: 1.4875rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 0;
  flex: 0 0 auto;
  color: var(--fw_dark_purple);
  overflow: visible;
}

.fwm-modal__close svg {
  width: 1.4875rem;
  height: 1.4875rem;
  display: block;
  overflow: visible;
}

.fwm-modal__close svg circle,
.fwm-modal__close svg path {
  transition: fill 0.18s ease;
}

.fwm-modal__close svg circle {
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 150ms ease, transform 150ms ease-out;
}

.fwm-modal__close:hover svg circle {
  fill: var(--fw_rosa);
  transform: scale(1.15);
}

.fwm-modal__close:hover svg path {
  fill: var(--fw_dark_purple);
}

.fwm-modal__close:focus-visible {
  outline: 2px solid var(--fw_dark_purple);
  outline-offset: 3px;
}

.fwm-modal__headline {
  margin: 0 0 1.75rem;
  color: var(--fw_dark_purple);
  font-size: var(--_sizes---h2-font-size);
  font-weight: 500;
  line-height: 1.05;
}

.fwm-modal__headline[hidden],
.fwm-modal__image-link[hidden],
.fwm-modal__work[hidden],
.fwm-modal__gallery[hidden] {
  display: none !important;
}

.fwm-modal__rights[hidden] {
  display: none !important;
}

.fwm-modal__rights {
  margin-top: 2rem;
  color: var(--fw_dark_purple_50, #82808c);
  font-family: 'StyreneA', sans-serif;
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: pre-line;
}

.fwm-modal__gallery {
  display: grid;
  gap: 1.75rem;
  margin-top: 2.25rem;
}

.fwm-modal__image-link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 1.75rem;
  color: inherit;
  text-decoration: none;
  background: var(--fw_dark_purple_5);
}

.fwm-modal__gallery .fwm-modal__image-link {
  width: 50%;
  max-width: 50%;
  margin-bottom: 0;
}

.fwm-modal__image {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  display: block;
}

.fwm-modal__image,
.fwm-modal__text img {
  transition: opacity 260ms ease;
}

.fwm-modal__panel img.is-image-pending {
  opacity: 0 !important;
  transition: none !important;
}

.fwm-modal__lightbox-icon {
  /* Share the image's grid cell, so captions never affect the icon position. */
  grid-area: 1 / 1;
  position: relative;
  align-self: end;
  justify-self: start;
  margin: 1rem;
  z-index: 1;
  left: auto;
  top: auto;
  bottom: auto;
  width: 1.4875rem;
  height: 1.4875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: visible;
}

.fwm-modal__lightbox-icon svg {
  width: 1.4875rem;
  height: 1.4875rem;
  display: block;
  overflow: visible;
}

.fwm-modal__lightbox-icon-circle {
  fill: var(--fw_off_white);
  opacity: 0.2;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.fwm-modal__lightbox-icon-arrow {
  fill: var(--fw_dark_purple_50);
  transition: fill 0.18s ease, transform 0.18s ease;
}

.fwm-modal__image-link:hover .fwm-modal__lightbox-icon-circle {
  fill: var(--fw_rosa);
  opacity: 1;
  transform: scale(1.133333);
}

.fwm-modal__image-link:hover .fwm-modal__lightbox-icon-arrow {
  fill: var(--fw_dark_purple);
}

.fwm-modal__image-link:hover .fwm-modal__lightbox-icon-arrow--bottom {
  transform: translate3d(0, 4px, 0);
}

.fwm-modal__image-link:hover .fwm-modal__lightbox-icon-arrow--top {
  transform: translate3d(4px, 0, 0);
}

.fwm-modal__lightbox-icon-circle--centered {
  fill: var(--fw_off_white);
  opacity: 0.2;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.fwm-modal__lightbox-icon-arrow--centered-bottom,
.fwm-modal__lightbox-icon-arrow--centered-top {
  fill: var(--fw_dark_purple_50);
  transition: fill 0.18s ease, transform 0.18s ease;
}

.fwm-modal__image-link:hover .fwm-modal__lightbox-icon-circle--centered {
  fill: var(--fw_rosa);
  opacity: 1;
  transform: scale(1.133333);
}

.fwm-modal__image-link:hover .fwm-modal__lightbox-icon-arrow--centered-bottom {
  fill: var(--fw_dark_purple);
  transform: translate3d(-2px, 2px, 0);
}

.fwm-modal__image-link:hover .fwm-modal__lightbox-icon-arrow--centered-top {
  fill: var(--fw_dark_purple);
  transform: translate3d(2px, -2px, 0);
}

.fwm-modal__caption {
  grid-area: 2 / 1;
  display: none;
  padding-top: 0.5rem;
  color: var(--fw_dark_purple);
  background: var(--fw_off_white);
  font-size: var(--_sizes---p-small-font-size);
  line-height: 1.4;
}

.fwm-modal__gallery .fwm-modal__caption {
  display: block;
}

.fwm-modal__caption[hidden] {
  display: none !important;
}

.fwm-modal__text {
  color: var(--fw_dark_purple);
  font-size: var(--_sizes---p-font-size);
  line-height: 1.65;
}

.fwm-modal__text p {
  margin: 0 0 1rem;
  color: var(--fw_dark_purple);
  font-family: "StyreneB", "Styrene B", sans-serif;
  font-size: var(--_sizes---p-font-size);
  line-height: 1.4;
}

.fwm-modal__text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.fwm-modal__text a:hover,
.fwm-modal__text a:focus-visible {
  color: inherit;
  text-decoration-thickness: 0.08em;
}

.fwm-modal__text em,
.fwm-modal__text i {
  color: var(--FW_Dark_Purple_50, var(--fw_dark_purple_50));
  font-style: normal;
}

.fwm-modal__text h2 {
  margin: 0 0 0.875rem;
  color: var(--fw_dark_purple);
  font-size: var(--_sizes---h2-font-size);
  font-weight: 500;
  line-height: 1.2;
}

.fwm-modal__text h1,
.fwm-modal__text h3,
.fwm-modal__text h4 {
  margin: 0 0 0.875rem;
  color: var(--fw_dark_purple);
  font-weight: 500;
}

.fwm-modal__text blockquote {
  margin: 0 0 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--fw_dark_purple_12);
  color: var(--fw_dark_purple_75);
  font-size: var(--_sizes---p-font-size);
  font-style: italic;
}

.fwm-modal[data-modal-variant="context"] .fwm-modal__text blockquote {
  margin: 1.75rem 0 1.75rem 3rem;
  padding-left: 0;
  border-left: 0;
  color: var(--fw_dark_purple);
  font-style: normal;
}

.fwm-modal[data-modal-variant="context"] .fwm-modal__text blockquote p {
  margin-bottom: 0.75rem;
  font-size: var(--_sizes---p-font-size);
}

.fwm-modal__text ul,
.fwm-modal__text ol {
  margin: 0 0 1rem 1.25rem;
}

.fwm-modal__work {
  margin-top: 2rem;
}

.fwm-modal__work-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  color: var(--fw_dark_purple);
  text-decoration: none;
}

.fwm-modal__work-image-wrap {
  display: block;
  overflow: hidden;
  background: var(--fw_dark_purple_5);
}

.fwm-modal__work-image {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
  transition: opacity 260ms ease, transform var(--fw-image-zoom-duration, 0.62s) var(--fw-image-zoom-ease, cubic-bezier(0.33, 1, 0.68, 1));
}

.fwm-modal__work-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
}

.fwm-modal__work-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.fwm-modal__work-title,
.fwm-modal__work-year {
  display: block;
}

.fwm-modal__work-title {
  font-size: var(--_sizes---p-font-size);
  line-height: 1.2;
}

.fwm-modal__work-year {
  color: var(--fw_dark_purple_50);
  font-size: var(--_sizes---p-font-size);
  line-height: 1.2;
}

.fwm-modal__work-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--fw_dark_purple_75);
}

.fwm-modal__work-eye {
  display: block;
  width: 1.38125rem;
  height: auto;
}

.fwm-modal__work-eye-pupil {
  transition: transform 180ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

@media (hover: hover) and (pointer: fine) {
  .fwm-modal__work-card[href]:hover .fwm-modal__work-image {
    transform: scale(var(--fw-image-zoom, 1.035));
  }
}

.fwm-modal__work-card[href]:focus-visible .fwm-modal__work-image {
  transform: scale(var(--fw-image-zoom, 1.035));
}

.fwm-modal__work-card[href]:hover .fwm-modal__work-icon,
.fwm-modal__work-card[href]:focus-visible .fwm-modal__work-icon {
  color: var(--fw_dark_purple);
}

.fwm-modal__work-card[href]:hover .fwm-modal__work-eye-pupil,
.fwm-modal__work-card[href]:focus-visible .fwm-modal__work-eye-pupil {
  transform: translateX(0.2rem);
}

@media screen and (max-width: 767px) {
  .site-lightbox {
    padding: 2rem 1rem;
  }

  .site-lightbox__figure {
    max-width: calc(100vw - 2rem);
  }

  .site-lightbox__image {
    max-height: calc(100dvh - 7rem);
  }

  .site-lightbox__close {
    top: 1rem;
    right: 1rem;
  }

  .site-lightbox__previous {
    left: 1rem;
  }

  .site-lightbox__next {
    right: 1rem;
  }

  .fwm-modal {
    align-items: flex-end;
  }

  .fwm-modal__panel {
    width: 100%;
    max-width: 100%;
    height: 78dvh;
    border-radius: 0;
    box-shadow: 0 -0.625rem 3.125rem 0.625rem rgba(0, 0, 0, 0.1);
    padding: 0.75rem 1.5rem;
    clip-path: none;
    transform: translateY(100%);
    transition: transform 420ms cubic-bezier(0.76, 0, 0.24, 1);
    will-change: transform;
  }

  [data-modal-panel] {
    border-radius: 0;
  }

  .fwm-modal.is-visible .fwm-modal__panel {
    clip-path: none;
    transform: translateY(0);
    transition-duration: 600ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  .fwm-modal__text blockquote {
    margin-left: 0;
  }

  .fwm-modal[data-modal-variant="context"] .fwm-modal__text blockquote {
    margin-left: 1.5rem;
  }

  .fwm-modal__work-footer {
    gap: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fwm-modal,
  .fwm-modal__panel,
  .fwm-modal__top,
  .fwm-modal__image-link,
  .fwm-modal__headline,
  .fwm-modal__text,
  .fwm-modal__work,
  .fwm-modal__gallery,
  .fwm-modal__text img,
  .fwm-modal__image,
  .fwm-modal__work-image,
  .fwm-modal__work-eye-pupil {
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }
}

/* Text remains hidden until the shared fade-up reveal initializes. */
[data-reveal-pending] {
  visibility: hidden;
}

/* Opt-in line reveal; Atelier and Biography use the same hero timing. */
:is([data-masked-line-reveal], .atelier_hero_section .atelier_slide_heading, .bio_hero_section .bio_hero_sub):not([data-masked-reveal-ready], [data-masked-reveal-complete]) {
  visibility: hidden;
}

:is([data-masked-reveal-label], .atelier_hero_section .atlier_slide_eyebrow, .bio_hero_section .bio_hero_eyebrow, .bio_hero_section .bio_hero_heading):not([data-masked-reveal-complete]) {
  opacity: 0;
}

.masked-reveal-line {
  display: block;
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

.masked-reveal-line__text {
  display: block;
  transform: translateY(100%);
}

.is-masked-reveal-playing .masked-reveal-line__text {
  animation: masked-reveal-rise var(--masked-reveal-duration, 600ms)
    var(--masked-reveal-ease, cubic-bezier(.33, 1, .68, 1)) both;
  animation-delay: calc(var(--masked-reveal-delay, 0ms) + var(--masked-reveal-line-delay, 0ms));
}

:is([data-masked-reveal-label], .atelier_hero_section .atlier_slide_eyebrow, .bio_hero_section .bio_hero_eyebrow, .bio_hero_section .bio_hero_heading).is-masked-reveal-playing {
  animation: masked-reveal-fade 200ms linear both;
  animation-delay: var(--masked-label-delay, 0ms);
}

[data-masked-reveal-complete] .masked-reveal-line__text {
  transform: none;
}

.atelier_hero_section .atelier_slide_heading,
.bio_hero_section .bio_hero_sub {
  --masked-reveal-delay: 60ms;
}

/* Edition text follows its H2 line reveal; slider motion is independent. */
@media (prefers-reduced-motion: no-preference) {
  [data-edition-content-reveal] {
    opacity: 0;
    translate: 0 20px;
    transition: opacity 1s cubic-bezier(.33, 1, .68, 1),
      translate 1s cubic-bezier(.33, 1, .68, 1);
    transition-delay: var(--edition-content-delay, 0ms);
  }

  [data-edition-content-reveal].is-edition-content-in {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes masked-reveal-rise {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes masked-reveal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal-pending] {
    visibility: visible;
  }

  :is([data-masked-line-reveal], .atelier_hero_section .atelier_slide_heading, .bio_hero_section .bio_hero_sub) {
    visibility: visible;
  }

  :is([data-masked-reveal-label], .atelier_hero_section .atlier_slide_eyebrow, .bio_hero_section .bio_hero_eyebrow, .bio_hero_section .bio_hero_heading) {
    opacity: 1;
    animation: none;
  }

  .masked-reveal-line__text {
    transform: none;
    animation: none !important;
  }
}

/* Keep Webflow's existing button colors; only the movement gets the long easing. */
:is(.btn, .button-outlined) {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn {
  min-width: 13.8rem;
  padding: .7rem 1.7rem;
  border: 1.5px solid currentColor;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .06em;
}

:is(.btn, .button-outlined) > :is(.f, .button-mask) {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
  transform: translateY(102%) !important;
  transition: transform var(--fw-button-fill-duration) var(--eo) !important;
}

:is(.btn, .button-outlined) > .f {
  background: currentColor;
}

.button-outlined > .f {
  background: var(--fw_rosa, #ffc7d1);
}

:is(.btn, .button-outlined) > :is(span:not(.button-mask), .button-text, svg) {
  position: relative;
  z-index: 1;
}

:is(.btn, .button-outlined) > svg {
  transition: transform var(--fw-button-arrow-duration) var(--eo);
}

@media (hover: hover) {
  :is(.btn, .button-outlined):hover > :is(.f, .button-mask) {
    transform: none !important;
  }

  :is(.btn, .button-outlined):hover > svg {
    transform: translateX(5px);
  }
}

:is(.btn, .button-outlined):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

:is(.btn, .button-outlined):focus-visible > :is(.f, .button-mask) {
  transform: none !important;
}

:is(.btn, .button-outlined):focus-visible > svg {
  transform: translateX(5px);
}

.button-outlined .tp_l,
.button-outlined .tp_r,
.button-outlined .bt_l,
.button-outlined .bt_r {
  transition: transform var(--fw-button-fill-duration) var(--eo);
}

/*
  Die vier Klammern des Map-Buttons behalten den bisherigen IX2-Bezugspunkt.
*/
.button-outlined .tp_l,
.button-outlined .tp_r,
.button-outlined .bt_l,
.button-outlined .bt_r {
  transform-box: view-box;
  transform-origin: 0 0;
}

.button-outlined .tp_l,
.button-outlined .tp_r,
.button-outlined .bt_l,
.button-outlined .bt_r {
  transform: translate3d(0, 0, 0) !important;
}

@media (hover: hover) and (pointer: fine) {
  /* Die vier Klammern des Map-Buttons laufen zur Mitte. */
  .button-outlined:hover .tp_l {
    transform: translate3d(60%, 60%, 0) !important;
  }

  .button-outlined:hover .tp_r {
    transform: translate3d(-60%, 60%, 0) !important;
  }

  .button-outlined:hover .bt_l {
    transform: translate3d(60%, -60%, 0) !important;
  }

  .button-outlined:hover .bt_r {
    transform: translate3d(-60%, -60%, 0) !important;
  }
}

.button-outlined:focus-visible .tp_l {
  transform: translate3d(60%, 60%, 0) !important;
}

.button-outlined:focus-visible .tp_r {
  transform: translate3d(-60%, 60%, 0) !important;
}

.button-outlined:focus-visible .bt_l {
  transform: translate3d(60%, -60%, 0) !important;
}

.button-outlined:focus-visible .bt_r {
  transform: translate3d(-60%, -60%, 0) !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(.btn, .button-outlined) > :is(.f, .button-mask, span, .button-text, svg),
  .button-outlined .tp_l,
  .button-outlined .tp_r,
  .button-outlined .bt_l,
  .button-outlined .bt_r {
    transition-duration: var(--fw-button-reduced-duration) !important;
  }
}

/* Pfeil ohne sichtbaren Punkt: Der vorhandene SVG-Pfad wird erst beim Hover
   zum Schaft. Bewegung und Kurve entsprechen den Carousel-Pfeilen; die
   Groesse und die Gestaltung des umgebenden Links bleiben unveraendert. */
.arrow .arrow-arrow,
.arrow .arrow-dot {
  transform-box: fill-box;
  transform-origin: right center;
  transition: transform 380ms cubic-bezier(0.76, 0, 0.24, 1);
}

.arrow .arrow-arrow {
  transform: translateX(0) scaleX(1) !important;
}

.arrow .arrow-dot {
  opacity: 0 !important;
  transform: translateX(6.13px) scaleX(0.48) !important;
  transition: transform 380ms cubic-bezier(0.76, 0, 0.24, 1), opacity 120ms ease;
}

@media (hover: hover) and (pointer: fine) {
  :is(a, button, [role="button"], .button-outlined, .text-link):hover .arrow .arrow-arrow {
    transform: translateX(1.4839px) scaleX(0.8769) !important;
  }

  :is(a, button, [role="button"], .button-outlined, .text-link):hover .arrow .arrow-dot {
    opacity: 1 !important;
    transform: translateX(6.13px) scaleX(4.2) !important;
  }
}

:is(a, button, [role="button"], .button-outlined, .text-link):focus-visible .arrow .arrow-arrow {
  transform: translateX(1.4839px) scaleX(0.8769) !important;
}

:is(a, button, [role="button"], .button-outlined, .text-link):focus-visible .arrow .arrow-dot {
  opacity: 1 !important;
  transform: translateX(6.13px) scaleX(4.2) !important;
}

@media (prefers-reduced-motion: reduce) {
  .arrow .arrow-arrow,
  .arrow .arrow-dot {
    transition: none;
  }
}

/* "Mehr erfahren" uses the Editionen/Instagram arrow paths and motion,
   without the carousel circle. The link's existing icon box is preserved. */
.arrow.more-arrow {
  overflow: visible;
}

/* Match the link's direct-hover color as soon as the whole event card is hovered. */
@media (hover: hover) and (pointer: fine) {
  :is(.news_event, .news_highlight_section):hover a.text-link {
    color: var(--fw_dark_purple, #06021a);
  }

  :is(.news_event, .news_highlight_section).u-theme-green:hover a.text-link {
    color: var(--fw_dark_purple, #06021a) !important;
  }
}

:is(.news_event, .news_highlight_section).u-theme-green:focus-within a.text-link {
  color: var(--fw_dark_purple, #06021a) !important;
}

.more-arrow [data-more-arrow-dot],
.more-arrow [data-more-arrow-head] {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: right center;
  transition: transform 380ms cubic-bezier(0.76, 0, 0.24, 1);
}

@media (hover: hover) and (pointer: fine) {
  :is(a, button, [role="button"]):hover .more-arrow [data-more-arrow-dot],
  :is(.news_event, .news_highlight_section):hover a.text-link .more-arrow [data-more-arrow-dot] {
    transform: translate(0.1715px, 0.1599px) scale(7.8925, 0.8005);
  }

  :is(a, button, [role="button"]):hover .more-arrow [data-more-arrow-head],
  :is(.news_event, .news_highlight_section):hover a.text-link .more-arrow [data-more-arrow-head] {
    transform: translateX(1.4839px) scaleX(0.8769);
  }
}

:is(a, button, [role="button"]):focus-visible .more-arrow [data-more-arrow-dot] {
  transform: translate(0.1715px, 0.1599px) scale(7.8925, 0.8005);
}

:is(a, button, [role="button"]):focus-visible .more-arrow [data-more-arrow-head] {
  transform: translateX(1.4839px) scaleX(0.8769);
}

@media (prefers-reduced-motion: reduce) {
  .more-arrow [data-more-arrow-dot],
  .more-arrow [data-more-arrow-head] {
    transition: none;
  }
}

/* Figma 1358:10234 — one session intro. Assets are original local Figma exports.
   Root coverage exists before body markup; no display:none on page content,
   so responsive images, CMS geometry and native Spline can initialize normally. */
html.is-site-preloading,
html.is-site-preloading body {
  overflow: hidden;
  overscroll-behavior: none;
}
html.is-site-preloading::after,
.site-preloader {
  --preloader-ease: cubic-bezier(.7, 0, .08, 1);
  --preloader-ease-out: cubic-bezier(.05, .85, .05, 1);
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  background: var(--fw_rosa, #ffc7d1);
}
html.is-site-preloading::after {
  content: '';
  z-index: 2100;
}
html.is-site-preloading.is-site-preloader-exiting::after {
  visibility: hidden;
}
.site-preloader {
  z-index: 2101;
  isolation: isolate;
  overflow: hidden;
  color: var(--fw_dark_purple, #06021a);
  font-family: 'StyreneA', 'Styrene A Web', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  touch-action: none;
  cursor: progress;
  clip-path: inset(0 0 0 0);
  will-change: clip-path;
  transition: clip-path .975s var(--preloader-ease);
}
.site-preloader::before {
  content: '';
  position: absolute;
  inset: -6px;
  background: url('./assets/preloader-background.svg') center / cover no-repeat;
  /* SVG feFlood alpha differs from Figma's noise opacity in browsers. */
  opacity: 0.25;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.site-preloader__progress-mask,
.site-preloader__name {
  position: absolute;
  left: 50%;
  z-index: 1;
}
.site-preloader__progress-mask {
  top: clamp(48px, 11vh, 120px);
  transform: translateX(-50%);
  overflow: hidden;
}
.site-preloader__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transform: translateY(110%);
  transition: transform .75s var(--preloader-ease-out);
}
.site-preloader.is-loading .site-preloader__progress { transform: translateY(0); }
.site-preloader.is-fading .site-preloader__progress {
  transform: translateY(-110%);
  transition-duration: .6s;
  transition-timing-function: var(--preloader-ease);
}
.site-preloader__digit {
  display: block;
  height: 18px;
  overflow: hidden;
}
.site-preloader__digit[hidden] { display: none; }
.site-preloader__suffix { display: inline-block; }
.site-preloader__track,
.site-preloader__track > span {
  display: block;
}
.site-preloader__track > span { height: 18px; }
.site-preloader__name {
  bottom: clamp(36px, 8vh, 72px);
  transform: translateX(-50%) translateY(var(--intro-shift, 0px));
  opacity: 0;
  animation: site-preloader-drift 8s ease-in-out infinite alternate;
  transition: opacity .45s var(--preloader-ease);
}
.site-preloader__name:not(.is-ready) {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}
.site-preloader__name.is-ready { opacity: 1; }
.site-preloader__name.is-settled {
  transform: translateX(-50%) translateY(0);
  transition: transform 1.125s var(--preloader-ease), opacity .45s var(--preloader-ease);
}
.site-preloader.is-fading .site-preloader__name { opacity: 0; }
.site-preloader__title,
.site-preloader__date {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 3s cubic-bezier(.02, .9, .03, 1), transform 6.75s cubic-bezier(.02, .9, .03, 1);
}
.site-preloader__title.is-visible,
.site-preloader__date.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.site-preloader__signature-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(180px, min(25.5vw, 42vh), 420px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  animation: site-preloader-drift 7s ease-in-out infinite alternate;
  transition: opacity 1.05s var(--preloader-ease-out);
  will-change: opacity, transform;
}
.site-preloader.is-loading .site-preloader__signature-stage { opacity: 1; }
.site-preloader.is-fading .site-preloader__signature-stage {
  opacity: 0;
  transition-duration: .45s;
  transition-timing-function: var(--preloader-ease);
}
.site-preloader__signature-stage.is-impact {
  animation: site-preloader-impact 2.25s cubic-bezier(.01, .95, .02, 1), site-preloader-drift 7s ease-in-out infinite alternate;
}
.site-preloader__signature,
.site-preloader__signature-variant {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--signature-width, 100%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.site-preloader__signature {
  height: auto;
  max-width: none;
  display: block;
}
.site-preloader__signature-variant {
  aspect-ratio: 1507 / 642;
  display: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
@keyframes site-preloader-impact {
  from { transform: translate(-50%, -50%) scale(1.22); }
  to { transform: translate(-50%, -50%) scale(1); }
}
@keyframes site-preloader-drift {
  from { translate: 0 -4px; }
  to { translate: 0 4px; }
}
.site-preloader.is-curtain { clip-path: inset(0 0 100% 0); }
@media (prefers-reduced-motion: reduce) {
  .site-preloader,
  .site-preloader *,
  .site-preloader::before { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .site-preloader__title,
  .site-preloader__date { transform: none; }
}

.top_bar_right:has(> .contact-instagram-link) {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

.contact-instagram-link {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  color: var(--fw_dark_purple_50, #82808c);
  transition: color 180ms ease;
}

.contact-instagram-link:hover,
.contact-instagram-link:focus-visible {
  color: var(--fw_dark_purple, #100d24);
}

.contact-instagram-link svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

.intro_date_h2.u-h2 {
  margin-bottom: 1rem;
}

@media (max-width: 767px) {
  .contact_section {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .contact_section .contact_txt {
    margin-bottom: 1.5rem;
  }

  .imprint_layout,
  .data_layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .imprint_layout > *,
  .data_layout > * {
    grid-column: 1 / -1;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .data_layout > div:empty {
    display: none;
  }
}
/* Keep the selected phone scene visible after a phone rotates to landscape. */
html.site-mobile-hero-spline .werk_hero_spline.is-mobile-scene {
  display: block !important;
  position: relative !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Slightly enlarge the home hero grain without changing its animation. */
#fw-hero-grained::before {
  scale: 1.08;
}

/* Stop the viewport-sized grain animation above the 3D hero on phones. */
html.site-mobile-hero-spline #fw-hero-grained::before {
  animation: none !important;
}

/* Shared image entrance: the visible frame stays fixed while the image settles.
   Slider tracks and controls keep their own motion. */
@media (prefers-reduced-motion: no-preference) {
  [data-site-image-reveal="media"],
  [data-site-image-reveal="plain"],
  [data-site-image-reveal="slider"] {
    opacity: 0;
    transition: opacity .4s ease-out;
    transition-delay: var(--site-image-delay, 0ms);
  }

  :is([data-site-image-reveal="media"], [data-site-image-reveal="plain"], [data-site-image-reveal="slider"]).is-site-image-in {
    opacity: 1;
  }

  [data-site-image-reveal="media"] {
    overflow: hidden;
  }

  [data-site-image-reveal="media"] img {
    scale: 1.075;
    transition: scale 1.2s cubic-bezier(0, 0, .2, 1), transform .62s cubic-bezier(.33, 1, .68, 1);
    transition-delay: var(--site-image-delay, 0ms);
  }

  [data-site-image-reveal="media"].is-site-image-in img {
    scale: 1;
  }

  [data-site-image-reveal="instagram"] {
    opacity: 0;
    translate: 0 20px;
    transition: opacity 1s cubic-bezier(.33, 1, .68, 1), translate 1s cubic-bezier(.33, 1, .68, 1);
    transition-delay: var(--site-image-delay, 0ms);
  }

  [data-site-image-reveal="instagram"].is-site-image-in {
    opacity: 1;
    translate: 0 0;
  }
}

/* Only lightbox images receive the additional hover zoom. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .site-lightbox-trigger[data-site-image-reveal="media"].is-site-image-in:hover img,
  .site-lightbox-trigger[data-site-image-reveal="media"].is-site-image-in:focus-visible img {
    transform: scale(var(--fw-lightbox-zoom, var(--fw-image-zoom, 1.035)));
  }
}

/* The same left-to-right divider reveal as the menu, on the work groups. */
@media (prefers-reduced-motion: no-preference) {
  .accordion_section .accordion_item[data-accordion-line-ready] {
    position: relative;
    border-bottom-color: transparent;
  }

  .accordion_section .accordion_item[data-accordion-line-ready]:first-child {
    border-top-color: transparent;
  }

  .accordion_section .accordion_item[data-accordion-line-ready]::after,
  .accordion_section .accordion_item[data-accordion-line-ready]:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: .5px;
    background: var(--FW_Dark_Purple, var(--fw_dark_purple, #06021a));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .7s cubic-bezier(.33, 1, .68, 1);
    transition-delay: calc(var(--accordion-line-index, 0) * 55ms);
    pointer-events: none;
  }

  .accordion_section .accordion_item[data-accordion-line-ready]::after { bottom: 0; }
  .accordion_section .accordion_item[data-accordion-line-ready]:first-child::before { top: 0; }
  .accordion_section .accordion_item[data-accordion-line-ready].is-accordion-line-in::after,
  .accordion_section .accordion_item[data-accordion-line-ready].is-accordion-line-in:first-child::before {
    transform: scaleX(1);
  }
}