/* Reichweite-LP — destilliert aus mockups/reichweite-lp.html (Design-Freeze,
   inhaltlich ueberholt: Stand vor 16.09.2026).
   Full-bleed-Ausbruch wegen Bricks-Container. Namensleiste (.rl-trust) und
   Testimonial (.rl-testi) seit 16.09.2026 entfernt; Logo-Leiste (.biz-logos)
   und Best Cases (.lp-cases) bringen ihren 100vw-Ausbruch aus
   biz-components.css selbst mit. */

.rl-hero, .rl-split, .rl-funnel, .rl-how, .rl-end {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

.rl-inner {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto; }
.rl-inner--narrow { max-width: 800px; }
/* ─── Icon-Library ─── */
.rl-icon {
  display: block;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain; }
.rl-icon--check { -webkit-mask-image: url('../../assets/icons/fi-rr-check.svg'); mask-image: url('../../assets/icons/fi-rr-check.svg'); }
.rl-icon--cross { -webkit-mask-image: url('../../assets/icons/fi-rr-cross.svg'); mask-image: url('../../assets/icons/fi-rr-cross.svg'); }
/* ════ Sticky Top-Bar mit Logo + CTA ════ */
.rl-topbar {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--biz-line); }
.rl-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem; }
.rl-logo {
  font-family: var(--myk-font-display);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--biz-bg-dark); }
.rl-logo i { color: var(--biz-accent); font-style: italic; }
.myk-kar .rl-topbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.75em 1.4em;
  background: var(--biz-bg-dark);
  color: #fff;
  border-radius: 999px;
  font-family: var(--myk-font-display);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s, gap 0.2s; }
.myk-kar .rl-topbar-cta:hover { background: var(--biz-accent); gap: 0.9em; }
/* ════ Hero (Full-Bleed, links Statement / rechts Form) ════ */
.rl-hero {
  padding: clamp(3rem, 5vw, 5rem) 0 clamp(4rem, 6vw, 6rem);
  background: linear-gradient(180deg, #fff 0%, var(--biz-bg-alt) 100%);
  width: 100vw;
  margin-left: calc(50% - 50vw); }
.rl-hero-inner {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center; }
@media (max-width: 900px) {
  .rl-hero-inner { grid-template-columns: 1fr; }
}
.rl-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.9em;
  background: rgba(0,68,255,0.1);
  color: var(--biz-accent);
  border-radius: 999px;
  font-family: var(--myk-font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1.5rem; }
.rl-hero-badge::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--biz-accent);
  border-radius: 50%;
  animation: rl-pulse 2s ease-in-out infinite; }
.myk-kar .rl-hero-t {
  font-family: var(--myk-font-display);
  /* Seit 16.09.2026 ein Satz mit rund 90 Zeichen statt zweier kurzer
     Zeilen. Bei 4.5rem liefe er neben der Formularkarte auf sechs und mehr
     Zeilen. 3.6vw haelt ihn nach Outfit-900-Laufweiten auf vier Zeilen ab
     901 px (zweispaltiger Hero) bis zur Obergrenze 52 px bei 1440 px;
     ein fester rem-Anteil wie clamp(2rem, 2.6vw + 0.9rem, …) ergab
     zwischen 901 und 1000 px fuenf Zeilen. Geschaetzt, im Browser
     bestaetigen. line-height 0.95 war fuer zwei Zeilen gebaut und liesse
     bei vier Zeilen Ober- und Unterlaengen aneinanderstossen. */
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--biz-bg-dark);
  margin: 0 0 1rem; }
.myk-kar .rl-hero-t i { color: var(--biz-accent); font-style: italic; }
/* Unterzeile als Frage zwischen h1 und Lead: Display-Schrift, dunkel (der
   Akzent liegt schon im h1), Groesse zwischen h1 und Lead. Kein Kasten,
   keine Linie. .myk-kar-Praefix wie beim h1. */
.myk-kar .rl-hero-sub {
  font-family: var(--myk-font-display);
  font-size: clamp(1.25rem, 0.8vw + 1rem, 1.6rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--biz-bg-dark);
  margin: 0 0 1.25rem; }
.rl-hero-lead {
  font-size: clamp(1.05rem, 0.5vw + 0.9rem, 1.25rem);
  line-height: 1.5;
  color: rgba(10,10,10,0.65);
  margin: 0 0 2rem;
  max-width: 44ch; }
