/* =============================================================================
   GCO Effects – Basis
   Mechanik der Effekte. Farben, Tempo und Wege kommen aus den Variablen unten
   und werden pro Website überschrieben, nicht in dieser Datei.
   ========================================================================== */

:root {
  --fx-duration: .6s;
  --fx-duration-fast: .35s;
  --fx-ease: cubic-bezier(.22, .61, .36, 1);
  --fx-distance: 24px;
  --fx-scale-from: .94;
  --fx-blur-from: 6px;
  /* Akzentfarbe der Effekte. Kommt aus GCO Base, wenn es da ist, sonst
     nimmt sie die Textfarbe an -- damit laeuft das Plugin auch allein. */
  --fx-accent: var(--brand-color, currentColor);
  --fx-on-surface: var(--text, currentColor);
  --fx-surface: var(--surface, #f4f4f6);
  --fx-line: var(--line, rgba(136, 136, 144, .45));

  /* Pfeilform des hover-Effekts, pro Website austauschbar */
  --fx-hover-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M.7 7h27.6'/%3E%3Cpath d='M22.3 1l6 6-6 6'/%3E%3C/svg%3E");

  /* Langer Linienpfeil fuer die Variante arrow-below (52 x 18) */
  --fx-hover-arrow-long: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 18' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 9h48'/%3E%3Cpath d='M38.5 1.5 49 9l-10.5 7.5'/%3E%3C/svg%3E");

  /* Scroll-Engine: Anteil der Bildschirmhöhe */
  --fx-start: .88;   /* Auslöselinie von oben */
  --fx-portal-length: 220vh; /* Scrollstrecke des portal-Effekts */
  /* --fx-portal-mask: url('/wp-content/uploads/maske-p.svg'); */
  --fx-window: .18;  /* Scrollweg einer Einzelanimation */
}

/* Auf dunklen Sektionen dreht GCO Base die Textfarben auf ihre hellen
   Varianten. Die Akzentfarbe der Effekte zieht mit. */
.inverse {
  --fx-accent: var(--brand-color-light, var(--brand-color, currentColor));
  --fx-on-surface: var(--text-light, #ffffff);
}

/* ---------- Grundzustand: erst wenn JS übernommen hat ---------- */
.gco-fx-ready [data-fx="reveal"],
.gco-fx-ready [data-fx="stagger"] > * {
  opacity: 0;
  transform: translate3d(var(--fx-tx, 0), var(--fx-ty, var(--fx-distance)), 0)
             scale(var(--fx-sc, 1));
  transition: opacity var(--fx-duration) var(--fx-ease),
              transform var(--fx-duration) var(--fx-ease),
              filter var(--fx-duration) var(--fx-ease);
  will-change: opacity, transform;
}

.gco-fx-ready [data-fx="reveal"].is-in,
.gco-fx-ready [data-fx="stagger"] > .is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- Richtungen ---------- */
[data-fx-dir="down"]  { --fx-ty: calc(var(--fx-distance) * -1); }
[data-fx-dir="left"]  { --fx-ty: 0; --fx-tx: var(--fx-distance); }
[data-fx-dir="right"] { --fx-ty: 0; --fx-tx: calc(var(--fx-distance) * -1); }
[data-fx-dir="none"]  { --fx-ty: 0; }

/* ---------- Varianten ---------- */
[data-fx-variant="zoom"] { --fx-sc: var(--fx-scale-from); }

.gco-fx-ready [data-fx-variant="blur"] { filter: blur(var(--fx-blur-from)); }

[data-fx-variant="mask"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--fx-duration) var(--fx-ease),
              opacity var(--fx-duration) var(--fx-ease);
}

[data-fx-variant="mask"].is-in { clip-path: inset(0 0 0 0); }

/* ---------- Parallax + Überblendung ---------- */
[data-fx="parallax"] {
  will-change: transform;
}

[data-fx="cross"] {
  position: relative;
}

[data-fx="cross"] > * {
  will-change: opacity, transform;
}

/* ---------- hero: Vollbild-Medien ---------- */
[data-fx="hero"] {
  position: relative;
  overflow: hidden;
  height: var(--fx-hero-height, 100vh);
  border-radius: calc(var(--fx-hero-radius, 0px) * var(--fx-edge, 0));
}

[data-fx="hero"] .fx-hero-media {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--fx-hero-overflow, 10%) * -1);
  bottom: calc(var(--fx-hero-overflow, 10%) * -1);
  will-change: transform;
}

[data-fx="hero"] .fx-hero-media img,
[data-fx="hero"] .fx-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

[data-fx="hero"] .fx-hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- zoom: Bild bewegt sich im Rahmen ---------- */
[data-fx="zoom"] {
  overflow: hidden;
  display: block;
}

[data-fx="zoom"] img,
[data-fx="zoom"] video,
[data-fx="zoom"] .fx-zoom-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform: scale(var(--fx-zoom-from, 1.12));
}

/* ---------- expand: Bild wächst auf volle Breite ---------- */
[data-fx="expand"] {
  position: relative;
  display: block;
  height: var(--fx-expand-height, 76vh);
}

