/* ============================================================
   Landingpage „Gutachtenanfragen automatisch erhalten“
   (/gutachtenanfragen-automatisch-erhalten)
   Leitmotiv: die Sendungsverfolgung einer Anfrage — Statuskarte im
   Kopfbereich, Routenlinie mit fünf Piktogramm-Stationen und kleinen
   Szenen darunter; danach der Trichter der drei Wege zu uns, kurze
   Vorteile, Paketkarten und Platin. Farben und Schriften aus dem Theme
   (tailwind/input.css), Präfix jr- gegen Kollisionen.
   ============================================================ */

.jr-icon { width: 1.5rem; height: 1.5rem; stroke-width: 1.8; flex: none; }
.btn .jr-icon { width: 1.15em; height: 1.15em; stroke-width: 2.1; }

/* ---------- Kopfbereich ---------- */
.jr-hero { padding-block: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem); }
.jr-hero-grid { display: grid; gap: 2.25rem; align-items: center; }
.jr-title {
  margin-top: 0.8rem; max-width: 22ch;
  font-size: clamp(1.95rem, 1.4rem + 2.5vw, 3.2rem); line-height: 1.07;
}
.jr-title-sub {
  display: block; margin-top: 0.4rem;
  font-size: 0.7em; line-height: 1.15; color: var(--color-primary-700);
}
.jr-hero-lead { margin-top: 1.15rem; max-width: 40rem; }
.jr-hero .btn-row { margin-top: 1.6rem; }
.jr-hero-mail { margin-top: 0.9rem; font-size: 0.95rem; color: var(--color-primary-800); }
.jr-hero-mail a {
  display: inline-block; padding-block: 0.3rem;
  font-weight: 600; color: var(--color-primary-700);
  text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere;
}
.jr-hero-mail a:hover { color: var(--color-primary-900); }

/* Statuskarte: eine Anfrage wie eine Sendung verfolgt */
.jr-track { margin: 0 auto; width: 100%; max-width: 26rem; }
.jr-track-card {
  position: relative;
  padding: 1.25rem 1.2rem 1.35rem;
  background: #fff;
  border: 1px solid color-mix(in oklch, var(--color-primary-900) 10%, transparent);
  border-radius: var(--radius-xl2);
  box-shadow: var(--shadow-lift);
}
.jr-track-head {
  display: grid; gap: 0.2rem;
  padding-bottom: 0.9rem; margin-bottom: 0.95rem;
  border-bottom: 1px dashed color-mix(in oklch, var(--color-primary-700) 30%, transparent);
}
.jr-track-kicker {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-primary-700);
}
.jr-track-case { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--color-primary-950); }
.jr-track-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.jr-track-step {
  position: relative;
  display: grid; grid-template-columns: 2.35rem minmax(0, 1fr) auto; gap: 0.8rem; align-items: center;
}
.jr-track-step:not(:last-child)::after {
  content: ""; position: absolute; left: calc(1.175rem - 1px); top: 2.45rem; bottom: -0.75rem; width: 2px;
  background: var(--color-primary-600);
}
.jr-track-dot {
  width: 2.35rem; height: 2.35rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--color-primary-600); color: #fff;
}
.jr-track-dot .jr-icon { width: 1.15rem; height: 1.15rem; stroke-width: 2; }
.jr-track-text { display: grid; gap: 0.05rem; line-height: 1.3; }
.jr-track-text strong { font-size: 0.98rem; color: var(--color-primary-950); }
.jr-track-text span { font-size: 0.84rem; color: var(--color-primary-800); }
.jr-track-step--now .jr-track-dot {
  background: var(--color-accent-500); color: var(--color-primary-950);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-accent-500) 35%, transparent);
}
.jr-track-flag {
  padding: 0.3rem 0.65rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  background: var(--color-primary-950); color: var(--color-accent-300);
  transform: rotate(-4deg);
}
.jr-track figcaption {
  margin-top: 0.8rem; font-size: 0.85rem; line-height: 1.5;
  color: var(--color-primary-800); text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .jr-track-step--now .jr-track-dot { animation: jr-ping 2.4s ease-out 3; }
}
@keyframes jr-ping {
  0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent-500) 70%, transparent); }
  70%, 100% { box-shadow: 0 0 0 12px color-mix(in oklch, var(--color-accent-500) 0%, transparent); }
}
@media (min-width: 64rem) {
  .jr-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: 3.5rem; }
}