.rl-hero-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 0.75rem; }
.rl-hero-bullets li {
  /* block + absolute Bullet statt flex — sonst werden <strong> und
     Resttext eigene Flex-Items und brechen zweispaltig um */
  position: relative;
  display: block;
  padding-left: calc(20px + 0.75em);
  font-family: var(--myk-font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--biz-bg-dark); }
.rl-hero-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px; height: 20px;
  background-color: var(--biz-accent);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M22.32 4.43L8.5 18.25a1 1 0 0 1-1.42 0L1.74 12.9a1 1 0 1 0-1.42 1.42l5.35 5.34a3 3 0 0 0 4.24 0L23.74 5.85a1 1 0 0 0-1.42-1.42z'/%3E%3C/svg%3E");
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask: none; }
.rl-hero-bullets li strong { font-weight: 900; color: var(--biz-bg-dark); }
/* ════ Form-Card (im Hero, rechts) ════ */
.rl-form-card {
  background: #fff;
  border-radius: 12px;
  padding: clamp(2rem, 3vw, 2.75rem);
  box-shadow: 0 20px 50px rgba(0,68,255,0.08), 0 5px 15px rgba(10,10,10,0.06);
  border: 1px solid rgba(0,68,255,0.15); }
.rl-form-eb {
  display: inline-block;
  font-family: var(--myk-font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--biz-accent);
  margin-bottom: 0.75rem; }
.myk-kar .rl-form-t {
  font-family: var(--myk-font-display);
  font-size: clamp(1.35rem, 1vw + 0.9rem, 1.7rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--biz-bg-dark);
  margin: 0 0 0.5rem; }
.rl-form-sub {
  font-size: 0.92rem;
  line-height: 1.4;
  color: rgba(10,10,10,0.6);
  margin: 0 0 1.75rem; }
.rl-form-field {
  margin-bottom: 1rem; }
.rl-form-field label {
  display: block;
  font-family: var(--myk-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.55);
  margin-bottom: 0.4rem; }
.rl-form-field input,
.rl-form-field select {
  width: 100%;
  padding: 0.85em 1em;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: var(--biz-bg-dark);
  background: var(--biz-bg-alt);
  border: 1px solid transparent;
  border-radius: 8px;
  transition: border-color 0.2s, background 0.2s; }
.rl-form-field input:focus,
.rl-form-field select:focus {
  outline: none;
  border-color: var(--biz-accent);
  background: #fff; }
.myk-kar .rl-form-submit {
  width: 100%;
  padding: 1em 1.5em;
  margin-top: 0.5rem;
  background: var(--biz-accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--myk-font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  text-decoration: none;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em; }
.myk-kar .rl-form-submit:hover { background: var(--biz-bg-dark); transform: translateY(-2px); }
.rl-form-submit svg { width: 16px; height: 16px; }
.rl-form-trust {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: rgba(10,10,10,0.55);
  text-align: center; }
.rl-form-trust strong { color: var(--biz-bg-dark); font-weight: 800; }
/* ════ Problem/Lösung (Split-Cards) ════ */
.rl-split {
  padding: clamp(5rem, 8vw, 8rem) 0; }
.rl-split-intro {
  text-align: center;
  /* 960 statt 720 px seit 16.09.2026: Die h2 ist ein Satz mit rund 95
     Zeichen. Bei 720 px lief sie auf vier Zeilen mit einem Einzelwort
     ("altherkoemmliche") in der Mitte, bei 960 px auf drei ausgewogene.
     Der Lead bleibt auf der bisherigen Breite. */
  max-width: 960px;
  margin: 0 auto clamp(3rem, 5vw, 4rem); }
.rl-split-intro .rl-h2 { text-wrap: balance; }
.rl-split-intro .rl-lead { max-width: 720px; margin: 0 auto; }
.myk-kar .rl-h2 {
  font-family: var(--myk-font-display);
  font-size: clamp(2rem, 3vw + 0.6rem, 3.25rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--biz-bg-dark);
  margin: 0 0 1rem; }
.myk-kar .rl-h2 i { color: var(--biz-accent); font-style: italic; }
.rl-lead {
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.15rem);
  line-height: 1.5;
  color: rgba(10,10,10,0.6);
  margin: 0; }
.rl-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem; }
@media (max-width: 800px) {
  .rl-split-grid { grid-template-columns: 1fr; }
}
.rl-split-col {
  padding: clamp(2rem, 3vw, 2.75rem);
  border-radius: 10px; }