[data-fx="expand"] .fx-expand-media {
  /* Form pro Website überschreiben: beliebige border-radius-Werte, auch je Ecke */
  --fx-expand-radius-from: var(--fx-radius-from, 50%);
  --fx-expand-radius-to: var(--fx-radius-to, 0px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: calc(
    var(--fx-expand-radius-from) +
    (var(--fx-expand-radius-to) - var(--fx-expand-radius-from)) * var(--fx-p, 0)
  );
  will-change: width, height, transform, border-radius;
}

/* Freie Form über eine Maske (SVG), z. B. organische Form oder Logo */
[data-fx="expand"].fx-expand--mask .fx-expand-media {
  border-radius: 0;
  -webkit-mask-image: var(--fx-expand-mask, var(--fx-portal-mask, none));
          mask-image: var(--fx-expand-mask, var(--fx-portal-mask, none));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

[data-fx="expand"] .fx-expand-media img,
[data-fx="expand"] .fx-expand-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- portal: Kreis wächst aus der Mitte ---------- */
[data-fx="portal"] {
  position: relative;
  /* Mit mehreren Ebenen braucht jede ihr eigenes Stueck Scrollstrecke.
     --fx-portal-count setzt das Skript. */
  height: calc(var(--fx-portal-length, 220vh) * var(--fx-portal-count, 1));
}

[data-fx="portal"] .fx-portal-stage {
  position: sticky;
  top: var(--fx-portal-top, 0px);
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

[data-fx="portal"] .fx-under,
[data-fx="portal"] .fx-over {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: transform, clip-path;
}

[data-fx="portal"] .fx-under > img,
[data-fx="portal"] .fx-over > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

[data-fx="portal"] .fx-over {
  clip-path: circle(6% at 50% 50%);
}

/* Freie Maske (SVG, z. B. Logo). Datei pro Website über --fx-portal-mask setzen. */
[data-fx="portal"].fx-portal--mask .fx-over {
  clip-path: none;
  -webkit-mask-image: var(--fx-portal-mask, none);
          mask-image: var(--fx-portal-mask, none);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: var(--fx-portal-mask-position, center);
          mask-position: var(--fx-portal-mask-position, center);
  -webkit-mask-size: 10% auto;
          mask-size: 10% auto;
}

[data-fx="portal"] .fx-caption {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

/* ---------- SVG-Scroll-Animation ---------- */
[data-fx="svg"] svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

[data-fx="svg"] [data-a] {
  transform-box: fill-box;
  transform-origin: center;
}

[data-fx="svg"] [data-a="grow"]  { transform-origin: left center; }
[data-fx="svg"] [data-a="growy"] { transform-origin: center top; }

[data-fx="svg"] [data-a="draw"] {
  fill: none;
  stroke: var(--fx-stroke, var(--fx-accent));
  stroke-width: var(--fx-stroke-width, 1);
}

/* ---------- Zähler ---------- */
[data-fx="count"] {
  font-variant-numeric: tabular-nums;
}


/* ---------- hover: Knopf wächst, Schatten kommt, Pfeil rückt vor ----------

   Kein Scroll-Effekt, kein JavaScript – reines CSS. Steht trotzdem hier und
   heißt trotzdem data-fx, damit die Bedienung einheitlich bleibt: Attribut
   ans Element, Feinheiten über Variablen.

   Vorbild ist der Knopf der PEG. Drei Dinge gleichzeitig, alle auf derselben
   Kurve: Der Knopf wächst um 3 %, verankert links – er dehnt sich also nach
   rechts, statt zu wandern. Ein weicher zweilagiger Schatten kommt dazu. Und
   in der Variante „arrow" rückt ein Pfeil vier Pixel vor.

   Die Pfeilform steckt in --fx-hover-arrow und ist pro Website austauschbar,
   wie die Maske beim portal-Effekt. Farbe: currentColor, also die Textfarbe
   des Knopfes – damit folgt der Pfeil dem, was im Typo-Reiter eingestellt ist.
   -------------------------------------------------------------------------- */

[data-fx="hover"] {
  position: relative;
  transform-origin: left center;
  will-change: transform;
  transition: transform var(--fx-hover-duration, .45s) var(--fx-ease),
              box-shadow var(--fx-hover-duration, .45s) var(--fx-ease);
}

[data-fx="hover"]:hover,
[data-fx="hover"]:focus-visible {
  z-index: 2;
  transform: scale(var(--fx-hover-scale, 1.03));
  box-shadow: var(--fx-hover-shadow,
              0 2px 6px rgba(20, 20, 25, .06),
              0 8px 22px rgba(20, 20, 25, .09));
}

/* Variante arrow: Pfeil links, rückt beim Überfahren vor ------------------- */

[data-fx="hover"][data-fx-variant~="arrow"] {
  /* Abstand vom Rand + Pfeil + Luft dahinter. Die Luft muss mitgerechnet
     werden, sonst klebt der Text am Pfeil. */
  padding-left: calc(var(--fx-hover-arrow-x, 12px)
                   + var(--fx-hover-arrow-w, 30px)
                   + var(--fx-hover-arrow-gap, 14px));
}

[data-fx="hover"][data-fx-variant~="arrow"]::before {
  content: "";
  position: absolute;
  left: var(--fx-hover-arrow-x, 12px);
  top: 50%;
  width: var(--fx-hover-arrow-w, 30px);
  height: var(--fx-hover-arrow-h, 14px);
  margin-top: calc(var(--fx-hover-arrow-h, 14px) / -2);
  background: var(--fx-hover-arrow-color, var(--fx-accent, currentColor));
  -webkit-mask: var(--fx-hover-arrow) left center / contain no-repeat;
  mask: var(--fx-hover-arrow) left center / contain no-repeat;
  transition: transform var(--fx-hover-duration, .45s) var(--fx-ease);
}

[data-fx="hover"][data-fx-variant~="arrow"]:hover::before,
[data-fx="hover"][data-fx-variant~="arrow"]:focus-visible::before {
  transform: translateX(var(--fx-hover-arrow-shift, 4px));
}

/* Variante lift: nur heben, ohne Wachsen – für Karten und Kacheln ---------- */

[data-fx="hover"][data-fx-variant~="lift"] {
  transform-origin: center;
}

[data-fx="hover"][data-fx-variant~="lift"]:hover,
[data-fx="hover"][data-fx-variant~="lift"]:focus-visible {
  transform: translateY(var(--fx-hover-lift, -4px));
}


/* Variante arrow-below: langer Linienpfeil unter dem Inhalt ---------------

   Der Pfeil der PEG-Kacheln: sitzt nicht links neben dem Text, sondern als
   eigene Zeile darunter, ist laenger und flacher und rueckt beim Ueberfahren
   weiter vor. Belegt ::after, nicht ::before -- damit vertraegt er sich mit
   der Karte fx-card, die ::before fuer ihre Flaeche braucht.

   Zwei Plaetze, dieselbe Form: entweder am Hover-Element selbst (Variante
   arrow-below) oder an einem Kind mit der Klasse fx-hover-arrow. Das Kind
   braucht man, sobald die Kachel eine Zeile ist -- Icon links, Text rechts:
   Dort gehoert der Pfeil unter den TEXT, nicht unter die ganze Zeile.
   -------------------------------------------------------------------------- */

[data-fx="hover"][data-fx-variant~="arrow-below"]::after,
[data-fx="hover"] .fx-hover-arrow::after {
  content: "";
  display: block;
  position: relative;
  z-index: 1;
  align-self: flex-start;
  width: var(--fx-hover-arrow-w, 52px);
  height: var(--fx-hover-arrow-h, 18px);
  margin-top: var(--fx-hover-arrow-top, 12px);
  background: var(--fx-hover-arrow-color, var(--fx-accent, currentColor));
  -webkit-mask: var(--fx-hover-arrow-long) left center / contain no-repeat;
          mask: var(--fx-hover-arrow-long) left center / contain no-repeat;
  opacity: var(--fx-hover-arrow-opacity, .85);
  transition: transform var(--fx-hover-duration, .45s) var(--fx-ease),
              opacity var(--fx-hover-duration, .45s) var(--fx-ease);
}

[data-fx="hover"][data-fx-variant~="arrow-below"]:hover::after,
[data-fx="hover"][data-fx-variant~="arrow-below"]:focus-visible::after,
[data-fx="hover"]:hover .fx-hover-arrow::after,
[data-fx="hover"]:focus-visible .fx-hover-arrow::after {
  transform: translateX(var(--fx-hover-arrow-shift-long, 8px));
  opacity: 1;
}

/* Teile innerhalb des Hover-Elements ---------------------------------------

   Eine Kachel besteht aus mehr als ihrer Aussenkante. Wer will, haengt an
   Icon und Bild eine eigene Klasse, dann bewegen die sich staerker mit --
   das ist der Trick, der die PEG-Kacheln lebendig macht: Die Kachel waechst
   kaum, das Bild darin deutlich. Ohne diese Klassen passiert nichts.
   -------------------------------------------------------------------------- */

/* Der Link ueber der ganzen Kachel ---------------------------------------

   Ein Link, der nur um die Ueberschrift liegt, laesst den Rest der Kachel
   tot: Der Mauszeiger bleibt ein Pfeil, und ein Klick neben den Text
   passiert nichts. Diese Klasse spannt ihn ueber die ganze Kachel, ohne
   dass die Gliederung leidet -- der Link bleibt im Quelltext, wo er
   hingehoert, nur seine Flaeche waechst. Ueberall darauf wird der
   Mauszeiger zur Hand, und ein Klick fuehrt zum Ziel.

   Gilt nicht nur fuer hover: In jedem Baustein der Bibliothek, der ohnehin
   positioniert ist, reicht die Klasse am Link. Fuer alles andere gibt es
   fx-link-stage -- eine Kachel, die sonst nichts weiter tut.
   -------------------------------------------------------------------------- */

.fx-link-stage { position: relative; }

.fx-hover-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}

/* Text in der Kachel soll trotzdem markierbar bleiben. */
.fx-hover-link { position: static; }

/* Die Hand ueber der ganzen Kachel, nicht nur ueber der Schrift. Die
   Flaeche des Links liefert sie ohnehin; diese Regel faengt die Faelle ab,
   in denen ein Kind darueber liegt. */
[data-fx="hover"]:has(.fx-hover-link),
[data-fx="flyout"]:has(.fx-hover-link),
.fx-card:has(.fx-hover-link),
.fx-link-stage:has(.fx-hover-link) { cursor: pointer; }

[data-fx="hover"] .fx-hover-icon {
  transform-origin: center;
  will-change: transform;
  transition: transform var(--fx-hover-duration-slow, .5s) var(--fx-ease);
}

[data-fx="hover"]:hover .fx-hover-icon,
[data-fx="hover"]:focus-visible .fx-hover-icon {
  transform: scale(var(--fx-hover-icon-scale, 1.08));
}

/* Bildrahmen: der Rahmen waechst, das Bild darin noch einmal -- zusammen
   ergibt das den weichen Zug ins Bild hinein statt eines harten Zooms. */
[data-fx="hover"] .fx-hover-media {
  overflow: hidden;
  transform-origin: center;
  will-change: transform;
  transition: transform var(--fx-hover-duration-slow, .5s) var(--fx-ease);
}

[data-fx="hover"]:hover .fx-hover-media,
[data-fx="hover"]:focus-visible .fx-hover-media {
  transform: scale(var(--fx-hover-media-scale, 1.10));
}

[data-fx="hover"] .fx-hover-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* fx-hover-img fuer alles, was kein <img> ist -- eine Flaeche mit
   Hintergrundbild etwa. Maße bleiben dort Sache des Projekts. */
[data-fx="hover"] .fx-hover-media img,
[data-fx="hover"] .fx-hover-img {
  transform-origin: center;
  will-change: transform;
  transition: transform var(--fx-hover-duration-slower, .6s) var(--fx-ease);
}

[data-fx="hover"]:hover .fx-hover-media img,
[data-fx="hover"]:focus-visible .fx-hover-media img,
[data-fx="hover"]:hover .fx-hover-img,
[data-fx="hover"]:focus-visible .fx-hover-img {
  transform: scale(var(--fx-hover-img-scale, 1.06));
}

/* ---------- Bühne für parallax (und alles, was beschnitten wandert) -------

   Nimmt die vier Regeln ab, die man sonst jedes Mal von Hand schreibt:
   Bühne mit fester Höhe und Beschnitt, Inhalt oben und unten größer als die
   Bühne, damit beim Wandern kein Rand auftaucht. Über die ganze Breite: die
   Klasse full-bleed aus GCO Base auf die Section.
   -------------------------------------------------------------------------- */

.fx-stage {
  position: relative;
  overflow: hidden;
  height: var(--fx-stage-height, 60vh);
}

.fx-stage > [data-fx="parallax"] {
  position: absolute;
  inset: calc(var(--fx-stage-bleed, 12%) * -1) 0;
}

.fx-stage > [data-fx="parallax"] img,
.fx-stage > [data-fx="parallax"] video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- fx-mask: Inhalt in eine freie Form schneiden -----------------

   Die Form kommt als SVG in --fx-mask, genau wie beim portal-Effekt. Alles
   im Element wird darauf beschnitten: ein Bild, ein Video, ein ganzer
   Schieberegler. Die Form selbst bleibt beim Scrollen stehen; was sich
   bewegt, bewegt sich darin.

   fx-mask--free loest das Element zusaetzlich aus dem Fluss und setzt es
   frei ueber seine Bühne -- fuer ein grosses Signet, das ueber den Rand der
   Sektion hinausragen soll. Die !important sind hier noetig: Bricks schreibt
   Position und Breite mit der Element-ID, und die schlaegt jede Klasse.
   -------------------------------------------------------------------------- */

.fx-mask {
  position: relative;
  -webkit-mask: var(--fx-mask) no-repeat center / contain;
          mask: var(--fx-mask) no-repeat center / contain;
}

.fx-mask > * {
  width: 100%;
  height: 100%;
}

.fx-mask--free {
  position: absolute !important;
  left:   var(--fx-mask-left, 16%) !important;
  top:    var(--fx-mask-top, -16%) !important;
  right:  auto !important;
  bottom: auto !important;
  width:  var(--fx-mask-width, 66.5%) !important;
  height: var(--fx-mask-height, 107%) !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: var(--fx-mask-z, 5);
  pointer-events: none;
}


/* ---------- pan: ruhige Dauerbewegung im Bild ----------------------------

   Ken Burns, endlos, hin und zurueck. Reines CSS, kein Skript, kein Scroll.
   Fuer Hintergruende, die stehen bleiben und trotzdem nicht tot wirken
   sollen -- typisch in einer Maske oder hinter einer Ueberschrift.

   Merksatz: --fx-pan-scale muss mindestens 1 + 2 x --fx-pan-x sein, sonst
   laeuft das Bild an den Rand und es entsteht eine Luecke.
   -------------------------------------------------------------------------- */

[data-fx="pan"] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  will-change: transform;
  animation: fx-pan var(--fx-pan-duration, 18s) ease-in-out infinite alternate;
}

[data-fx="pan"] img,
[data-fx="pan"] video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes fx-pan {
  from { transform: scale(var(--fx-pan-scale, 1.22)) translateX(var(--fx-pan-x, 8%)) translateZ(0); }
  to   { transform: scale(var(--fx-pan-scale, 1.22)) translateX(calc(var(--fx-pan-x, 8%) * -1)) translateZ(0); }
}


/* ---------- intro: einmaliger Auftritt beim Seitenaufruf -----------------

   Kein Scroll-Effekt: laeuft einmal, sobald die Seite da ist. Gedacht fuer
   das, was ohnehin sofort im Bild steht -- der Hero. Alles weiter unten
   gehoert zu reveal, sonst ist der Auftritt vorbei, bevor jemand hinsieht.

   WICHTIG: nicht auf das maskierte Element selbst setzen, sondern auf ein
   Kind darin. Maske und Skalierung zusammen laesst der Browser ruckeln.
   -------------------------------------------------------------------------- */

[data-fx="intro"] {
  transform-origin: center;
  backface-visibility: hidden;
  will-change: opacity, transform;
  opacity: 0;
  transform: scale(var(--fx-intro-scale, .75)) translateZ(0);
  animation: fx-intro var(--fx-intro-duration, 1.4s)
             var(--fx-intro-ease, cubic-bezier(.16, .84, .32, 1))
             var(--fx-intro-delay, .2s) forwards;
}

@keyframes fx-intro {
  to { opacity: 1; transform: scale(1) translateZ(0); }
}


/* ---------- fx-slider: Bricks-Schieberegler baendigen ---------------------

   Der verschachtelte Schieberegler von Bricks bringt Splide mit. In einer
   Maske oder einer Buehne fehlt ihm die Hoehe, die Slides fallen auf ihre
   Inhaltshoehe zusammen und die Punkte stoeren. Diese Klasse raeumt das auf
   und macht aus dem harten Wechsel eine lange, weiche Blende.

   Aufbau:  Div .fx-mask.fx-slider  →  Schieberegler (verschachtelt)
                                       →  Slide  →  Div [data-fx="pan"]
   Schiebereglereinstellungen: Typ Ueberblenden, Hoehe 100 %.
   Die Punkte sind aus; wer sie will, setzt zusaetzlich fx-slider--dots.
   -------------------------------------------------------------------------- */

.fx-slider .brxe-slider-nested {
  position: absolute;
  inset: 0;
}

.fx-slider .brxe-slider-nested,
.fx-slider .splide,
.fx-slider .splide__track,
.fx-slider .splide__list,
.fx-slider .splide__slide,
.fx-slider .splide__slide > * {
  height: 100% !important;
}

/* Ohne Breite und flex faellt das Bricks-Div im Slide auf Breite 0 zusammen. */
.fx-slider .splide__slide > * {
  width: 100% !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;
}

.fx-slider .splide--fade > .splide__track > .splide__list > .splide__slide,
.fx-slider .splide__slide {
  overflow: hidden;
  will-change: opacity;
  transition: opacity var(--fx-slide-fade, 3s)
              var(--fx-slide-ease, cubic-bezier(.45, 0, .25, 1)) !important;
  transition-property: opacity !important;
}

.fx-slider .splide__pagination {
  opacity: 0;
  pointer-events: none;
}

.fx-slider--dots .splide__pagination {
  opacity: 1;
  pointer-events: auto;
}


/* ---------- fx-card: Karte mit ruhiger Flaeche ---------------------------

   Fuer Kacheln, die ein Bild als Hintergrund tragen und trotzdem lesbar
   bleiben sollen: eine Lage darueber nimmt dem Bild die Farbe und hellt es
   auf. backdrop-filter statt filter, damit nur der Hintergrund betroffen
   ist und nicht der Text darauf.

   Die Flaeche liegt auf ::before. Der Pfeil links (Variante arrow) liegt
   ebenfalls auf ::before -- auf einer Karte also arrow-below nehmen.
   -------------------------------------------------------------------------- */

.fx-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--fx-card-radius, 0px);
  /* Fuellt die Rasterzeile: Alle Karten einer Reihe sind damit gleich hoch,
     egal wie lang ihr Text ist. Der Pfeil unten rutscht ans untere Ende. */
  height: 100%;
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center;
}