/* Sandfläche gliedert die Strecke */
.jr-band { background: var(--color-sand); }

/* ---------- Route ---------- */
.jr-route { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 2.5rem; }
.jr-stop {
  position: relative;
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; row-gap: 1.1rem;
}
/* Die Routenlinie verbindet die Stationen */
.jr-stop:not(:last-child)::before {
  content: ""; position: absolute; left: calc(1.75rem - 1.5px); top: 3.75rem; bottom: -2.5rem; width: 3px;
  background: repeating-linear-gradient(to bottom, var(--color-primary-600) 0 8px, transparent 8px 14px);
}
.jr-stop-mark { position: relative; grid-row: span 2; align-self: start; }
.jr-stop-icon {
  width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border-radius: 50%;
  background: #fff; color: var(--color-primary-700);
  box-shadow: 0 0 0 2px var(--color-primary-600), 0 0 0 6px var(--color-cream);
}
.jr-stop-no {
  position: absolute; right: -0.35rem; top: -0.35rem;
  min-width: 1.45rem; height: 1.45rem; padding-inline: 0.3rem;
  display: grid; place-items: center; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; line-height: 1;
  background: var(--color-accent-500); color: var(--color-primary-950);
}
.jr-stop--mail .jr-stop-icon { background: var(--color-accent-500); color: var(--color-primary-950); box-shadow: 0 0 0 2px var(--color-accent-700), 0 0 0 6px var(--color-cream); }
.jr-stop--mail .jr-stop-no { background: var(--color-primary-900); color: #fff; }
.jr-stop-label {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-primary-700);
}
.jr-stop-title { margin-top: 0.35rem; font-size: clamp(1.25rem, 1.08rem + 0.7vw, 1.6rem); line-height: 1.2; }
.jr-stop-text { margin-top: 0.6rem; max-width: 38rem; line-height: 1.7; }
.jr-stop-scene { grid-column: 2; min-width: 0; }

@media (min-width: 64rem) {
  .jr-route { gap: 2.75rem; }
  .jr-stop { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 24rem); column-gap: 2.25rem; align-items: start; }
  .jr-stop:not(:last-child)::before { left: calc(2rem - 1.5px); top: 4.25rem; bottom: -2.75rem; }
  .jr-stop-mark { grid-row: auto; }
  .jr-stop-icon { width: 4rem; height: 4rem; }
  .jr-stop-icon .jr-icon { width: 1.75rem; height: 1.75rem; }
  .jr-stop-copy { padding-top: 0.35rem; }
  .jr-stop-scene { grid-column: 3; }
}

/* ---------- Szenen ---------- */
.jr-scene {
  position: relative; margin: 0;
  padding: 1rem 1.05rem;
  background: #fff;
  border: 1px solid color-mix(in oklch, var(--color-primary-900) 10%, transparent);
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
  font-size: 0.9rem; line-height: 1.45;
}
.jr-scene-note {
  margin-top: 0.75rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--color-primary-700);
}
.jr-scene--photo { padding: 0; overflow: hidden; background: var(--color-primary-100); }
.jr-scene--mail { background: var(--color-sand); }
.jr-scene-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* Suchfeld über dem Foto */
.jr-searchbar {
  position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.85rem;
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 0.95rem; border-radius: 999px;
  background: #fff; color: var(--color-primary-950);
  box-shadow: 0 6px 18px -6px oklch(0.2 0.03 197 / 0.45);
  font-weight: 600; font-size: 0.95rem;
}
.jr-searchbar .jr-icon { width: 1.15rem; height: 1.15rem; stroke-width: 2.2; color: var(--color-primary-700); }

/* Ergebnisseite mit Anzeige */
.jr-serp-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.85rem; border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--color-primary-900) 16%, transparent);
  font-weight: 600; color: var(--color-primary-950);
}
.jr-serp-bar .jr-icon { width: 1rem; height: 1rem; stroke-width: 2.2; color: var(--color-primary-700); }
.jr-serp-ad {
  margin-top: 0.85rem; padding: 0.75rem 0.8rem;
  border-radius: 0.7rem; background: var(--color-primary-50);
  box-shadow: inset 3px 0 0 var(--color-accent-500);
}
.jr-serp-src { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--color-primary-800); }
.jr-serp-tag { font-weight: 700; color: var(--color-primary-950); }
.jr-serp-title { margin-top: 0.2rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--color-primary-700); }
.jr-serp-desc { margin-top: 0.2rem; font-size: 0.86rem; color: var(--color-primary-900); }
.jr-serp-hit { margin-top: 0.8rem; padding-inline: 0.8rem; display: grid; gap: 0.35rem; }
.jr-serp-hit span { display: block; height: 0.5rem; border-radius: 999px; background: color-mix(in oklch, var(--color-primary-900) 10%, transparent); }
.jr-serp-hit span:first-child { width: 45%; }
.jr-serp-hit span:nth-child(2) { width: 80%; height: 0.65rem; background: color-mix(in oklch, var(--color-primary-600) 22%, transparent); }
.jr-serp-hit span:last-child { width: 92%; }

