/* The homepage background stays visible; content keeps its fade-in-up motion. */
html body .hero-section .hero-bg,
html body .hero-section .hero-1-content {
  opacity: 1 !important;
  transition-delay: 0s !important;
}

/* ==========================================================================
   realclean – Unterseiten
   Die Unterseiten sind unveraenderte Kopien der Original-Vorlagen.
   Diese Datei aendert daran nur zwei Dinge:
     1. die Inhaltsbreite (auf die Breite der Startseite)
     2. die Einbettung von Navigation und Footer der Startseite
   Dazu kommt die gemeinsame, weiche Fade-in-up Animation.
   ========================================================================== */

:root {
  /* Gleiche Inhaltsbreite wie die Startseite (.main-container, max-width 1400px). */
  --rc-page-width: 1400px;
  --rc-page-gutter: 24px;

  /* Bewegung – bewusst lang und weich, ohne Nachfedern. */
  --rc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --rc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --rc-motion-fast: 200ms;
  --rc-motion-ui: 400ms;
  --rc-motion-reveal: 600ms;
  --rc-reveal-duration: var(--rc-motion-reveal);
  --rc-reveal-ease: cubic-bezier(0, 0, 0.58, 1);
  --rc-reveal-shift: 20px;
  --rc-reveal-step: 80ms;
}

/* --------------------------------------------------------------------------
   1. Breite
   -------------------------------------------------------------------------- */