/* Der lange Pfeil einer Karte sitzt unten, damit er in einer Reihe
   nebeneinanderliegender Karten auf einer Linie steht. */
.fx-card[data-fx-variant~="arrow-below"]::after,
.fx-card .fx-hover-arrow { margin-top: auto; }

.fx-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  -webkit-backdrop-filter: grayscale(var(--fx-card-gray, 1));
          backdrop-filter: grayscale(var(--fx-card-gray, 1));
  background-color: var(--fx-card-wash, rgba(235, 234, 236, .55));
}

/* Der gestreckte Link bleibt ausgenommen: Er muss position: static
   behalten, sonst spannt sich seine Flaeche nur ueber sich selbst statt
   ueber die ganze Karte. */
.fx-card > *:not(.fx-hover-link) {
  position: relative;
  z-index: 1;
}


/* ---------- fx-clamp: Text nach N Zeilen abschneiden ---------------------

   Fuer Kacheln aus dynamischen Daten, die sonst unterschiedlich hoch
   werden. Die Zeilenhoehe wird NICHT gesetzt -- sie kommt aus dem
   Typo-Reiter und soll ihre eine Quelle behalten. Die Einheit lh liest
   genau diesen Wert; fuer aeltere Browser rechnet der Fallback mit em.

   Zeilenzahl am Element:  style="--fx-clamp-lines: 2"
   -------------------------------------------------------------------------- */