/* Anfragestrecke */
.jr-form-head {
  display: grid; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-primary-950);
}
.jr-form-bar { display: block; height: 0.4rem; border-radius: 999px; background: var(--color-primary-100); overflow: hidden; }
.jr-form-bar span { display: block; width: 88%; height: 100%; border-radius: inherit; background: var(--color-primary-600); }
.jr-form-rows { margin: 0.85rem 0 0; display: grid; gap: 0.6rem; }
.jr-form-row dt { font-size: 0.8rem; color: var(--color-primary-800); }
.jr-form-row dd {
  margin: 0.2rem 0 0;
  display: inline-flex; align-items: flex-start; gap: 0.4rem;
  padding: 0.3rem 0.65rem; border-radius: 0.55rem;
  background: var(--color-primary-50);
  border: 1px solid color-mix(in oklch, var(--color-primary-600) 30%, transparent);
  font-weight: 600; color: var(--color-primary-950);
}
.jr-form-row dd svg { width: 0.9rem; height: 0.9rem; margin-top: 0.2rem; flex: none; color: var(--color-primary-700); }

/* Vorschlagskachel mit Siegel */
.jr-match {
  background:
    radial-gradient(circle at 85% 15%, transparent 0 22%, color-mix(in oklch, var(--color-accent-500) 30%, transparent) 22.3% 23%, transparent 23.3% 38%, color-mix(in oklch, var(--color-primary-600) 16%, transparent) 38.3% 39%, transparent 39.3%),
    var(--color-cream);
}
.jr-match-card {
  padding: 0.9rem; border-radius: 0.85rem; background: #fff;
  border: 2px solid var(--color-accent-600);
  box-shadow: var(--shadow-card);
}
.jr-match-flags { display: flex; justify-content: space-between; gap: 0.5rem; }
.jr-match-reco {
  padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; background: var(--color-accent-500); color: var(--color-primary-950);
}
.jr-match-adm {
  padding: 0.15rem 0.45rem; border-radius: 0.35rem;
  font-size: 0.72rem; font-weight: 600; color: var(--color-primary-800);
  border: 1px solid color-mix(in oklch, var(--color-primary-800) 35%, transparent);
}
.jr-match-body { margin-top: 0.7rem; display: flex; align-items: center; gap: 0.85rem; }
.jr-match-seal { flex: none; }
.jr-match-seal svg { display: block; width: clamp(3.75rem, 3rem + 3vw, 4.75rem); height: auto; aspect-ratio: 1; }
.jr-match-who { display: grid; gap: 0.15rem; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.jr-match-who strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--color-primary-950); }
.jr-match-who span { font-size: 0.84rem; color: var(--color-primary-800); }
.jr-match-state {
  margin-top: 0.8rem; padding: 0.55rem 0.7rem;
  display: flex; align-items: flex-start; gap: 0.5rem;
  border-radius: 0.6rem; background: var(--color-primary-50);
  font-weight: 700; color: var(--color-primary-900);
}
.jr-match-state svg { width: 1.05rem; height: 1.05rem; margin-top: 0.1rem; flex: none; color: var(--color-primary-700); }
.jr-match-state span span { display: block; font-size: 0.78rem; font-weight: 600; color: var(--color-primary-800); }

