/* Gemeinsame Bausteine der eigenen Blöcke (Leistungen, Kennzahlen, Webinare, Fakten, Kontakt …).
   Maße aus dem Figma-Entwurf (1440 px). Abstände und Breiten setzt der jeweilige Block. */

/* Abschnittsüberschrift */
.rx-h2{margin:0;font-weight:700;font-size:40px;line-height:normal;text-transform:uppercase}

/* Kleine gelbe Zeile über einer Überschrift */
.rx-kicker{margin:0;font-weight:400;font-size:18px;line-height:26px;color:var(--rx-yellow)}

/* Pfeil-Link: Symbol und Text sind gemeinsam klickbar; Hover und Tastaturfokus unterstreichen den Text. */
.rx-arrow-link{display:inline-flex;align-items:center;gap:10px;color:var(--rx-white);font-weight:500;font-size:14px;line-height:normal;text-decoration:none}
.rx-arrow-link__icon{position:relative;flex:none;width:24px;height:24px}
.rx-arrow-link__icon img{position:absolute;inset:0;width:100%;height:100%}
.rx-arrow-link__label{text-underline-offset:2px}
a:not([aria-disabled="true"]):is(:hover,:focus-visible) .rx-arrow-link__label{text-decoration:underline}
a.rx-arrow-link:is(:hover,:focus-visible){color:var(--rx-white)}
a.rx-arrow-link:focus-visible{outline:none}

/* Abschnittskopf: kleine gelbe Zeile (optional als Link) und Überschrift mit 20 px Abstand */
.rx-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
a.rx-kicker{text-decoration:none;transition:color 150ms}
a.rx-kicker:hover{color:#fff}

/* Schlagwort oder Sprungmarke (Figma „Tag“): gelb umrandet, 40 px hoch */
.rx-tag{display:inline-flex;align-items:center;box-sizing:border-box;height:40px;padding:6px 11px;border:1px solid var(--rx-yellow);border-radius:8px;background:#1c1c1c;color:var(--rx-yellow);font-size:18px;line-height:26px;white-space:nowrap;text-decoration:none}
a.rx-tag{transition:background-color 150ms,color 150ms}
a.rx-tag:hover{background:var(--rx-yellow);color:#1c1c1c}

/* Buttons: eine Gestaltung für Links und Formular-Buttons. Der reservierte Rand verhindert Größensprünge. */
.rx-btn{--rx-btn-accent:var(--rx-red);display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;box-sizing:border-box;width:fit-content;min-height:40px;max-width:100%;padding:6px 11px;border:1px solid transparent;border-radius:8px;background:var(--rx-yellow);color:var(--rx-black);font:400 18px/26px Rubik,sans-serif;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;transition:color 150ms,border-color 150ms}
.rx-btn--secondary{--rx-btn-accent:var(--rx-yellow);background:#484848;color:var(--rx-white)}
.rx-btn:not(:disabled):not([aria-disabled="true"]):is(:hover,:focus-visible){color:var(--rx-btn-accent);border-color:var(--rx-btn-accent);outline:none}
.rx-btn:is(:disabled,[aria-disabled="true"]),.rx-arrow-link[aria-disabled="true"]{opacity:.3;cursor:default;pointer-events:none}

/* Gelbe Trennlinie: ein Element ohne eigene Höhe, der 1-px-Strich liegt direkt darüber (wie im Figma-Export).
   motion.js (Muster A4) zeichnet sie von links nach rechts ein. */
.rx-line{position:relative;display:block;height:0;flex:none;transform-origin:left center}
.rx-line::before{content:"";position:absolute;inset:-1px 0 0;background:var(--rx-yellow)}
.rx-line--grau::before{background:#484848}

/* Fließtext: Überschrift 28 px fett mit normaler Zeilenhöhe (33 px), darunter eine Leerzeile in Überschriftgröße (33,1875 px ≈ Figma 33,18 px, als Vielfaches von 1/64 px ohne Rundungsrest)
   oder knapp 20 px; Absätze 18/26 px mit je einer Leerzeile (26 px) Abstand */
.rx-copy{display:flex;flex-direction:column;align-items:flex-start;overflow-wrap:break-word}
:where(.rx-copy) :is(p,h2,h3){margin:0}
.rx-copy__title{font-weight:700;font-size:28px;line-height:normal}
.rx-copy__text{font-weight:400;font-size:18px;line-height:26px}
.rx-copy__text+.rx-copy__text{margin-top:26px}
.rx-copy__title+.rx-copy__text{margin-top:33.1875px}
.rx-copy--knapp .rx-copy__title+.rx-copy__text{margin-top:20px}
.rx-copy__text--fett{font-weight:700}

@media(max-width:767px){
 .rx-h2{font-size:30px;line-height:1.15}
 .rx-copy__title{font-size:20px;line-height:26px}
 .rx-copy__text{font-size:16px;line-height:24px}
 .rx-copy__text+.rx-copy__text,.rx-copy .rx-copy__title+.rx-copy__text{margin-top:16px}
}