.fx-clamp {
  max-height: calc(var(--fx-clamp-lines, 3) * 1lh);
  overflow: hidden;
  flex: 0 0 auto;
}

@supports not (height: 1lh) {
  .fx-clamp {
    max-height: calc(var(--fx-clamp-lines, 3) * var(--fx-clamp-lh, 1.3) * 1em);
  }
}


/* ---------- edge: Grafik am Rand, angeschnitten, faehrt ein --------------

   Das grosse Signet in der Ecke einer Sektion: haengt ueber den Rand
   hinaus, wird dort abgeschnitten, und faehrt beim Erscheinen von aussen
   herein, waehrend es aufblendet. Danach steht es still.

   Aufbau:  Section .fx-edge-stage  →  Bild data-fx="edge"
   Ecke ueber data-fx-corner: top-right (Standard), top-left,
   bottom-right, bottom-left.
   -------------------------------------------------------------------------- */

.fx-edge-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.fx-edge-stage > *:not([data-fx="edge"]) {
  position: relative;
  z-index: 1;
}

[data-fx="edge"] {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: var(--fx-edge-y, 24px);
  right: 0;
  left: auto;
  bottom: auto;
  width: var(--fx-edge-width, clamp(200px, 20vw, 320px));
  height: auto;
  opacity: var(--fx-edge-opacity, .7);
  transform: translateX(var(--fx-edge-cut, 22%));
  transition: opacity var(--fx-edge-duration, 1.1s) var(--fx-ease),
              transform var(--fx-edge-duration, 1.1s) var(--fx-ease);
}