/* E-Mail im Postfach: ragt von unten ins Foto, damit der Sachverständige sichtbar bleibt */
.jr-mail {
  margin: -1.5rem 0.75rem 0.75rem; position: relative;
  padding: 0.85rem 0.95rem; border-radius: 0.85rem;
  background: #fff; box-shadow: 0 10px 28px -10px oklch(0.2 0.03 197 / 0.5);
  border-top: 4px solid var(--color-accent-500);
}
.jr-mail-from { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; color: var(--color-primary-700); }
.jr-mail-from .jr-icon { width: 1rem; height: 1rem; stroke-width: 2.2; }
.jr-mail-subject { margin-top: 0.3rem; font-weight: 700; line-height: 1.3; color: var(--color-primary-950); }
.jr-mail-origin { margin-top: 0.45rem; font-size: 0.76rem; font-style: italic; color: var(--color-primary-800); }

/* ---------- Drei Wege zu uns, eine Anfrage bei Ihnen ---------- */
.jr-funnel { --jr-funnel-gap: 1.25rem; margin-top: 2rem; display: grid; justify-items: center; }
.jr-channels { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 0.75rem; }
.jr-channel {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; align-items: center;
  padding: 1.1rem 1.15rem 1.2rem;
  background: #fff;
  border: 1px solid color-mix(in oklch, var(--color-primary-900) 9%, transparent);
  border-radius: var(--radius-xl2);
}
.jr-channel-icon {
  width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--color-primary-50); color: var(--color-primary-700);
  box-shadow: 0 0 0 2px var(--color-primary-600);
}
.jr-channel-title { font-size: clamp(1.1rem, 1.04rem + 0.3vw, 1.25rem); line-height: 1.25; }
.jr-channel-text { grid-column: 1 / -1; margin-top: 0.55rem; line-height: 1.55; }
/* Die Wege laufen in der Anfrage zusammen: schmal als Linie, breit als Trichter */
.jr-funnel-lines { display: none; }
.jr-funnel-lines path {
  fill: none; stroke: var(--color-primary-600); stroke-width: 3; stroke-dasharray: 8 6;
  vector-effect: non-scaling-stroke;
}
.jr-funnel-hub,
.jr-funnel-dest { position: relative; width: 100%; max-width: 34rem; margin-top: 2rem; }
.jr-funnel-hub::before,
.jr-funnel-dest::before {
  content: ""; position: absolute; left: 50%; top: -2rem; height: 2rem; width: 3px; transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, var(--color-primary-600) 0 8px, transparent 8px 14px);
}
.jr-funnel-hub {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.8rem 1.1rem; border-radius: 1.25rem;
  background: var(--color-primary-900); color: color-mix(in oklch, #fff 88%, var(--color-primary-200));
  font-size: 0.9rem; line-height: 1.4;
}
.jr-funnel-hub > .jr-icon {
  width: 2.5rem; height: 2.5rem; padding: 0.5rem; border-radius: 50%;
  background: var(--color-accent-500); color: var(--color-primary-950); stroke-width: 2;
}
.jr-funnel-hub strong { display: block; font-family: var(--font-display); font-size: 1.05rem; color: #fff; }
.jr-funnel-dest {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; align-items: center;
  padding: 1.1rem 1.2rem 1.2rem;
  background: #fff;
  border: 1px solid color-mix(in oklch, var(--color-primary-900) 9%, transparent);
  border-top: 4px solid var(--color-accent-500);
  border-radius: var(--radius-xl2);
  box-shadow: var(--shadow-card);
}
.jr-funnel-dest-icon {
  width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--color-accent-500); color: var(--color-primary-950);
  box-shadow: 0 0 0 2px var(--color-accent-700);
}
.jr-funnel-dest-copy { display: grid; gap: 0.15rem; line-height: 1.35; }
.jr-funnel-dest-copy strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-primary-950); }
.jr-funnel-dest-copy span { font-size: 0.92rem; color: var(--color-primary-800); }
.jr-funnel-plans {
  grid-column: 1 / -1; margin-top: 0.85rem; padding-top: 0.75rem;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
  border-top: 1px dashed color-mix(in oklch, var(--color-primary-700) 30%, transparent);
}
.jr-funnel-plans .jr-plan { font-size: 1rem; }
.jr-funnel-note {
  margin: 1.25rem auto 0; max-width: 62ch; text-align: center;
  font-size: 0.92rem; line-height: 1.6; color: var(--color-primary-800);
}
@media (min-width: 48rem) {
  .jr-channels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jr-funnel-gap); }
  /* Um die halbe Spaltenlücke verbreitert, damit die Linien mittig unter den Karten beginnen */
  .jr-funnel-lines {
    display: block; width: calc(100% + var(--jr-funnel-gap)); height: 3.5rem;
    margin-inline: calc(var(--jr-funnel-gap) / -2);
  }
  .jr-funnel-hub { margin-top: 0; }
  .jr-funnel-hub::before { display: none; }
}