.rl-split-col--bad {
  background: var(--biz-bg-alt);
  border: 1px solid var(--biz-line); }
.rl-split-col--good {
  background: var(--biz-bg-dark);
  color: #fff; }
.rl-split-col-eb {
  font-family: var(--myk-font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.9rem; }
.rl-split-col--bad .rl-split-col-eb { color: rgba(10,10,10,0.5); }
.rl-split-col--good .rl-split-col-eb { color: rgba(255,255,255,0.6); }
.myk-kar .rl-split-col-t {
  font-family: var(--myk-font-display);
  font-size: clamp(1.35rem, 1.5vw + 0.6rem, 1.85rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem; }
.rl-split-col--bad .rl-split-col-t { color: var(--biz-bg-dark); }
.rl-split-col--good .rl-split-col-t { color: #fff; }
.rl-split-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem; }
.rl-split-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  font-size: 0.95rem;
  line-height: 1.5; }
.rl-split-list li::before {
  content: '';
  width: 20px; height: 20px;
  flex: 0 0 auto;
  margin-top: 0.15em;
  border-radius: 50%; }
.rl-split-col--bad .rl-split-list li { color: rgba(10,10,10,0.7); }
.rl-split-col--bad .rl-split-list li::before {
  background: rgba(10,10,10,0.1);
  background-image: url('../../assets/icons/fi-rr-cross.svg');
  background-size: 55%;
  background-position: center;
  background-repeat: no-repeat; }
.rl-split-col--good .rl-split-list li { color: rgba(255,255,255,0.92); }
.rl-split-col--good .rl-split-list li::before {
  background: var(--biz-accent);
  background-image: url('../../assets/icons/fi-rr-check.svg');
  background-size: 55%;
  background-position: center;
  background-repeat: no-repeat; }
/* ════ Funnel: Vom Scrollen zur Bewerbung ════ */
.rl-funnel { padding: clamp(4.5rem, 7vw, 7rem) 0 clamp(3.5rem, 5vw, 5rem); }
.rl-funnel-intro {
  max-width: 720px;
  margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
  text-align: center; }
.rl-funnel-viz { max-width: 640px; margin: 0 auto; }
.rl-funnel-stage {
  margin: 0 auto 5px;
  padding: 1.15rem 3rem 1.35rem;
  color: #fff;
  text-align: center; }
.rl-funnel-stage strong {
  display: block;
  font-family: var(--myk-font-display);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem; }
.rl-funnel-stage span {
  display: block;
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0.85; }
.rl-funnel-stage--1 { width: 100%; background: var(--biz-accent); clip-path: polygon(0 0, 100% 0, 93.5% 100%, 6.5% 100%); }
.rl-funnel-stage--2 { width: 87%; background: #0032c8; clip-path: polygon(0 0, 100% 0, 92.5% 100%, 7.5% 100%); }
.rl-funnel-stage--3 { width: 74%; background: var(--biz-bg-dark); clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%); }
.rl-funnel-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  max-width: max-content;
  margin: 1.5rem auto 0;
  padding: 0.85em 1.5em;
  background: var(--biz-accent-soft);
  border-radius: 999px;
  font-family: var(--myk-font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--biz-bg-dark);
  text-align: center; }
.rl-funnel-result::before {
  content: '';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--biz-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M22.32 4.43L8.5 18.25a1 1 0 0 1-1.42 0L1.74 12.9a1 1 0 1 0-1.42 1.42l5.35 5.34a3 3 0 0 0 4.24 0L23.74 5.85a1 1 0 0 0-1.42-1.42z'/%3E%3C/svg%3E");
  background-size: 55%;
  background-position: center;
  background-repeat: no-repeat; }
@media (max-width: 500px) {
  .rl-funnel-stage { padding: 1rem 2rem 1.2rem; }
  .rl-funnel-stage--2 { width: 92%; }
  .rl-funnel-stage--3 { width: 82%; }
  .rl-funnel-result { border-radius: 18px; padding: 0.85em 1.2em; }
}
/* ════ How it works (3 Schritte) ════ */
.rl-how {
  padding: clamp(5rem, 8vw, 8rem) 0;
  background: var(--biz-bg-alt);
  width: 100vw;
  margin-left: calc(50% - 50vw); }
.rl-how-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(3rem, 5vw, 4rem); }
/* ════ Ablauf auf einer Achse ════
   Drei Karten nebeneinander liest das Auge als „gleichzeitig" — bei
   einem Ablauf ueber Wochen die falsche Aussage. Dieselbe Machart wie
   .lp-prozess-steps in biz-components.css; die Werte stehen hier
   eigenstaendig, weil diese Seite ihr eigenes CSS mitbringt.
   Die Ziffer auf der Achse sagt, der Wievielte ein Schritt ist; die
   Pille in der Karte sagt, WANN er passiert. Beides zusammen ergibt
   „Schritt 1, Woche 1". */