[data-fx="edge"][data-fx-corner="top-left"],
[data-fx="edge"][data-fx-corner="bottom-left"] {
  left: 0;
  right: auto;
  transform: translateX(calc(var(--fx-edge-cut, 22%) * -1));
}

[data-fx="edge"][data-fx-corner="bottom-left"],
[data-fx="edge"][data-fx-corner="bottom-right"] {
  top: auto;
  bottom: var(--fx-edge-y, 24px);
}

/* Ruhelage vor dem Einfahren -- nur solange das Skript laeuft. Faellt es
   aus, steht die Grafik sofort an ihrem Platz. */
.gco-fx-ready [data-fx="edge"]:not(.is-in) {
  opacity: 0;
  transform: translateX(calc(var(--fx-edge-cut, 22%) + var(--fx-edge-slide, 80px)));
}

.gco-fx-ready [data-fx="edge"][data-fx-corner="top-left"]:not(.is-in),
.gco-fx-ready [data-fx="edge"][data-fx-corner="bottom-left"]:not(.is-in) {
  transform: translateX(calc((var(--fx-edge-cut, 22%) + var(--fx-edge-slide, 80px)) * -1));
}



/* ---------- Punktleiste zur Folge mehrerer Bilder ------------------------

   Vorbild: evanshalshaw.com/more/bondcars. Ein Punkt je Bild, der aktive
   wird groesser und nimmt die Akzentfarbe. Die Leiste baut das Skript
   selbst, sobald mehr als eine .fx-over-Ebene da ist.
   -------------------------------------------------------------------------- */