/* ---------- Kontaktband ---------- */
.jr-cta-section { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.jr-cta {
  display: grid; gap: 1.4rem; align-items: center;
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem) clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
  border-radius: var(--radius-xl2);
  color: #fff;
  background:
    radial-gradient(circle at 100% 0%, transparent 0 18%, color-mix(in oklch, var(--color-accent-500) 45%, transparent) 18.3% 18.8%, transparent 19.1% 30%, color-mix(in oklch, #fff 18%, transparent) 30.3% 30.8%, transparent 31.1%),
    var(--color-primary-900);
}
.jr-cta-title { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem); line-height: 1.2; color: #fff; }
.jr-cta-text { margin-top: 0.55rem; max-width: 40rem; line-height: 1.6; color: color-mix(in oklch, #fff 88%, var(--color-primary-200)); }
.jr-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.jr-cta :focus-visible { outline-color: var(--color-accent-300); }
.jr-btn-light { background: #fff; color: var(--color-primary-900); }
.jr-btn-light:hover { background: var(--color-primary-50); transform: translateY(-2px); }
@media (min-width: 56rem) {
  .jr-cta { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; }
  .jr-cta-actions { flex-direction: column; align-items: stretch; }
}

/* ---------- Vorteile ---------- */
.jr-benefits { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.jr-benefit {
  padding: 1.35rem 1.25rem 1.45rem;
  background: #fff;
  border: 1px solid color-mix(in oklch, var(--color-primary-900) 9%, transparent);
  border-radius: var(--radius-xl2);
}
.jr-benefit-icon {
  width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--color-primary-50); color: var(--color-primary-700);
  box-shadow: 0 0 0 2px var(--color-primary-600);
}
.jr-benefit-title { margin-top: 1rem; font-size: clamp(1.12rem, 1.04rem + 0.35vw, 1.3rem); line-height: 1.25; }
.jr-benefit-text { margin-top: 0.5rem; line-height: 1.6; }
.jr-benefit--lead { background: var(--color-primary-900); border-color: var(--color-primary-900); color: #fff; }
.jr-benefit--lead .jr-benefit-title { color: #fff; }
.jr-benefit--lead .jr-benefit-text { color: color-mix(in oklch, #fff 90%, var(--color-primary-200)); }
.jr-benefit--lead .jr-benefit-icon { background: var(--color-accent-500); color: var(--color-primary-950); box-shadow: 0 0 0 2px var(--color-accent-300); }
/* Schmal: Piktogramm neben den Titel, damit vier Vorteile kurz bleiben */
@media (max-width: 39.99rem) {
  .jr-benefit { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; align-items: center; }
  .jr-benefit-title { margin-top: 0; }
  .jr-benefit-text { grid-column: 1 / -1; }
}
@media (min-width: 40rem) {
  .jr-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (min-width: 72rem) {
  .jr-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Pakete und Wert eines Auftrags ---------- */
.jr-plans { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.jr-plan-card {
  padding: 1.3rem 1.3rem 1.45rem;
  background: #fff;
  border: 1px solid color-mix(in oklch, var(--color-primary-900) 9%, transparent);
  border-top: 4px solid var(--color-primary-600);
  border-radius: var(--radius-xl2);
  box-shadow: var(--shadow-card);
}
.jr-plan-card--gold { border-top-color: var(--color-accent-600); }
.jr-plan-card--platin { border-top-color: var(--color-primary-900); }
.jr-plan-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 0.8rem; }
.jr-plan { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-primary-900); }
.jr-plan-mark {
  display: inline-block; flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  border: 2px solid currentColor;
  background: radial-gradient(circle, currentColor 0 26%, transparent 29%);
}
.jr-plan-mark--silber { color: oklch(0.55 0.02 240); }
.jr-plan-mark--gold { color: var(--color-accent-700); }
.jr-plan-mark--platin { color: var(--color-primary-900); box-shadow: inset 0 0 0 2px var(--color-accent-500); }
.jr-plan-card-price { font-weight: 700; color: var(--color-primary-800); white-space: nowrap; }
.jr-plan-card-km { margin-top: 0.7rem; color: var(--color-primary-900); }
.jr-plan-card-km strong { font-family: var(--font-display); font-size: 1.1rem; }
.jr-plan-card-km span { display: block; margin-top: 0.1rem; font-size: 0.86rem; color: var(--color-primary-800); }
.jr-plan-card-value {
  margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px dashed color-mix(in oklch, var(--color-primary-700) 30%, transparent);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); line-height: 1;
  color: var(--color-primary-950);
}
.jr-plan-card-value span { font-size: 0.5em; color: var(--color-primary-700); }
.jr-plan-card-text { margin-top: 0.35rem; color: var(--color-primary-800); }
.jr-plan-card-sample { margin-top: 0.9rem; font-size: 0.92rem; }
.jr-plan-card-sample a { font-weight: 600; color: var(--color-primary-700); text-decoration: underline; text-underline-offset: 2px; }
.jr-plan-card-sample a:hover { color: var(--color-primary-900); }
.jr-fee-note { margin-top: 1.25rem; max-width: 75ch; font-size: 0.92rem; line-height: 1.6; color: var(--color-primary-800); }
.jr-fee-note a { font-weight: 600; color: var(--color-primary-700); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 48rem) {
  .jr-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .jr-plan-card-km { min-height: 3.35rem; }
}

/* ---------- Platin als Zusatz ---------- */
.jr-platin {
  display: grid; gap: 1.25rem; align-items: center;
  padding: clamp(1.4rem, 1.1rem + 1.5vw, 2.1rem) clamp(1.25rem, 0.9rem + 1.8vw, 2.4rem);
  border-radius: var(--radius-xl2);
  background: var(--color-primary-950); color: #fff;
  box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--color-accent-500) 55%, transparent);
}
.jr-platin-seal svg { display: block; width: clamp(4.5rem, 3.8rem + 3vw, 6rem); height: auto; aspect-ratio: 1; }
.jr-platin-kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-300); }
.jr-platin-title { margin-top: 0.35rem; font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem); line-height: 1.2; color: #fff; }
.jr-platin-text { margin-top: 0.5rem; max-width: 44rem; line-height: 1.6; color: color-mix(in oklch, #fff 88%, var(--color-primary-200)); }
.jr-platin :focus-visible { outline-color: var(--color-accent-300); }
.jr-platin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.jr-platin-sample {
  font-weight: 600; color: var(--color-accent-300);
  text-decoration: underline; text-underline-offset: 2px;
}
.jr-platin-sample:hover { color: #fff; }
@media (min-width: 56rem) {
  .jr-platin { grid-template-columns: auto minmax(0, 1fr) auto; gap: 2rem; }
  .jr-platin-actions { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ---------- Abschluss ---------- */
.jr-closing {
  max-width: 54rem; margin-inline: auto; text-align: center;
  padding: clamp(1.9rem, 1.3rem + 2.4vw, 3rem) clamp(1.25rem, 0.9rem + 2vw, 2.75rem);
  background:
    radial-gradient(circle at 50% 135%,
      transparent 0 26%, color-mix(in oklch, var(--color-accent-600) 35%, transparent) 26.2% 26.7%,
      transparent 26.9% 36%, color-mix(in oklch, var(--color-primary-600) 22%, transparent) 36.2% 36.7%,
      transparent 36.9%),
    linear-gradient(155deg, var(--color-primary-50), var(--color-sand));
  border: 1px solid color-mix(in oklch, var(--color-primary-900) 8%, transparent);
  border-radius: var(--radius-xl2);
}
.jr-closing-eyebrow { justify-content: center; }
.jr-closing-title { margin-top: 0.6rem; font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem); }
.jr-closing-text { margin: 0.8rem auto 0; max-width: 42rem; line-height: 1.65; }
.jr-closing .btn-row { justify-content: center; }
.jr-closing .jr-btn-light { border-color: color-mix(in oklch, var(--color-primary-600) 35%, transparent); }
.jr-closing-more { margin-top: 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.75rem; font-size: 0.95rem; }
.jr-closing-more a {
  display: inline-block; padding-block: 0.35rem;
  font-weight: 600; color: var(--color-primary-700); text-decoration: underline; text-underline-offset: 3px;
}
.jr-closing-more a:hover { color: var(--color-primary-900); }
.jr-closing-more span { color: var(--color-primary-600); padding-block: 0.35rem; }
@media (max-width: 29.99rem) {
  .jr-closing-more { flex-direction: column; align-items: center; }
  .jr-closing-more span { display: none; }
}