.rl-how-steps {
  --achse-b: 36px;
  --achse-l: clamp(1rem, 1.8vw, 1.75rem);
  --achse-y: clamp(1rem, 1.6vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--achse-y);
  counter-reset: rl-schritt;
  max-width: 880px;
  width: 90%;
  margin: 0 auto; }
.rl-how-step {
  position: relative;
  margin-left: calc(var(--achse-b) + var(--achse-l));
  padding: clamp(2rem, 3vw, 2.5rem);
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--biz-line);
  text-align: left; }
.rl-how-step::before {
  counter-increment: rl-schritt;
  content: counter(rl-schritt);
  position: absolute;
  top: 0;
  left: calc(-1 * (var(--achse-b) + var(--achse-l)));
  width: var(--achse-b);
  height: var(--achse-b);
  display: grid;
  place-items: center;
  background: var(--biz-accent);
  color: #fff;
  border-radius: 50%;
  font-family: var(--myk-font-display);
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1;
  z-index: 1; }
.rl-how-step::after {
  content: '';
  position: absolute;
  top: var(--achse-b);
  bottom: calc(-1 * var(--achse-y));
  left: calc(-1 * (var(--achse-b) / 2 + var(--achse-l)) - 1px);
  width: 2px;
  background: var(--biz-line); }
.rl-how-step:last-child::after { content: none; }
/* Auf dem Telefon kostet die Achse zu viel. Im Messrahmen bei 360 px
   gemessen: Von 288 px Containerbreite blieben der Karte 170 px Text —
   die Achse nahm 52, die Polsterung 64. Drei Stellschrauben, zusammen
   rund 70 px mehr: Der Container nutzt die volle Breite (den Rand gibt
   .rl-inner ohnehin vor), die Achse wird schmaler, die Polsterung
   kleiner. Die Achse bleibt, weil sonst die Aussage „nacheinander"
   genau dort verloren geht, wo die meisten Leser sind. */
@media (max-width: 620px) {
  .rl-how-steps {
    --achse-b: 28px;
    --achse-l: 0.6rem;
    width: 100%; }
  .rl-how-step { padding: 1.35rem 1.25rem; }
  .rl-how-step::before { font-size: 0.85rem; }
}
.rl-how-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: var(--biz-accent);
  color: #fff;
  border-radius: 50%;
  font-family: var(--myk-font-display);
  font-weight: 900;
  font-size: 1.1rem;
  margin-bottom: 1.5rem; }
.myk-kar .rl-how-step-t {
  font-family: var(--myk-font-display);
  font-size: clamp(1.15rem, 0.6vw + 0.95rem, 1.35rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--biz-bg-dark);
  margin: 0 0 0.75rem; }
.rl-how-step-d {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(10,10,10,0.65);
  margin: 0; }
/* ════ Best Cases (geteilte Komponente .lp-cases) ════
   Seit 16.09.2026 an der Stelle des Testimonials, zwischen dem grauen
   Ablauf (.rl-how) und der FAQ (.myk-kar-section ohne eigenen Grund, also
   weiss auf dem Artikel). Angeglichen an den Rhythmus der rl-Sektionen:
   - weisser statt grauer Grund, sonst liefe die Sektion grau in grau in
     den Ablauf hinein;
   - Innenabstand, Breite (90 %, max. 1200 px), Ueberschrift und
     zentriertes Intro wie .rl-split / .rl-how;
   - kein Abstand unter dem Raster, weil hier kein Uebersichtsknopf folgt.
   Gescoped auf die Artikelklasse .myk-reichweite-lp aus dem Render; die
   traegt auch die Vorschau-Route, die Body-Klasse myk-biz-reichweite nicht.
   Karten (10 px Radius, kein Schatten) kommen aus biz-components.css. */