[data-fx="portal"] .fx-portal-dots {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: var(--fx-dots-x, 28px);
  left: auto;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--fx-dots-gap, 14px);
  pointer-events: none;
}

[data-fx="portal"][data-fx-dots="left"] .fx-portal-dots {
  right: auto;
  left: var(--fx-dots-x, 28px);
}

.fx-portal-dot {
  width: var(--fx-dot-size, 10px);
  height: var(--fx-dot-size, 10px);
  border-radius: 50%;
  background: var(--fx-dot, var(--fx-line));
  transform-origin: center;
  transition: background var(--fx-duration-fast, .3s) var(--fx-ease),
              transform var(--fx-duration-fast, .3s) var(--fx-ease);
}

.fx-portal-dot.is-active {
  background: var(--fx-dot-active, var(--fx-accent));
  transform: scale(var(--fx-dot-active-scale, 1.5));
}

@media (max-width: 767px) {
  [data-fx="portal"] .fx-portal-dots { --fx-dots-x: 14px; --fx-dots-gap: 10px; }
}


/* ---------- fade: Deckkraft folgt der Scrollposition ---------------------

   Verallgemeinerung des Startseiten-Overlays der PEG: Beim Herunterscrollen
   blendet das Element aus, beim Hochscrollen kommt es zurueck. Anders als
   reveal ist das kein Schalter, sondern ein Verlauf -- die Deckkraft haengt
   an jedem Punkt der Scrollposition.

   Gerechnet wird ueber die Reise des Elements durchs Bild: 0 = gerade unten
   aufgetaucht, 1 = gerade oben verschwunden. Einblenden statt ausblenden:
   data-fx-from="0" data-fx-to="1".
   -------------------------------------------------------------------------- */

[data-fx="fade"] {
  will-change: opacity;
}


/* ---------- flyout: Feld am Bildschirmrand, klappt auf -------------------

   Ein Griff steht fest am Bildschirmrand; beim Ueberfahren faehrt das Feld
   daneben auf. Auf Geraeten ohne Hover uebernimmt ein Tipp, sonst kaeme man
   an den Inhalt nicht heran.

   Aufbau in Bricks:
     Div  data-fx="flyout" data-fx-side="bottom" data-fx-anchor="right"
     ├ Div  class="fx-flyout-handle"   Griff, immer sichtbar
     └ Div  class="fx-flyout-panel"    Inhalt, klappt auf

   Vier Kanten: left und right klappen zur Seite auf, bottom und top nach
   oben bzw. unten -- derselbe Baustein um 90 Grad gedreht.

   Farben aus GCO Base (surface / text), Schrift durch Vererbung: Was im
   Feld steht, traegt seine .t-Klassen wie jeder andere Text auch.
   -------------------------------------------------------------------------- */