.rc-framer-page .rc-page-root {
  width: 100% !important;
  max-width: var(--rc-page-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Der aeussere Rahmen darf mitwachsen, damit nichts abgeschnitten wird. */
.rc-framer-page #main > div {
  width: 100%;
  max-width: none;
}

@media screen and (max-width: 1460px) {
  .rc-framer-page .rc-page-root {
    max-width: none !important;
    padding-left: var(--rc-page-gutter);
    padding-right: var(--rc-page-gutter);
    box-sizing: border-box;
  }
}

/* --------------------------------------------------------------------------
   2. Navigation und Footer der Startseite in der Framer-Seite
   -------------------------------------------------------------------------- */

.rc-framer-page .rc-chrome-nav {
  height: auto !important;
  min-height: 0 !important;
  z-index: 1000 !important;
  overflow: visible !important;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
}

.rc-framer-page .rc-chrome-nav .navbar {
  position: static;
  width: 100%;
}

.rc-framer-page .rc-chrome-nav .main-container,
.rc-framer-page .rc-chrome-footer .main-container {
  box-sizing: border-box;
  max-width: var(--rc-page-width);
}

/* Footer-Inhalt auf allen Unterseiten an derselben Layoutachse wie der
   Seiteninhalt ausrichten. Der Footer-Hintergrund darf weiterhin vollbreit sein. */
body.rc-subpage .footer.rc-structora-footer > .main-container {
  width: 100%;
  max-width: var(--rc-page-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.rc-framer-page .rc-chrome-footer {
  width: 100%;
  position: relative;
  z-index: 2;
}

/* Typografie der Startseite. Ohne diese Regel erben Navigation und Footer
   die Schrift der Framer-Vorlage und sehen dadurch anders aus als auf der
   Startseite. Einzelne Bausteine (Badges, Buttons) setzen ihre Schrift selbst. */
.rc-framer-page .navbar,
.rc-framer-page .footer {
  font-family: var(--_typography---type-font-body);
  font-size: var(--_typography---type-body-size);
  line-height: var(--_typography---type-body-line-height);
  font-variation-settings: "wght" 350;
  color: var(--_color---color-white);
  letter-spacing: normal;
  text-transform: none;
  font-style: normal;
}

.rc-framer-page .navbar a,
.rc-framer-page .footer a {
  text-decoration: none;
}

/* Der Framer-Footer war Teil des Flusses – der neue Footer ebenso. */
.rc-framer-page .rc-chrome-footer .footer {
  width: 100%;
}

/* --------------------------------------------------------------------------
   3. Fade-in-up – weich, ohne Ruckeln, Elemente einer Reihe gemeinsam
   -------------------------------------------------------------------------- */

html.rc-reveal-ready .rc-reveal {
  opacity: 0;
  transform: translate3d(0, var(--rc-reveal-shift), 0);
  transition:
    opacity var(--rc-reveal-duration) var(--rc-reveal-ease),
    transform var(--rc-reveal-duration) var(--rc-reveal-ease);
  transition-delay: var(--rc-reveal-delay, 0ms);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* Ueberschreibt die frueheren festen 90-ms-Schritte aus dem unveraenderten
   Quelllayout mit der gemessenen Reihenfolge des gemeinsamen Adapters. */
html.rc-reveal-ready .rc-reveal[data-reveal] {
  transition-delay: var(--rc-reveal-delay, 0ms);
}

/* Framer setzt auf vielen statischen Wrappers inline `transform:none`. */
html.rc-reveal-ready .rc-framer-page .rc-reveal {
  opacity: 0 !important;
}

html.rc-reveal-ready .rc-framer-page .rc-reveal:not(.rc-reveal-opacity-only) {
  transform: translate3d(0, var(--rc-reveal-shift), 0) !important;
}

html.rc-reveal-ready .rc-framer-page .rc-reveal.rc-reveal-opacity-only {
  transform: var(--rc-reveal-original-transform, none) !important;
}

html.rc-reveal-ready .rc-reveal.is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

html.rc-reveal-ready .rc-framer-page .rc-reveal.is-revealed {
  opacity: 1 !important;
  transform: var(--rc-reveal-original-transform, none) !important;
}

@media (prefers-reduced-motion: reduce) {
  html.rc-reveal-ready .rc-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   4. FAQ-Aufklapper
   Ersetzt die entfallene Framer-Logik, ohne das Aussehen zu veraendern.
   -------------------------------------------------------------------------- */

/* Die Vorlage begrenzt die Zeile auf 53 px und schneidet alles darunter ab –
   das war die Aufgabe der entfernten Framer-Logik. */
.rc-framer-page .rc-faq-item {
  height: auto !important;
  overflow: visible !important;
  cursor: pointer;
}

.rc-framer-page .rc-faq-question {
  cursor: pointer;
  user-select: none;
}

.rc-framer-page .rc-faq-question:focus-visible {
  outline: 2px solid var(--_color---color-brand, #049ce4);
  outline-offset: 6px;
}

.rc-framer-page .rc-faq-answer {
  height: 0 !important;
  opacity: 0 !important;
  overflow: hidden;
  transition:
    height var(--rc-motion-ui) var(--rc-ease-in-out),
    opacity 240ms var(--rc-ease-out);
  will-change: height, opacity;
}

.rc-framer-page .rc-faq-item.is-open .rc-faq-answer {
  opacity: 1 !important;
  will-change: auto;
}

/* Den Inline-Rotate des Framer-Wrappers neutralisieren. Das Plus selbst
   dreht sich beim Öffnen sichtbar zu einem X. */
.rc-framer-page .rc-faq-item [data-framer-name="Icon"] {
  transform: none !important;
}

.rc-framer-page .rc-faq-item [data-framer-name="Lines"] {
  transform: rotate(0deg) !important;
  transform-origin: 50% 50%;
  transition: transform var(--rc-motion-ui) var(--rc-ease-in-out);
}

.rc-framer-page .rc-faq-item.is-open [data-framer-name="Lines"] {
  transform: rotate(45deg) !important;
}

.rc-framer-page .rc-faq-answer[aria-hidden="true"] {
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Ersatz fuer die entfernte Framer-Motion-Laufzeit
   -------------------------------------------------------------------------- */

.rc-framer-page .rc-blue-sweep-host,
.rc-framer-page .rc-motion-rule {
  overflow: hidden !important;
}

.rc-framer-page .rc-motion-rule {
  isolation: isolate;
}

.rc-framer-page .rc-motion-rule--static {
  position: relative !important;
}

.rc-framer-page .rc-blue-sweep-layer,
.rc-framer-page .rc-motion-rule__sweep {
  pointer-events: none !important;
  will-change: auto;
}

.rc-framer-page .rc-blue-sweep-layer.is-sweeping,
.rc-framer-page .rc-motion-rule__sweep.is-sweeping {
  will-change: transform;
}

.rc-framer-page .rc-motion-rule__sweep {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--_color---color-brand, #049ce4) 88%,
    transparent 100%
  );
  transform: translateX(-105%);
}

.rc-framer-page .rc-motion-rule--vertical .rc-motion-rule__sweep {
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--_color---color-brand, #049ce4) 88%,
    transparent 100%
  );
  transform: translateY(-105%);
}

/* Der alte Customer-Card-Track besteht aus drei 100%-Segmenten. Sein
   vorhandenes blaues Segment wird wieder durch das 1-px-Fenster bewegt. */
.rc-framer-page .rc-customer-sweep {
  position: relative !important;
  justify-content: initial !important;
  overflow: hidden !important;
}

.rc-framer-page .rc-customer-sweep > .framer-jzdovr,
.rc-framer-page .rc-customer-sweep > .framer-137sqbp {
  display: none !important;
}

.rc-framer-page .rc-customer-sweep > .framer-k1kurr {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  flex: none !important;
  transform: translateX(-105%);
}

.rc-framer-page .rc-framer-hover [data-framer-name="Hover Glow"] {
  opacity: 0 !important;
  transform: scale(.82) !important;
  transition:
    opacity var(--rc-motion-fast) var(--rc-ease-out),
    transform var(--rc-motion-fast) var(--rc-ease-out);
}

.rc-framer-page .rc-framer-hover:focus-within [data-framer-name="Hover Glow"] {
  opacity: .22 !important;
  transform: scale(1) !important;
}

@media (hover: hover) and (pointer: fine) {
  .rc-framer-page .rc-framer-hover.hover [data-framer-name="Hover Glow"] {
    opacity: .22 !important;
    transform: scale(1) !important;
  }
}

.rc-framer-page .rc-timeline-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--rc-motion-reveal) var(--rc-ease-in-out);
  will-change: clip-path;
}

.rc-framer-page .rc-timeline-reveal--vertical {
  clip-path: inset(0 0 100% 0);
}

.rc-framer-page .rc-timeline-reveal.is-timeline-revealed {
  clip-path: inset(0);
  will-change: auto;
}

.rc-framer-page .rc-image-reveal,
.rc-framer-page .rc-parallax-media {
  will-change: transform;
}

.rc-framer-page .rc-image-reveal.is-image-revealed {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html.rc-reveal-ready .rc-framer-page .rc-reveal {
    opacity: 1 !important;
    transform: var(--rc-reveal-original-transform, none) !important;
    transition: none !important;
  }

  .rc-framer-page .rc-faq-answer,
  .rc-framer-page .rc-faq-item [data-framer-name="Lines"],
  .rc-framer-page .rc-framer-hover [data-framer-name="Hover Glow"],
  .rc-framer-page .rc-timeline-reveal {
    transition: none !important;
  }

  .rc-framer-page .rc-timeline-reveal {
    clip-path: inset(0) !important;
  }

  .rc-framer-page .rc-blue-sweep-layer,
  .rc-framer-page .rc-motion-rule__sweep,
  .rc-framer-page .rc-customer-sweep > .framer-k1kurr {
    opacity: 0 !important;
  }

  .rc-framer-page .rc-image-reveal,
  .rc-framer-page .rc-parallax-media {
    will-change: auto;
  }
}

/* --------------------------------------------------------------------------
   6. Normenliste (Zertifikate)
   Nutzt die Abschnittsbreite und die Farbtokens der Vorlage.
   -------------------------------------------------------------------------- */

.rc-norms-section { padding-top: 0; }

.rc-norms {
  display: flex;
  flex-flow: column;
  gap: 24px;
  width: 100%;
  margin-top: 32px;
}

.rc-norms__intro {
  max-width: 720px;
  margin: 0;
  color: var(--token-f7f0c149-c546-4d83-8d92-50418a7754da, #6e6e73);
  font-size: 16px;
  line-height: 1.55;
}

.rc-norms__toolbar {
  display: flex;
  flex-flow: row wrap;
  gap: 16px 32px;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0;
}

.rc-norms__field {
  display: flex;
  flex-flow: column;
  gap: 8px;
  min-width: min(360px, 100%);
  flex: 1;
}

.rc-norms__label,
.rc-norms__count {
  font-family: var(--_typography---type-font-badges), monospace;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--token-f7f0c149-c546-4d83-8d92-50418a7754da, #6e6e73);
}

.rc-norms__input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  color: var(--token-6064d0f1-9ce9-4751-a1f9-aac9223b42be, #171717);
  background: transparent;
  border: 1px solid var(--token-a6fba188-a7c4-4ce9-975a-02f363f269a3, rgba(23, 23, 23, .15));
  border-radius: 0;
  transition: border-color 320ms var(--rc-reveal-ease);
}

.rc-norms__input:focus {
  outline: none;
  border-color: var(--_color---color-brand, #049ce4);
}

.rc-norms__scroll {
  width: 100%;
  max-height: 640px;
  overflow: auto;
  border-top: 1px solid var(--token-a6fba188-a7c4-4ce9-975a-02f363f269a3, rgba(23, 23, 23, .15));
}

.rc-norms__table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.rc-norms__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.rc-norms__table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 14px 16px 14px 0;
  background: var(--token-281f6968-318b-4063-aea0-81603f9b9f1b, #fff);
  border-bottom: 1px solid var(--token-a6fba188-a7c4-4ce9-975a-02f363f269a3, rgba(23, 23, 23, .15));
  font-family: var(--_typography---type-font-badges), monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--token-f7f0c149-c546-4d83-8d92-50418a7754da, #6e6e73);
}

.rc-norms__table td {
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--token-a6fba188-a7c4-4ce9-975a-02f363f269a3, rgba(23, 23, 23, .12));
  font-size: 14px;
  line-height: 1.5;
  vertical-align: top;
  color: var(--token-6064d0f1-9ce9-4751-a1f9-aac9223b42be, #171717);
}

.rc-norms__table tr:hover td {
  background: var(--token-a6fba188-a7c4-4ce9-975a-02f363f269a3, rgba(23, 23, 23, .04));
}

.rc-norms__firma { width: 24%; }
.rc-norms__kennung { width: 18%; font-family: var(--_typography---type-font-badges), monospace; }
.rc-norms__stand { width: 13%; white-space: nowrap; color: var(--token-f7f0c149-c546-4d83-8d92-50418a7754da, #6e6e73); }
.rc-norms__beschreibung { color: var(--token-f7f0c149-c546-4d83-8d92-50418a7754da, #6e6e73); }

.rc-norms__empty {
  margin: 0;
  padding: 24px 0;
  color: var(--token-f7f0c149-c546-4d83-8d92-50418a7754da, #6e6e73);
}

@media screen and (max-width: 809px) {
  .rc-norms__kennung,
  .rc-norms__stand { display: none; }
  .rc-norms__firma { width: 40%; }
  .rc-norms__scroll { max-height: 520px; }
}

/* --------------------------------------------------------------------------
   6. Ergaenzte Abschnitte (Fundstuecke, Anfahrt)
   Uebernehmen Rhythmus und Farben der Vorlage.
   -------------------------------------------------------------------------- */

.rc-added-section {
  width: 100%;
  padding: 18px 0 144px;
  position: relative;
}

.rc-added__inner {
  display: flex;
  flex-flow: column;
  gap: 40px;
  width: 100%;
}

.rc-added__head {
  display: flex;
  flex-flow: column;
  gap: 16px;
}

.rc-added__intro {
  max-width: 720px;
  margin: 0;
  color: var(--token-f7f0c149-c546-4d83-8d92-50418a7754da, #6e6e73);
  font-size: 16px;
  line-height: 1.55;
}

/* Partikelgalerie */
.rc-particles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.rc-particle {
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--token-a6fba188-a7c4-4ce9-975a-02f363f269a3, rgba(23, 23, 23, .06));
}

.rc-particle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--rc-reveal-ease);
}

.rc-particle:hover img { transform: scale(1.06); }

/* Anfahrt */
.rc-anfahrt {
  display: grid;
  grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr);
  gap: 40px;
  align-items: start;
}

.rc-anfahrt__details {
  display: flex;
  flex-flow: column;
  gap: 20px;
}

.rc-anfahrt__address,
.rc-anfahrt__contact {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--token-6064d0f1-9ce9-4751-a1f9-aac9223b42be, #171717);
}

.rc-anfahrt__contact a { color: inherit; text-decoration: none; }
.rc-anfahrt__contact a:hover { color: var(--_color---color-brand, #049ce4); }
.rc-anfahrt__contact span { color: var(--token-f7f0c149-c546-4d83-8d92-50418a7754da, #6e6e73); }

.rc-map {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--token-a6fba188-a7c4-4ce9-975a-02f363f269a3, rgba(23, 23, 23, .15));
  background: var(--token-a6fba188-a7c4-4ce9-975a-02f363f269a3, rgba(23, 23, 23, .04));
}

.rc-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.rc-map__consent {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 18px;
  max-width: 460px;
  padding: 24px;
  text-align: center;
}

.rc-map__consent p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--token-f7f0c149-c546-4d83-8d92-50418a7754da, #6e6e73);
}

.rc-map__consent a { color: var(--_color---color-brand, #049ce4); }

.rc-map__button {
  padding: 12px 24px;
  font: inherit;
  font-size: 15px;
  color: #fff;
  background: var(--_color---color-brand, #049ce4);
  border: 0;
  cursor: pointer;
  transition: opacity 320ms var(--rc-reveal-ease);
}

.rc-map__button:hover { opacity: .86; }

@media screen and (max-width: 1137px) {
  .rc-particles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media screen and (max-width: 809px) {
  .rc-added-section { padding-bottom: 96px; }
  .rc-particles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rc-anfahrt { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 479px) {
  .rc-particles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Weichere Kurven fuer wiederkehrende Hover-Zustaende – Start- und Unterseiten. */
.button,
.button .button-hover-element,
.box-arrow-link,
.box-arrow-link .arrow-link-bg,
.box-arrow-link .arrow-link-text,
.link-box .arrow-link-bg,
.link-box .arrow-link-text,
.rc-customer-service-card .rc-customer-service-image {
  transition-timing-function: var(--rc-reveal-ease);
}

/* --------------------------------------------------------------------------
   7. Gemeinsame Interaktionen der strukturierten Unterseiten
   -------------------------------------------------------------------------- */

/* Drei Klassennamen wurden in den frueheren Framer-Ergaenzungen direkt auf
   einen inneren Grid-Container gesetzt, in der sauberen Quellstruktur aber
   auf das aeussere <section>. Dort muss das Standard-Section-Layout gelten. */
body.rc-subpage:not(.rc-framer-page) section.rc-norms,
body.rc-subpage:not(.rc-framer-page) section.rc-particles,
body.rc-subpage:not(.rc-framer-page) section.rc-anfahrt {
  display: block;
  grid-template-columns: none;
  gap: 0;
  align-items: initial;
}

body.rc-subpage:not(.rc-framer-page) section.rc-norms {
  width: auto;
  margin-top: 0;
}

body.rc-subpage:not(.rc-framer-page) .rc-norms__toolbar {
  margin-bottom: var(--_gaps---gap-base-unit);
}

/* Die bestehenden Linien erhalten denselben elektrischen Lauf wie die
   damaligen Framer-Komponenten: einmal beim Hereinscrollen und erneut bei
   Hover/Fokus. Die Steuerung übernimmt js/subpages.js?v=20261012-loading-1 */
body.rc-subpage .rc-blue-sweep-host,
body.rc-subpage .rc-motion-rule {
  overflow: hidden !important;
}

body.rc-subpage .rc-blue-sweep-layer,
body.rc-subpage .rc-motion-rule__sweep {
  pointer-events: none !important;
  will-change: auto;
}

body.rc-subpage .rc-blue-sweep-layer.is-sweeping,
body.rc-subpage .rc-motion-rule__sweep.is-sweeping {
  will-change: transform;
}

body.rc-subpage .rc-motion-rule__sweep {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--_color---color-brand, #049ce4) 88%,
    transparent 100%
  );
  transform: translateX(-105%);
}

/* Auf den Leistungskarten ersetzt der echte Layer das bisherige reine
   Hover-Pseudoelement, damit derselbe Blitz auch beim Scrollen laufen kann. */
body.rc-subpage .rc-customer-service-card__line::after {
  content: none;
}

/* Eleganter Licht-Swipe wie beim oberen Startseiten-Button. Die unscharfe
   Ellipse bewegt sich diagonal durch die gesamte Flaeche; animiert werden
   ausschliesslich transform und opacity, damit der Hover ruhig bleibt. */
body.rc-subpage .button {
  --rc-button-swipe-color: #dce5e9;
  --rc-button-swipe-opacity: .72;
  isolation: isolate;
}

body.rc-subpage .button.bg-brand,
body.rc-subpage .button.component-variant-ae197d1d-988a-11ef-37c4-d104a40294d7 {
  --rc-button-swipe-color: #037fb9;
  --rc-button-swipe-opacity: .86;
}

body.rc-subpage .button.component-variant-cf98775e-6aa8-d22e-4d45-019174967c2f {
  --rc-button-swipe-color: #fff;
  --rc-button-swipe-opacity: .3;
}

body.rc-subpage .button .button-icon-text-wrap,
body.rc-subpage .button .button-icon-wrap {
  z-index: 2;
  position: relative;
}

body.rc-subpage .button .button-icon-wrap {
  flex: 0 0 18px;
}

body.rc-subpage .button .button-icon {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  transition: transform var(--rc-motion-fast) var(--rc-ease-out) !important;
}

body.rc-subpage .button .button-icon:first-child {
  transform: translate3d(0, 0, 0) !important;
}

body.rc-subpage .button .button-icon:nth-child(2) {
  transform: translate3d(-105%, 105%, 0) !important;
}

body.rc-subpage .button .button-hover-element-wrap {
  z-index: 1;
  top: auto !important;
  right: 65% !important;
  bottom: -75% !important;
  left: auto !important;
  width: 100% !important;
  height: 150% !important;
  pointer-events: none;
  transform: translate3d(41%, 50%, 0) !important;
  transition: transform var(--rc-motion-fast) var(--rc-ease-out) !important;
}

body.rc-subpage .button .button-hover-element {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 999px;
  background: var(--rc-button-swipe-color);
  opacity: 0 !important;
  filter: blur(12px) !important;
  transform: none !important;
  transition: opacity var(--rc-motion-fast) ease !important;
}

body.rc-subpage .button:focus-visible .button-hover-element-wrap {
  transform: translate3d(0, 0, 0) !important;
}

body.rc-subpage .button:focus-visible .button-hover-element {
  opacity: var(--rc-button-swipe-opacity) !important;
}

body.rc-subpage .button:focus-visible .button-icon:first-child {
  transform: translate3d(105%, -105%, 0) !important;
}

body.rc-subpage .button:focus-visible .button-icon:nth-child(2) {
  transform: translate3d(0, 0, 0) !important;
}

/* Ruhiger Medien-Hover; kleine Skalierung vermeidet sichtbare Kanten. */
body.rc-subpage .rc-media-band .image-fill,
body.rc-subpage .rc-figure .image-fill {
  transition: transform 700ms var(--rc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  body.rc-subpage .button:hover .button-hover-element-wrap {
    transform: translate3d(0, 0, 0) !important;
  }

  body.rc-subpage .button:hover .button-hover-element {
    opacity: var(--rc-button-swipe-opacity) !important;
  }

  body.rc-subpage .button:hover .button-icon:first-child {
    transform: translate3d(105%, -105%, 0) !important;
  }

  body.rc-subpage .button:hover .button-icon:nth-child(2) {
    transform: translate3d(0, 0, 0) !important;
  }

  body.rc-subpage .rc-media-band:hover .image-fill,
  body.rc-subpage .rc-figure:hover .image-fill {
    transform: scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.rc-subpage .button .button-hover-element-wrap {
    transform: none !important;
    transition: none !important;
  }

  body.rc-subpage .button .button-hover-element {
    transition: opacity var(--rc-motion-fast) ease !important;
  }

  body.rc-subpage .button .button-icon,
  body.rc-subpage .rc-media-band .image-fill,
  body.rc-subpage .rc-figure .image-fill {
    transition: none !important;
  }

  body.rc-subpage .button:focus-visible .button-icon:first-child {
    transform: translate3d(0, 0, 0) !important;
  }

  body.rc-subpage .button:focus-visible .button-icon:nth-child(2) {
    transform: translate3d(-105%, 105%, 0) !important;
  }

  body.rc-subpage .rc-blue-sweep-layer,
  body.rc-subpage .rc-motion-rule__sweep {
    opacity: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  body.rc-subpage .button:hover .button-icon:first-child {
    transform: translate3d(0, 0, 0) !important;
  }

  body.rc-subpage .button:hover .button-icon:nth-child(2) {
    transform: translate3d(-105%, 105%, 0) !important;
  }
}