.myk-reichweite-lp .lp-cases {
  background: var(--biz-bg);
  padding: clamp(5rem, 8vw, 8rem) 0; }
.myk-reichweite-lp .lp-cases .lp-inner { width: 90%; max-width: 1200px; }
.myk-reichweite-lp .lp-cases-intro {
  max-width: 720px;
  margin: 0 auto clamp(3rem, 5vw, 4rem);
  text-align: center; }
.myk-reichweite-lp .lp-cases .lp-h2 {
  font-size: clamp(2rem, 3vw + 0.6rem, 3.25rem);
  line-height: 1.05;
  margin: 0 0 1rem; }
.myk-reichweite-lp .lp-cases-intro .lp-lead {
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.15rem);
  margin: 0 auto; }
.myk-reichweite-lp .lp-cases-grid { margin-bottom: 0; }
/* Auf weissem Grund braucht eine Karte ohne Bild einen eigenen Ton, sonst
   ist nur der dunkle Verlauf unten sichtbar und die Kartenkante fehlt.
   Dunkel, nicht grau: Kundenname und Kennzahl stehen in Weiss. */
.myk-reichweite-lp .lp-case { background: var(--biz-bg-dark); }
/* In biz-components.css steht die 600er-Regel vor der 900er und verliert;
   jede Seite mit Cases wiederholt beide in dieser Reihenfolge (wie
   leistung-performance.css und leistung-eventmanagement.css). */
@media (max-width: 900px) {
  .myk-reichweite-lp .lp-cases-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .myk-reichweite-lp .lp-cases-grid { grid-template-columns: 1fr; }
}
/* ════ FAQ kurz ════ */
.rl-faq {
  padding: clamp(5rem, 8vw, 8rem) 0;
  background: var(--biz-bg-alt);
  width: 100vw;
  margin-left: calc(50% - 50vw); }
.rl-faq-inner {
  max-width: 800px;
  margin: 0 auto;
  width: 90%; }
.rl-faq-intro { text-align: center; margin: 0 0 clamp(2.5rem, 4vw, 3rem); }
.rl-faq-list {
  display: grid;
  gap: 0.75rem; }
.rl-faq-item {
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--biz-line);
  overflow: hidden; }
.rl-faq-q {
  padding: 1.25rem 1.5rem;
  font-family: var(--myk-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--biz-bg-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none; }
.rl-faq-q::-webkit-details-marker { display: none; }
.rl-faq-toggle {
  font-family: var(--myk-font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--biz-accent);
  transition: transform 0.2s; }
details[open] .rl-faq-toggle { transform: rotate(45deg); }
.rl-faq-a {
  padding: 0 1.5rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(10,10,10,0.7); }
/* ════ Sticky Mobile-CTA ════ */
/* .myk-kar-Prefix nötig: der .myk-kar a-Reset (color:inherit) hat
   sonst höhere Spezifität und macht den Text schwarz-auf-schwarz */
.myk-kar .rl-sticky-cta {
  position: fixed;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  left: 1rem;
  right: 1rem;
  z-index: 9998;
  background: var(--biz-bg-dark);
  color: #fff;
  padding: 1em 1.5em;
  border-radius: 999px;
  font-family: var(--myk-font-display);
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  display: none; }
@media (max-width: 900px) {
  .myk-kar .rl-sticky-cta { display: block; }
}
/* ════ Ende-CTA ════ */
.rl-end {
  padding: clamp(6rem, 10vw, 10rem) 0;
  text-align: center; }
/* Hier stand ein Knopf, der auf #formular zeigte und den Leser 6.198
   Bildpunkte nach oben zurueckwarf. Jetzt stehen die drei Kontaktwege,
   die jede andere Leistungsseite auch anbietet — sie wirken sofort.
   Warum nicht die Formularkarte ein zweites Mal: siehe den Kommentar in
   leistung-reichweite.php, Fluent Forms vergibt seine Kennungen je
   Formularnummer und nicht je Instanz. */
.rl-end-wege {
  margin-top: clamp(2rem, 3.5vw, 3rem); }
.rl-end-wege .myk-kar-apply-actions {
  justify-content: center; }
.myk-kar .rl-end-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  padding: 1.15em 2.4em;
  margin-top: 2rem;
  background: var(--biz-accent);
  color: #fff;
  border-radius: 999px;
  font-family: var(--myk-font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, gap 0.2s; }
.myk-kar .rl-end-cta-btn:hover { background: var(--biz-bg-dark); transform: translateY(-3px); gap: 1.2em; }
.rl-end-cta-btn svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
  .myk-kar-inner, .lp-inner, .bc-inner, .cd-inner, .kt-inner, .rl-inner { width: 90%; }
}
@media (max-width: 900px) {
  .rl-hero-inner { gap: 2rem; }
  .rl-form-card { padding: 1.5rem 1.25rem; }
}
/* ── Fluent Forms (LP-Formular) an die Mockup-Card angepasst ──
   Alles auf .rl-form-card gescoped -> andere Fluent Forms der Site bleiben unberuehrt.
   Klassen-Mapping: .ff-el-group=Feldzeile, .ff-el-form-control=Input, .ff-btn-submit=Button. */