[data-fx="flyout"] {
  position: fixed;
  z-index: var(--fx-flyout-z, 60);
  display: flex;
  align-items: center;
  width: max-content;
  max-width: calc(100vw - 2 * var(--pad-x, 25px));
  overflow: hidden;
  background: var(--fx-flyout-bg, var(--fx-surface));
  color: var(--fx-flyout-text, var(--fx-on-surface));
  border-radius: var(--fx-flyout-radius, 0px);
  box-shadow: var(--fx-flyout-shadow,
              0 2px 6px rgba(20, 20, 25, .08),
              0 10px 28px rgba(20, 20, 25, .14));
  transition: box-shadow var(--fx-duration, .5s) var(--fx-ease);
}

/* ---- Lage: senkrechte Kanten ---- */

[data-fx="flyout"],
[data-fx="flyout"][data-fx-side="left"] {
  left: var(--fx-flyout-x, 0px);
  right: auto;
}

[data-fx="flyout"][data-fx-side="right"] {
  left: auto;
  right: var(--fx-flyout-x, 0px);
  flex-direction: row-reverse;
}

[data-fx="flyout"],
[data-fx="flyout"][data-fx-anchor="top"] {
  top: var(--fx-flyout-y, 30%);
  bottom: auto;
  transform: none;
}

[data-fx="flyout"][data-fx-anchor="bottom"] {
  top: auto;
  bottom: var(--fx-flyout-y, 6vh);
}

