/* ============================================================================
   Service-Seiten auf das Shop-Design ziehen (18.09.2026)
----------------------------------------------------------------------------
   Versand, Selbstabholung, Zahlung und Reklamation sind vier eigenstaendig
   gebaute CMS-Seiten. Jede bringt ihr eigenes <style> mit — und darin ein
   anderes Blau und eine andere Schrift:

     .ra-shipping   Versand         --brand #2479be, ui-sans-serif, Verlaufsknopf
     .rothler-pay   Zahlung         --brand #2563eb, eigener Akzent #0ea5e9
     .pickup-neuss  Selbstabholung  --brand #2563eb / #1d4ed8
     .reklamation   Reklamation     Marineblau #1b3f80, system-ui, 720 px schmal

   Keines davon ist das Markenblau des Shops (#116bb0), keines benutzt Manrope
   und IBM Plex Sans. Nebeneinander sehen die vier Seiten aus wie vier Shops.

   Statt vier CMS-Inhalte umzuschreiben, zieht diese Datei alle auf dieselben
   Marken-Variablen. Dasselbe Muster wie css/rh-legal.css bei den Rechtstexten:
   der Inhalt bleibt unangetastet, nur die Gestaltung kommt aus dem Shop.

   Die Seiten tragen ihr <style> IM BODY, also nach dieser Datei im Dokument.
   Bei gleicher Spezifitaet gewinnt das spaetere — deshalb steht ueberall ein
   `body` davor. Kein !important noetig.
   ========================================================================= */

/* ---------- Marken-Variablen statt vier eigener Blautoene ---------- */
body .ra-shipping,
body .rothler-pay,
body .pickup-neuss,
body .reklamation {
  --brand:   var(--brand-primary, #116bb0);
  --brand-2: var(--brand-primary-dark, #0e548b);
  --ink:     var(--color-text, #0a1628);
  --text:    var(--color-text-muted, #525252);
  --muted:   var(--color-text-muted, #525252);
  --line:    var(--color-line, #e2e8f0);
  --card:    var(--color-surface, #ffffff);
  font-family: var(--font-body, 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
  color: var(--color-text, #0a1628);
}

/* ---------- Ueberschriften in der Marken-Display-Schrift ---------- */
body .ra-shipping h1, body .ra-shipping h2, body .ra-shipping h3,
body .ra-shipping .h1, body .ra-shipping .h2, body .ra-shipping .h3,
body .rothler-pay h1, body .rothler-pay h2, body .rothler-pay h3,
body .rothler-pay .h1, body .rothler-pay .h2, body .rothler-pay .h3,
body .pickup-neuss h1, body .pickup-neuss h2, body .pickup-neuss h3,
body .pickup-neuss .h1, body .pickup-neuss .h2, body .pickup-neuss .h3,
body .reklamation h1, body .reklamation h2, body .reklamation h3 {
  font-family: var(--font-display, 'Manrope', system-ui, sans-serif);
  letter-spacing: -.02em;
  color: var(--color-text, #0a1628);
}

/* ---------- Ein Knopf fuer alle vier Seiten ----------
   Die Versandseite hatte einen Farbverlauf, die Reklamation einen marineblauen
   Block ueber die volle Breite. Beides wird der Knopf, den der Shop sonst zeigt. */
body .ra-shipping .btn,
body .rothler-pay .btn,
body .pickup-neuss .btn,
body .reklamation .btn {
  background: var(--brand-primary, #116bb0);
  color: var(--brand-on-primary, #fff);
  border-radius: 12px;
  font-family: var(--font-display, 'Manrope', system-ui, sans-serif);
  font-weight: 700;
  font-size: 16px;
  padding: 14px 22px;
  box-shadow: none;
  transition: background .15s ease;
}
body .ra-shipping .btn:hover,
body .rothler-pay .btn:hover,
body .pickup-neuss .btn:hover,
body .reklamation .btn:hover {
  background: var(--brand-primary-dark, #0e548b);
  transform: none;
  box-shadow: none;
}
body .ra-shipping .btn:focus-visible,
body .rothler-pay .btn:focus-visible,
body .pickup-neuss .btn:focus-visible,
body .reklamation .btn:focus-visible {
  outline: 3px solid var(--brand-primary, #116bb0);
  outline-offset: 3px;
}

/* ---------- Reklamation: dieselbe Seitenbreite wie die drei anderen ----------
   Sie stand als einzige in einer 720-px-Spalte und wirkte dadurch wie ein
   Fremdkoerper zwischen Versand und Zahlung. */
body .reklamation {
  max-width: 1160px;
  margin-inline: auto;
  padding: clamp(20px, 4vw, 44px);
  font-size: 17px;
  line-height: 1.65;
}
body .reklamation .lead { color: var(--color-text-muted, #525252); max-width: 70ch; }

/* Hinweiskasten und Schrittzahlen tragen das Markenblau statt Marineblau */
body .reklamation .notice {
  border-left-color: var(--brand-primary, #116bb0);
  border-radius: 12px;
  background: var(--brand-tint-soft, rgba(17, 107, 176, .07));
  border-color: var(--brand-tint, rgba(17, 107, 176, .20));
}
body .reklamation .steps li::before {
  color: var(--brand-primary, #116bb0);
  border-color: var(--brand-tint, rgba(17, 107, 176, .20));
  background: var(--brand-tint-soft, rgba(17, 107, 176, .07));
  font-family: var(--font-display, 'Manrope', system-ui, sans-serif);
}

/* ---------- Karten mit demselben Radius wie im Rest des Shops ---------- */
body .ra-shipping .card,
body .rothler-pay .card,
body .pickup-neuss .card {
  border-radius: 14px;
  border-color: var(--color-line, #e2e8f0);
  box-shadow: 0 10px 22px rgba(2, 8, 23, .04);
}
body .ra-shipping .badge,
body .rothler-pay .badge,
body .pickup-neuss .badge {
  font-family: var(--font-body, 'IBM Plex Sans', system-ui, sans-serif);
  border-color: var(--color-line, #e2e8f0);
}

/* ---------- Links im Fliesstext ---------- */
body .ra-shipping a:not(.btn),
body .rothler-pay a:not(.btn),
body .pickup-neuss a:not(.btn),
body .reklamation a:not(.btn) {
  color: var(--brand-primary, #116bb0);
  text-underline-offset: 3px;
}

/* Die Reklamationsseite bringt ihre Ueberschrift selbst mit (#reklamation-title, von einer
   Section per aria-labelledby referenziert). Sie ist jetzt die H1 der Seite; die gleich
   lautende Template-Ueberschrift ist in layout/index.tpl abgeschaltet. Groesse wie auf den
   drei Schwesterseiten. */
body .reklamation h1#reklamation-title {
  font-size: clamp(28px, 4.6vw, 44px);
  font-weight: 800;
  margin: 0 0 16px;
}

/* The external tracking form starts empty and then changes its parent's width.
   Reserve its actual form area and keep the column inside small phone screens. */
body #trackba-widget { min-height: 430px; width: 100%; max-width: 100%; }
body div:has(> #trackba-widget) { flex: 0 1 380px !important; width: 100%; min-width: 0; max-width: 100%; }
body #trackba-widget .trackba-widget-wrapper { min-width: 0 !important; }
@media (max-width: 767.98px) {
  body #trackba-widget input { font-size: 16px !important; }
}