.rl-form-card .fluentform { margin: 0; }
.rl-form-card .fluentform .ff-el-group { margin-bottom: 1rem; }
.rl-form-card .fluentform .ff_form_instance .ff-el-group:last-of-type { margin-bottom: 0; }

.rl-form-card .fluentform .ff-el-input--label label {
  display: block;
  font-family: var(--myk-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--biz-bg-dark);
  margin-bottom: 0.4rem;
  padding: 0;
}
.rl-form-card .fluentform .ff-el-is-required label:after,
.rl-form-card .fluentform .ff-el-input--label.asterisk-right label:after { color: var(--biz-accent); }

.rl-form-card .fluentform input.ff-el-form-control,
.rl-form-card .fluentform select.ff-el-form-control,
.rl-form-card .fluentform textarea.ff-el-form-control {
  width: 100%;
  padding: 0.85em 1em;
  height: auto;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--biz-bg-dark);
  background: var(--biz-bg-alt);
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: none;
  transition: border-color 0.2s, background 0.2s;
}
.rl-form-card .fluentform textarea.ff-el-form-control { min-height: 96px; resize: vertical; }
.rl-form-card .fluentform .ff-el-form-control:focus {
  outline: none;
  border-color: var(--biz-accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0,68,255,0.1);
}
.rl-form-card .fluentform .ff-el-form-control::placeholder { color: rgba(10,10,10,0.4); }

/* Telefonfeld (intl-tel-input) auf volle Breite */
.rl-form-card .fluentform .iti { width: 100%; display: block; }

/* Datenschutz-Checkbox dezent */
.rl-form-card .fluentform .ff-el-form-check-label,
.rl-form-card .fluentform .ff-el-form-check label {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(10,10,10,0.7);
  line-height: 1.4;
}
.rl-form-card .fluentform .ff-el-form-check-input:checked { accent-color: var(--biz-accent); }
.rl-form-card .fluentform a { color: var(--biz-accent); }