[data-fx="flyout"][data-fx-anchor="center"] {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

/* ---- Lage: waagerechte Kanten ----
   Hier bestimmt --fx-flyout-width die Breite des ganzen Feldes und
   --fx-flyout-height die Hoehe, auf die es aufklappt. */

[data-fx="flyout"][data-fx-side="bottom"],
[data-fx="flyout"][data-fx-side="top"] {
  flex-direction: column;
  align-items: stretch;
  width: var(--fx-flyout-width, 280px);
  left: var(--fx-flyout-x, 0px);
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
}

[data-fx="flyout"][data-fx-side="bottom"] {
  flex-direction: column-reverse;
  bottom: var(--fx-flyout-y, 0px);
}

[data-fx="flyout"][data-fx-side="top"] { top: var(--fx-flyout-y, 0px); }

[data-fx="flyout"][data-fx-side="bottom"][data-fx-anchor="right"],
[data-fx="flyout"][data-fx-side="top"][data-fx-anchor="right"] {
  left: auto;
  right: var(--fx-flyout-x, 0px);
}

[data-fx="flyout"][data-fx-side="bottom"][data-fx-anchor="center"],
[data-fx="flyout"][data-fx-side="top"][data-fx-anchor="center"] {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* ---- Form ----
   round = rundum rund: zusammengeklappt ein Kreis, offen eine Pille.
   half  = Halbkreis: die Seite an der Kante bleibt gerade.
   rect  = Rechteck, Ecken ueber --fx-flyout-radius. */

[data-fx="flyout"][data-fx-shape="round"] { border-radius: 999px; }

[data-fx="flyout"][data-fx-shape="half"] { border-radius: 999px 0 0 999px; }
[data-fx="flyout"][data-fx-shape="half"][data-fx-side="left"]   { border-radius: 0 999px 999px 0; }
[data-fx="flyout"][data-fx-shape="half"][data-fx-side="bottom"] { border-radius: 999px 999px 0 0; }
[data-fx="flyout"][data-fx-shape="half"][data-fx-side="top"]    { border-radius: 0 0 999px 999px; }

/* ---- Griff ---- */

.fx-flyout-handle {
  flex: 0 0 auto;
  width: var(--fx-flyout-size, 68px);
  height: var(--fx-flyout-size, 68px);
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
}

[data-fx="flyout"][data-fx-side="bottom"] .fx-flyout-handle,
[data-fx="flyout"][data-fx-side="top"] .fx-flyout-handle {
  width: auto;
}

/* ---- Feld ----

   Der Inhalt bekommt seine Breite ueber die Kinder, nicht ueber das Feld
   selbst. Sonst liefe der Text im zusammengeklappten Zustand auf Breite 0
   um und das Feld waere hundert Zeilen hoch -- der Griff stuende dann auf
   einer meterhohen Flaeche. */

.fx-flyout-panel {
  min-width: 0;
  max-width: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  transition: max-width var(--fx-flyout-duration, .45s) var(--fx-ease),
              max-height var(--fx-flyout-duration, .45s) var(--fx-ease),
              opacity var(--fx-flyout-duration, .45s) var(--fx-ease),
              padding var(--fx-flyout-duration, .45s) var(--fx-ease);
}

.fx-flyout-panel > * {
  width: var(--fx-flyout-width, 280px);
  box-sizing: border-box;
}

[data-fx="flyout"][data-fx-side="bottom"] > .fx-flyout-panel > *,
[data-fx="flyout"][data-fx-side="top"] > .fx-flyout-panel > * {
  width: auto;
}

[data-fx="flyout"]:hover,
[data-fx="flyout"]:focus-within,
[data-fx="flyout"].is-open {
  box-shadow: var(--fx-flyout-shadow-open,
              0 4px 10px rgba(20, 20, 25, .10),
              0 16px 40px rgba(20, 20, 25, .18));
}

[data-fx="flyout"]:hover > .fx-flyout-panel,
[data-fx="flyout"]:focus-within > .fx-flyout-panel,
[data-fx="flyout"].is-open > .fx-flyout-panel {
  max-width: var(--fx-flyout-width, 280px);
  max-height: var(--fx-flyout-max-height, 70vh);
  opacity: 1;
  padding: var(--fx-flyout-pad-y, 16px) var(--fx-flyout-pad-x-aussen, 22px)
           var(--fx-flyout-pad-y, 16px) var(--fx-flyout-pad-x, 4px);
}

[data-fx="flyout"][data-fx-side="right"]:hover > .fx-flyout-panel,
[data-fx="flyout"][data-fx-side="right"]:focus-within > .fx-flyout-panel,
[data-fx="flyout"][data-fx-side="right"].is-open > .fx-flyout-panel {
  padding: var(--fx-flyout-pad-y, 16px) var(--fx-flyout-pad-x, 4px)
           var(--fx-flyout-pad-y, 16px) var(--fx-flyout-pad-x-aussen, 22px);
}

[data-fx="flyout"][data-fx-side="bottom"]:hover > .fx-flyout-panel,
[data-fx="flyout"][data-fx-side="bottom"]:focus-within > .fx-flyout-panel,
[data-fx="flyout"][data-fx-side="bottom"].is-open > .fx-flyout-panel,
[data-fx="flyout"][data-fx-side="top"]:hover > .fx-flyout-panel,
[data-fx="flyout"][data-fx-side="top"]:focus-within > .fx-flyout-panel,
[data-fx="flyout"][data-fx-side="top"].is-open > .fx-flyout-panel {
  max-width: none;
  max-height: var(--fx-flyout-height, 200px);
  padding: var(--fx-flyout-pad-x-aussen, 22px) var(--fx-flyout-pad-y, 20px)
           var(--fx-flyout-pad-x, 4px);
}

[data-fx="flyout"][data-fx-side="top"]:hover > .fx-flyout-panel,
[data-fx="flyout"][data-fx-side="top"]:focus-within > .fx-flyout-panel,
[data-fx="flyout"][data-fx-side="top"].is-open > .fx-flyout-panel {
  padding: var(--fx-flyout-pad-x, 4px) var(--fx-flyout-pad-y, 20px)
           var(--fx-flyout-pad-x-aussen, 22px);
}

/* Auf dem Smartphone kostet ein Feld am Rand zu viel Platz. */
@media (max-width: 478px) {
  [data-fx="flyout"] { --fx-flyout-size: 56px; --fx-flyout-width: 200px; }
}


/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-fx="portal"] { height: auto; }
  [data-fx="hero"] .fx-hero-media { transform: none !important; }
  [data-fx="zoom"] img, [data-fx="zoom"] video, [data-fx="zoom"] .fx-zoom-media { transform: none !important; }
  [data-fx="expand"] .fx-expand-media { width: 100% !important; height: 100% !important; border-radius: 0 !important; transform: translate(-50%, -50%) !important; }
  [data-fx="portal"] .fx-portal-stage { position: static; height: 70vh; }

  /* Der Hover darf bleiben – er ist eine Rückmeldung auf eine Handlung,
     keine Bewegung, die von allein passiert. Nur das Wachsen nehmen wir
     heraus, der Schatten allein genügt als Signal. */
  [data-fx="hover"]:hover, [data-fx="hover"]:focus-visible { transform: none; }
  [data-fx="hover"][data-fx-variant~="arrow"]:hover::before { transform: none; }
  [data-fx="hover"][data-fx-variant~="arrow-below"]:hover::after,
  [data-fx="hover"]:hover .fx-hover-arrow::after { transform: none; }
  [data-fx="hover"]:hover .fx-hover-icon,
  [data-fx="hover"]:hover .fx-hover-media,
  [data-fx="hover"]:hover .fx-hover-media img,
  [data-fx="hover"]:hover .fx-hover-img { transform: none; }

  /* Dauerbewegung und Auftritt entfallen ganz, die Inhalte stehen da. */
  [data-fx="pan"] { animation: none; transform: none; }
  [data-fx="intro"] { animation: none; opacity: 1; transform: none; }
  .fx-slider .splide__slide { transition: none !important; }

  /* Das aufklappende Feld bleibt bedienbar, es klappt nur ohne Uebergang. */
  .fx-flyout-panel { transition: none !important; }
  .fx-portal-dot { transition: none !important; }

  /* Das Randsignet bleibt sichtbar, es faehrt nur nicht ein. */
  [data-fx="edge"] { transition: none !important; }
  .gco-fx-ready [data-fx="edge"]:not(.is-in) {
    opacity: var(--fx-edge-opacity, .7);
    transform: translateX(var(--fx-edge-cut, 22%));
  }
  .gco-fx-ready [data-fx="edge"][data-fx-corner="top-left"]:not(.is-in),
  .gco-fx-ready [data-fx="edge"][data-fx-corner="bottom-left"]:not(.is-in) {
    transform: translateX(calc(var(--fx-edge-cut, 22%) * -1));
  }

  .gco-fx-ready [data-fx="reveal"],
  .gco-fx-ready [data-fx="stagger"] > *,
  [data-fx-variant="mask"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}
/* ========================= Ende ========================= */