/* ==========================================================================
   realclean – Unterseiten
   Erweitert das bestehende Designsystem (site-styles.css + light-mode.css).
   Es werden ausschliesslich neue Klassen ergaenzt, bestehende Regeln bleiben
   unveraendert. Alle Werte greifen auf die Tokens der Vorlage zurueck.
   ========================================================================== */

/* --- 1. Sanfte Fade-in-up Animationen ------------------------------------ */

html.rc-reveal-ready .rc-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

html.rc-reveal-ready .rc-reveal[data-reveal="2"] { transition-delay: 90ms; }
html.rc-reveal-ready .rc-reveal[data-reveal="3"] { transition-delay: 180ms; }
html.rc-reveal-ready .rc-reveal[data-reveal="4"] { transition-delay: 270ms; }

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

html.rc-reveal-ready .rc-reveal.is-revealed {
  will-change: auto;
}

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

/* Weichere Uebergaenge fuer wiederkehrende, interaktive Elemente. */
.rc-subpage .button,
.rc-subpage .link-box .arrow-link-bg,
.rc-subpage .link-box .arrow-link-text,
.rc-subpage .box-arrow-link,
.rc-subpage .rc-figure img {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- 2. Grundgeruest ---------------------------------------------------- */

.rc-subpage .rc-main { display: block; }

.rc-subpage .image-wrapper .image-fill {
  object-fit: cover;
  object-position: center;
  top: 0;
  left: 0;
}

/* Die Navigation ist sticky und steht im Fluss – das Standard-Padding der
   Vorlage (.section.title-hero) genuegt, es wird nur die Sprungmarke gesetzt. */
.rc-page-hero { scroll-margin-top: var(--_navbar---navbar-height); }

.rc-page-hero__lead {
  width: var(--_grid---grid-6-column);
  max-width: 100%;
}

.rc-media-band .image-wrapper {
  aspect-ratio: 21 / 9;
}

.rc-section-head {
  grid-column-gap: var(--_gaps---gap-base-unit);
  grid-row-gap: var(--_gaps---gap-base-unit);
  flex-flow: column;
  display: flex;
  max-width: var(--_grid---grid-7-column);
}

.rc-section-intro {
  color: var(--_color---color-white-muted-text);
  margin: 0;
  max-width: var(--_grid---grid-6-column);
}

/* --- 3. Zweispaltiger Abschnitt ----------------------------------------- */

.rc-split__grid {
  grid-column-gap: var(--_grid---grid-gap);
  grid-row-gap: var(--_gaps---gap-4x);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  display: grid;
}

.rc-split--reversed .rc-split__content { order: 2; }
.rc-split--reversed .rc-split__media { order: 1; }

.rc-split__content {
  grid-column-gap: var(--_gaps---gap-base-unit);
  grid-row-gap: var(--_gaps---gap-base-unit);
  flex-flow: column;
  align-items: flex-start;
  display: flex;
  max-width: var(--_grid---grid-5-column);
}

.rc-split__text {
  color: var(--_color---color-white-muted-text);
  margin: 0;
}

.rc-split__media {
  grid-column-gap: var(--_grid---grid-gap);
  grid-row-gap: var(--_grid---grid-gap);
  flex-flow: column;
  display: flex;
  width: 100%;
}

.rc-split__actions {
  grid-column-gap: var(--_gaps---gap-0-5x);
  grid-row-gap: var(--_gaps---gap-0-5x);
  flex-flow: row wrap;
  display: flex;
  margin-top: var(--_gaps---gap-0-75x);
}

/* --- 4. Bilder und Galerien --------------------------------------------- */

.rc-figure {
  margin: 0;
  grid-column-gap: var(--_gaps---gap-0-5x);
  grid-row-gap: var(--_gaps---gap-0-5x);
  flex-flow: column;
  display: flex;
}

.rc-figure__caption {
  color: var(--_color---color-white-muted-text);
}

.rc-figure img {
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rc-figure:hover img { transform: scale(1.03); }

.rc-gallery__grid {
  grid-column-gap: var(--_grid---grid-gap);
  grid-row-gap: var(--_gaps---gap-3x);
  display: grid;
}

.rc-gallery__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rc-gallery__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rc-gallery__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- 5. Aufzaehlungen ---------------------------------------------------- */

.rc-subpage .bulleted-list { width: 100%; }

.rc-subpage .bullet-list-item:last-child {
  border-bottom: 1px solid var(--_color---color-white-border);
}

.rc-bullet__text { flex: 1; }

/* --- 6. Prozessliste ----------------------------------------------------- */

.rc-process .process-wide-item {
  padding-top: var(--_gaps---gap-base-unit);
}

.rc-process .process-wide-item-content {
  grid-column-gap: var(--_grid---grid-gap);
  align-items: flex-start;
}

.rc-process .badge-text.process-wide-number {
  color: var(--_color---color-white-muted-text);
  width: var(--_grid---grid-2-column);
  flex: none;
}

.rc-process .process-wide-item-text {
  max-width: var(--_grid---grid-7-column);
}

/* --- 7. Merkmal-Karten --------------------------------------------------- */

.rc-feature-grid {
  grid-column-gap: var(--_grid---grid-gap);
  grid-row-gap: var(--_gaps---gap-3x);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}

.rc-feature-card {
  padding-top: var(--_gaps---gap-0-75x);
  border-top: 1px solid var(--_color---color-white-border);
  grid-column-gap: var(--_gaps---gap-0-5x);
  grid-row-gap: var(--_gaps---gap-0-5x);
  flex-flow: column;
  display: flex;
}

.rc-feature-card__number { color: var(--_color---color-white-muted-text); }

/* --- 8. Textseiten (Impressum, Datenschutz, Intern) ---------------------- */

.rc-prose__grid {
  grid-column-gap: var(--_grid---grid-gap);
  grid-row-gap: var(--_gaps---gap-3x);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.rc-prose--single .rc-prose__grid { grid-template-columns: minmax(0, 1fr); }

.rc-prose__item {
  padding-top: var(--_gaps---gap-0-75x);
  border-top: 1px solid var(--_color---color-white-border);
  grid-column-gap: var(--_gaps---gap-0-75x);
  grid-row-gap: var(--_gaps---gap-0-75x);
  flex-flow: column;
  display: flex;
}

.rc-prose__body p { margin: 0 0 var(--_gaps---gap-0-5x); }
.rc-prose__body p:last-child { margin-bottom: 0; }
.rc-prose__body ul { margin-bottom: var(--_gaps---gap-0-5x); }
.rc-prose__body ul:last-child { margin-bottom: 0; }
.rc-prose__body code {
  font-family: var(--_typography---type-font-badges);
  font-size: .9em;
  padding: .1em .35em;
  background: var(--_color---color-white-15);
}
.rc-prose__body a { color: var(--_color---color-brand); text-decoration: none; }
.rc-prose__body a:hover { text-decoration: underline; }

/* --- 9. Hinweisbox ------------------------------------------------------- */

.rc-note {
  padding: var(--_gaps---gap-base-unit);
  border: 1px solid var(--_color---color-white-border);
  border-left: 2px solid var(--_color---color-brand);
  grid-column-gap: var(--_gaps---gap-0-5x);
  grid-row-gap: var(--_gaps---gap-0-5x);
  flex-flow: column;
  display: flex;
}

.rc-note__label {
  color: var(--_color---color-brand);
}

.rc-note__body { color: var(--_color---color-white-muted-text); }
.rc-note__body p { margin: 0 0 var(--_gaps---gap-0-5x); }
.rc-note__body p:last-child { margin-bottom: 0; }

/* --- 10. Zertifikatskarten ---------------------------------------------- */

.rc-cert-grid {
  grid-column-gap: var(--_grid---grid-gap);
  grid-row-gap: var(--_gaps---gap-3x);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  display: grid;
}

.rc-cert-card {
  padding: var(--_gaps---gap-base-unit);
  border: 1px solid var(--_color---color-white-border);
  grid-column-gap: var(--_gaps---gap-base-unit);
  grid-row-gap: var(--_gaps---gap-base-unit);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
  position: relative;
  transition: border-color 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rc-cert-card:hover { border-color: var(--_color---color-brand); }

.rc-cert-card__head {
  grid-column-gap: var(--_gaps---gap-0-25x);
  grid-row-gap: var(--_gaps---gap-0-25x);
  flex-flow: column;
  display: flex;
}

.rc-cert-card__label { color: var(--_color---color-white-muted-text); }

.rc-def-list {
  grid-column-gap: var(--_gaps---gap-0-5x);
  grid-row-gap: var(--_gaps---gap-0-5x);
  flex-flow: column;
  display: flex;
  margin: 0;
}

.rc-def-list dt,
.rc-def-list dd { margin: 0; }

.rc-def-list__row {
  padding-top: var(--_gaps---gap-0-5x);
  border-top: 1px solid var(--_color---color-white-border);
  grid-column-gap: var(--_gaps---gap-0-125x);
  grid-row-gap: var(--_gaps---gap-0-125x);
  flex-flow: column;
  display: flex;
}

.rc-def-list__term { color: var(--_color---color-white-muted-text); }

.rc-cert-card__links {
  grid-column-gap: var(--_gaps---gap-0-5x);
  grid-row-gap: var(--_gaps---gap-0-5x);
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

/* --- 11. Normentabelle --------------------------------------------------- */

.rc-norms__toolbar {
  grid-column-gap: var(--_gaps---gap-base-unit);
  grid-row-gap: var(--_gaps---gap-0-75x);
  align-items: flex-end;
  justify-content: space-between;
  flex-flow: row wrap;
  display: flex;
  margin-bottom: var(--_gaps---gap-base-unit);
}

.rc-norms__search {
  grid-column-gap: var(--_gaps---gap-0-25x);
  grid-row-gap: var(--_gaps---gap-0-25x);
  flex-flow: column;
  display: flex;
  min-width: min(360px, 100%);
}

.rc-norms__label { color: var(--_color---color-white-muted-text); }

.rc-norms__input {
  height: var(--_forms---forms-input-height);
  padding: 0 var(--_forms---forms-input-x-padding);
  color: var(--_color---color-white);
  background: var(--_forms---forms-input-bg);
  border: 1px solid var(--_forms---forms-input-border-color);
  border-radius: var(--_forms---forms-input-border-radius);
  font-family: inherit;
  font-size: var(--_typography---type-body-size);
  transition: border-color 300ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}

.rc-norms__input:focus {
  outline: none;
  border-color: var(--_forms---forms-input-border-color-focussed);
}

.rc-norms__count { color: var(--_color---color-white-muted-text); }

.rc-norms__scroll {
  border-top: 1px solid var(--_color---color-white-border);
  max-height: 720px;
  overflow-y: auto;
}

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

.rc-norms__table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--_gaps---gap-0-5x) var(--_gaps---gap-0-5x);
  background: var(--_color---color-dark);
  border-bottom: 1px solid var(--_color---color-white-border);
  font-family: var(--_typography---type-font-badges);
  font-size: var(--_typography---type-small-size);
  text-transform: uppercase;
  font-weight: 500;
}

.rc-norms__table td {
  padding: var(--_gaps---gap-0-5x);
  border-bottom: 1px solid var(--_color---color-white-border);
  font-size: var(--_typography---type-small-size);
  line-height: var(--_typography---type-small-line-height);
  vertical-align: top;
}

.rc-norms__table tr:hover td { background: var(--_color---color-dark-15); }

.rc-norms__company { width: 26%; }
.rc-norms__code { width: 20%; font-family: var(--_typography---type-font-badges); }
.rc-norms__date { width: 14%; color: var(--_color---color-white-muted-text); white-space: nowrap; }
.rc-norms__title { color: var(--_color---color-white-muted-text); }

.rc-norms__empty {
  padding: var(--_gaps---gap-base-unit) 0;
  color: var(--_color---color-white-muted-text);
}

/* --- 12. Partikelgalerie ------------------------------------------------- */

.rc-particles__grid {
  grid-column-gap: var(--_gaps---gap-0-5x);
  grid-row-gap: var(--_gaps---gap-0-5x);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  display: grid;
}

.rc-particle {
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
  background: var(--_color---color-white-15);
}

.rc-particle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* --- 13. Grenzwerttabelle (Verfahren) ------------------------------------ */

.rc-limits {
  padding: var(--_gaps---gap-base-unit);
  border: 1px solid var(--_color---color-white-border);
  grid-column-gap: var(--_gaps---gap-0-75x);
  grid-row-gap: var(--_gaps---gap-0-75x);
  flex-flow: column;
  display: flex;
}

.rc-limits__caption { color: var(--_color---color-white-muted-text); }

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

.rc-limits__table th,
.rc-limits__table td {
  padding: var(--_gaps---gap-0-5x) 0;
  border-bottom: 1px solid var(--_color---color-white-border);
  font-size: var(--_typography---type-small-size);
}

.rc-limits__table th {
  font-family: var(--_typography---type-font-badges);
  text-transform: uppercase;
  font-weight: 500;
}

.rc-limits__table td:last-child,
.rc-limits__table th:last-child { text-align: right; }

/* --- 14. Kontaktseite ---------------------------------------------------- */

.rc-contact-page__grid {
  grid-column-gap: var(--_grid---grid-gap);
  grid-row-gap: var(--_gaps---gap-4x);
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  display: grid;
}

.rc-contact-page__aside {
  grid-column-gap: var(--_gaps---gap-2x);
  grid-row-gap: var(--_gaps---gap-2x);
  flex-flow: column;
  display: flex;
}

.rc-contact-page .rc-contact-card {
  padding: 0;
  background: none;
  border: 0;
  width: 100%;
}

.rc-map {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--_color---color-white-border);
  background: var(--_color---color-white-15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

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

.rc-map__consent {
  padding: var(--_gaps---gap-base-unit);
  text-align: center;
  grid-column-gap: var(--_gaps---gap-0-75x);
  grid-row-gap: var(--_gaps---gap-0-75x);
  flex-flow: column;
  align-items: center;
  display: flex;
  max-width: 460px;
}

.rc-map__consent p { color: var(--_color---color-white-muted-text); margin: 0; }

/* --- 15. Startseite: dezente Feinabstimmung ------------------------------ */

html.rc-homepage .rc-customer-services,
html.rc-homepage .rc-realclean-metrics,
html.rc-homepage .rc-solutions-faq,
html.rc-homepage .rc-realclean-faq,
html.rc-homepage .rc-testimonials,
html.rc-homepage .rc-manufactt-marquee {
  scroll-margin-top: calc(var(--_navbar---navbar-height) + 16px);
}

/* Weichere Uebergaenge 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,
.rc-customer-service-card .rc-customer-service-image,
.link-box .arrow-link-bg,
.link-box .arrow-link-text {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Etwas mehr Luft zwischen den nachgeladenen Startseiten-Abschnitten. */
html.rc-homepage .rc-customer-services + .wide-section,
html.rc-homepage .rc-manufactt-marquee {
  margin-top: var(--_gaps---gap-base-unit);
}

/* --- 16. Responsive ------------------------------------------------------ */

@media screen and (max-width: 1137px) {
  .rc-gallery__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-particles__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rc-contact-page__grid { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 991px) {
  .rc-split__grid { grid-template-columns: minmax(0, 1fr); }
  .rc-split--reversed .rc-split__content,
  .rc-split--reversed .rc-split__media { order: initial; }
  .rc-split__content { max-width: none; }
  .rc-page-hero__lead { width: auto; }
  .rc-section-head,
  .rc-section-intro { max-width: none; }
  .rc-gallery__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-particles__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rc-process .badge-text.process-wide-number { width: var(--_grid---grid-3-column); }
  .rc-norms__company { width: 30%; }
}

@media screen and (max-width: 767px) {
  .rc-media-band .image-wrapper { aspect-ratio: 4 / 3; }
  .rc-gallery__grid--2,
  .rc-gallery__grid--3,
  .rc-gallery__grid--4 { grid-template-columns: minmax(0, 1fr); }
  .rc-cert-grid,
  .rc-feature-grid,
  .rc-prose__grid { grid-template-columns: minmax(0, 1fr); }
  .rc-particles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rc-process .process-wide-item-content { flex-flow: column; }
  .rc-process .badge-text.process-wide-number { width: auto; }
  .rc-norms__scroll { max-height: 560px; }
  .rc-norms__table th,
  .rc-norms__table td { padding-left: 0; padding-right: var(--_gaps---gap-0-25x); }
  /* Norm und Stand bleiben sichtbar; das Kartenlayout dafuer steht in
     certificates-reference.css. */
  .rc-norms__company { width: 40%; }
  .rc-limits { padding: var(--_gaps---gap-0-75x); }
}

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