/* Submit-Button = rl-form-submit-Optik */
.rl-form-card .fluentform .ff-btn-submit {
  width: 100%;
  padding: 1em 1.5em;
  margin-top: 0.5rem;
  background: var(--biz-accent) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0;
  border-radius: 999px;
  font-family: var(--myk-font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.rl-form-card .fluentform .ff-btn-submit:hover {
  background: var(--biz-bg-dark) !important;
  transform: translateY(-2px);
}

/* Erfolg-/Fehlermeldungen in Marken-Optik */
.rl-form-card .fluentform .ff-message-success {
  background: var(--biz-accent-soft);
  border: 1px solid rgba(0,68,255,0.2);
  border-radius: 8px;
  color: var(--biz-bg-dark);
}

/* ── Kompaktere Form-Card (nach Feld-Kürzung) — engere Abstände ── */
.rl-form-card { padding: clamp(1.5rem, 2.2vw, 2rem); }
.rl-form-card .rl-form-t { font-size: clamp(1.25rem, 1vw + 0.8rem, 1.5rem); margin-bottom: 0.35rem; }
.rl-form-card .rl-form-sub { margin-bottom: 1rem; font-size: 0.9rem; }
.rl-form-card .fluentform .ff-el-group { margin-bottom: 0.7rem; }
.rl-form-card .fluentform .ff-el-input--label label { font-size: 0.72rem; margin-bottom: 0.3rem; }
.rl-form-card .fluentform input.ff-el-form-control,
.rl-form-card .fluentform select.ff-el-form-control,
.rl-form-card .fluentform textarea.ff-el-form-control { padding: 0.72em 0.95em; font-size: 0.92rem; }
.rl-form-card .fluentform textarea.ff-el-form-control { min-height: 76px; }
.rl-form-card .fluentform .ff-btn-submit { padding: 0.9em 1.5em; margin-top: 0.3rem; }
.rl-form-card .rl-form-trust { margin-top: 0.75rem; font-size: 0.74rem; }

/* ════ Problem-Sektion (21.09.2026) ════
   Steht zwischen Logo-Leiste und Vergleich. Weisser Grund: Der Vergleich
   darunter ist ebenfalls weiss, der Ablauf weiter unten grau — der
   Wechsel kommt erst dort, sonst laeuft die halbe Seite grau.

   Drei Karten, bewusst ohne Nummern: Es ist keine Reihenfolge, sondern
   drei gleichrangige Situationen. */
.rl-problem {
  padding: clamp(4rem, 7vw, 6rem) 0; }
.rl-problem-intro {
  max-width: 760px;
  width: 90%;
  margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
  text-align: center; }
.rl-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1200px;
  width: 90%;
  margin: 0 auto; }
@media (max-width: 900px) {
  .rl-problem-grid { grid-template-columns: 1fr; }
}
/* Keine Akzentkante am Kasten — der Styleguide verbietet sie
   ausdruecklich (class-styleguide.php:329: „Keine farbige Linie an der
   Seite — das wirkt wie generisches KI-Layout. Status per
   Hintergrundfarbe + Icon, nicht per Akzent-Linie."). Hier stand bis zum
   21.09.2026 eine 3-px-Oberkante in Akzentblau; Jakob hat sie gemeldet.
   Es war das vierte Mal, dass ich zu diesem Mittel gegriffen habe.
   Farbe traegt jetzt das Icon auf seiner 44x44-Flaeche. */
.rl-problem-karte {
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--biz-line);
  border-radius: 10px; }
/* Icon-Kachel in der Hausmachart: 44x44, Radius 10, Icon 22x22 —
   dieselben Werte wie .lp-prozess-step-i und .lp-related-c-i. */
.rl-problem-i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--biz-accent-soft);
  color: var(--biz-accent);
  border-radius: 10px;
  margin-bottom: 1.25rem; }
.rl-problem-i .lp-icon {
  width: 22px;
  height: 22px; }
.myk-kar .rl-problem-t {
  font-family: var(--myk-font-display);
  font-size: clamp(1.05rem, 0.5vw + 0.9rem, 1.2rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--biz-bg-dark);
  margin: 0 0 0.6rem; }
.rl-problem-d {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(10,10,10,0.65);
  margin: 0; }

/* ════ Ablauf als Zeitleiste ════
   Traegt ein Schritt eine Zeitangabe, wird aus dem Zahlenkreis eine
   Pille — „ab Woche 3–4" passt in keinen 48-px-Kreis. Ohne Zeitangabe
   bleibt alles wie vorher. */
.rl-how-step--zeit .rl-how-step-num {
  width: auto;
  height: auto;
  padding: 0.45em 1em;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap; }

/* ════ Leistungsumfang (21.09.2026) ════
   Nach dem Ablauf, vor den Cases. Grauer Grund waere doppelt — der
   Ablauf darueber ist bereits grau. Also weiss. */
.rl-leistung {
  padding: clamp(4rem, 7vw, 6rem) 0; }
.rl-leistung-intro {
  max-width: 760px;
  width: 90%;
  margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
  text-align: center; }
.rl-leistung-liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 1000px;
  width: 90%;
  margin: 0 auto;
  padding: 0;
  list-style: none; }
@media (max-width: 800px) {
  .rl-leistung-liste { grid-template-columns: 1fr; }
}
.rl-leistung-punkt {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.35rem 1.5rem;
  background: #fff;
  border: 1px solid var(--biz-line);
  border-radius: 10px; }
/* Haken als reine Form, ohne Schriftzeichen: Ein Haken aus der Schrift
   sitzt je nach Schnitt anders auf der Grundlinie. */
.rl-leistung-haken {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--biz-accent);
  position: relative; }
.rl-leistung-haken::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg); }
.rl-leistung-text {
  display: grid;
  gap: 0.2rem; }
.rl-leistung-text strong {
  font-family: var(--myk-font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--biz-bg-dark); }
.rl-leistung-text span {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(10,10,10,0.65); }