/* ==========================================================================
   Rameder Sendungsverfolgung – /content/tracking/tracking.css
   Alle Regeln sind unter .rmd-trk gekapselt, damit nichts ins CMS-Template
   ausstrahlt. Schrift wird vom Shop-Template geerbt (Open Sans).
   ========================================================================== */

.rmd-trk {
  --rmd-teal: #0A3437;
  --rmd-teal-80: #3B5D5F;
  --rmd-teal-60: #6C8587;
  --rmd-teal-40: #9DAEAF;
  --rmd-teal-20: #CED6D7;
  --rmd-teal-10: #E6EBEB;
  --rmd-teal-5: #F3F5F5;
  --rmd-teal-3: #F8F9F9;
  --rmd-green: #009D3B;
  --rmd-green-10: #E5F5EB;
  --rmd-green-dark: #008533;
  --rmd-sand-40: #F2F2EA;
  --rmd-sand-20: #F9F8F4;
  --rmd-sand-80: #E5E5D5;
  --rmd-error: #B71C1C;
  --rmd-error-bg: #FEEEEA;
  --rmd-warn: #8A7400;
  --rmd-warn-bg: #FEFDF2;
  --rmd-white: #FFFFFF;
  --rmd-radius: 8px;
  --rmd-radius-l: 12px;
  --rmd-shadow: 0 6px 32px -12px rgba(0, 0, 0, 0.25);
  --rmd-focus: 0 0 0 3px rgba(0, 183, 69, 0.35);
  --rmd-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --rmd-gutter: clamp(20px, 4vw, 40px);

  color: var(--rmd-teal);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
}
.rmd-trk *,
.rmd-trk *::before,
.rmd-trk *::after { box-sizing: border-box; }
.rmd-trk [hidden] { display: none !important; }
.rmd-trk svg { flex: 0 0 auto; }
.rmd-trk h1, .rmd-trk h2, .rmd-trk h3, .rmd-trk p { margin: 0; }

/* Layout ------------------------------------------------------------------ */
.rmd-trk__container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--rmd-gutter);
  padding-right: var(--rmd-gutter);
}
.rmd-trk__section { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.rmd-trk__section--muted {
  background: var(--rmd-teal-5);
  border-top: 1px solid var(--rmd-teal-10);
  border-bottom: 1px solid var(--rmd-teal-10);
}
.rmd-trk__stack { display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 32px); }
.rmd-trk__stack--tight { gap: 12px; }
.rmd-trk__section--after-hero { margin-top: clamp(56px, 6vw, 88px); }

/* Hero -------------------------------------------------------------------- */
.rmd-trk__hero { padding-top: clamp(8px, 1.5vw, 16px); display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 28px); }
.rmd-trk__intro { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.rmd-trk__eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--rmd-teal-80);
}
.rmd-trk__eyebrow-icon {
  width: 36px; height: 36px; border-radius: var(--rmd-radius);
  background: var(--rmd-green-10);
  display: inline-flex; align-items: center; justify-content: center;
}
.rmd-trk__h1 {
  font-family: "Open Sans", sans-serif;
  font-size: 2.5rem;          /* 40px Desktop */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: var(--rmd-teal);
}
@media (max-width: 1023px) { .rmd-trk__h1 { font-size: 2rem; } }
@media (max-width: 639px)  { .rmd-trk__h1 { font-size: 1.75rem; } }
.rmd-trk__h1-accent { display: block; color: var(--rmd-green); }
.rmd-trk__lead { font-size: clamp(16px, 0.4vw + 14px, 18px); line-height: 1.6; color: var(--rmd-teal-80); }

.rmd-trk__h2 { font-size: clamp(24px, 1.2vw + 16px, 32px); line-height: 1.2; font-weight: 700; color: var(--rmd-teal); }
.rmd-trk__h2--sm { font-size: clamp(22px, 0.8vw + 17px, 28px); line-height: 1.25; }
.rmd-trk__sectionhead { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.rmd-trk__sectionhead p { font-size: 16px; line-height: 1.55; color: var(--rmd-teal-80); }
.rmd-trk__sectionhead--wide { max-width: none; }

/* Formular ---------------------------------------------------------------- */
.rmd-trk__form {
  margin: 0;
  background: var(--rmd-white);
  border: 1px solid var(--rmd-teal-20);
  border-radius: var(--rmd-radius-l);
  box-shadow: var(--rmd-shadow);
  padding: clamp(20px, 3vw, 36px);
  display: flex; flex-direction: column; gap: 20px;
}
.rmd-trk__fields { display: flex; flex-wrap: wrap; gap: 20px 24px; align-items: flex-start; }
.rmd-trk__field { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.rmd-trk__field--wide { flex: 2 1 300px; }
.rmd-trk__label { font-size: 15px; font-weight: 700; color: var(--rmd-teal); }
.rmd-trk__label-row { display: flex; align-items: center; gap: 6px; }
.rmd-trk__tip { position: relative; display: inline-flex; }
.rmd-trk__tip-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: -4px 0; padding: 0;
  border: none; border-radius: 999px; background: transparent;
  color: var(--rmd-teal-80); cursor: pointer;
}
.rmd-trk__tip-btn:hover, .rmd-trk__tip-btn[aria-expanded="true"] { color: var(--rmd-green); }
.rmd-trk__tip-btn:focus-visible { outline: none; box-shadow: var(--rmd-focus); }
/* Hilfe-Layer: per ID abgesichert, damit Template-Stile es nicht überschreiben.
   Sichtbarkeit steuert ausschließlich das hidden-Attribut (tracking.js). */
#rmd-tracking .rmd-trk__tip-layer {
  display: block; position: absolute; z-index: 20; top: calc(100% + 8px); left: -12px;
  width: min(320px, calc(100vw - 48px)); margin: 0;
  padding: 14px 16px; border-radius: var(--rmd-radius);
  background: var(--rmd-white); border: 1px solid var(--rmd-teal-20);
  box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.3);
  font-size: 14px; line-height: 1.5; color: var(--rmd-teal-80); font-weight: 400; text-align: left;
}
#rmd-tracking .rmd-trk__tip-layer[hidden] { display: none !important; }
#rmd-tracking .rmd-trk__tip-layer strong { display: block; margin: 0 0 4px; color: var(--rmd-teal); font-weight: 700; }
#rmd-tracking .rmd-trk__tip-layer span { display: block; }
.rmd-trk__input {
  width: 100%; height: 56px; padding: 0 16px;
  border: 1px solid var(--rmd-teal-60); border-radius: var(--rmd-radius);
  background: var(--rmd-white);
  font: inherit; font-size: 17px; color: var(--rmd-teal);
  transition: border-color 150ms var(--rmd-ease), box-shadow 150ms var(--rmd-ease);
}
.rmd-trk__input::placeholder { color: var(--rmd-teal-60); opacity: 1; }
.rmd-trk__input:focus { outline: none; border: 2px solid var(--rmd-green); padding: 0 15px; box-shadow: var(--rmd-focus); }
.rmd-trk__input[aria-invalid="true"] { border: 2px solid var(--rmd-error); padding: 0 15px; }
.rmd-trk__input:disabled { background: var(--rmd-teal-3); }
.rmd-trk__hint { font-size: 13px; line-height: 1.45; color: var(--rmd-teal-80); }
.rmd-trk__hint--strong { font-weight: 700; color: var(--rmd-teal); }
.rmd-trk__field-error { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--rmd-error); }

.rmd-trk__alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--rmd-radius);
  font-size: 15px; line-height: 1.5; color: var(--rmd-teal);
}
.rmd-trk__alert svg { margin-top: 2px; }
.rmd-trk__alert--error { background: var(--rmd-error-bg); border: 1px solid var(--rmd-error); }
.rmd-trk__alert--warn { background: var(--rmd-warn-bg); border: 1px solid var(--rmd-warn); }

.rmd-trk__form-footer {
  display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: space-between;
  gap: 12px 24px; padding-top: 20px; border-top: 1px solid var(--rmd-teal-10);
}
.rmd-trk__nologin { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--rmd-teal-80); }

.rmd-trk__hints { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.rmd-trk__hintbox { flex: 1 1 320px; min-width: 0; display: flex; gap: 12px; align-items: flex-start; }
.rmd-trk__hintbox svg { margin-top: 2px; }
.rmd-trk__hintbox p { font-size: 14px; line-height: 1.55; color: var(--rmd-teal-80); }
.rmd-trk__hintbox strong { color: var(--rmd-teal); font-weight: 700; }
.rmd-trk__inline-link { color: var(--rmd-teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Buttons & Links --------------------------------------------------------- */
.rmd-trk__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 55px; padding: 0 32px; border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 700; line-height: 1.4;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 150ms var(--rmd-ease), box-shadow 150ms var(--rmd-ease);
}
.rmd-trk__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--rmd-white), 0 0 0 6px var(--rmd-teal); }
.rmd-trk__btn svg { stroke: currentColor; }
.rmd-trk a.rmd-trk__btn,
.rmd-trk a.rmd-trk__btn:hover,
.rmd-trk a.rmd-trk__btn:focus,
.rmd-trk a.rmd-trk__btn:visited { text-decoration: none; }
.rmd-trk a.rmd-trk__btn--primary,
.rmd-trk a.rmd-trk__btn--primary:visited,
.rmd-trk a.rmd-trk__btn--primary:hover,
.rmd-trk a.rmd-trk__btn--primary:focus { color: var(--rmd-white); }
.rmd-trk__btn--primary { border: 2px solid var(--rmd-green); background: var(--rmd-green); color: var(--rmd-white); }
.rmd-trk__btn--primary:hover { border-color: var(--rmd-green-dark); background: var(--rmd-green-dark); }
.rmd-trk__btn--primary:disabled { background: var(--rmd-teal-80); cursor: progress; }
.rmd-trk__btn--outline { border: 2px solid var(--rmd-green); background: transparent; color: var(--rmd-green); }
.rmd-trk__btn--outline:hover { background: var(--rmd-green); color: var(--rmd-white); }
.rmd-trk__btn-loading { display: inline-flex; align-items: center; gap: 10px; }
.rmd-trk__spin { animation: rmd-trk-spin 900ms linear infinite; }
@keyframes rmd-trk-spin { to { transform: rotate(360deg); } }

.rmd-trk__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-weight: 700; color: var(--rmd-teal);
  text-decoration: underline; text-underline-offset: 3px;
}
.rmd-trk__link:focus-visible, .rmd-trk a:focus-visible { outline: 3px solid var(--rmd-green); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 639px) {
  .rmd-trk__form-footer .rmd-trk__btn { width: 100%; }
}

/* Ergebnis: Sendungszeile + Widget --------------------------------------- */
.rmd-trk__shipment { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.rmd-trk__shipment-data {
  display: inline-flex; flex-wrap: wrap; gap: 6px 24px;
  padding: 10px 16px; border-radius: var(--rmd-radius);
  background: var(--rmd-green-10); border: 1px solid #CCEBD8;
  font-size: 15px; color: var(--rmd-teal-80);
}
.rmd-trk__shipment-data strong { color: var(--rmd-teal); font-weight: 700; overflow-wrap: anywhere; }
.rmd-trk__widget {
  background: var(--rmd-white);
  border: 1px solid var(--rmd-teal-20);
  border-radius: var(--rmd-radius-l);
  box-shadow: var(--rmd-shadow);
  padding: clamp(12px, 2.4vw, 32px);
  min-height: 200px;
  overflow-x: auto;
}

/* Cross-Selling ----------------------------------------------------------- */
.rmd-trk__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.rmd-trk__cards > li { display: flex; min-width: 0; }
.rmd-trk__card {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px;
  padding: 16px; background: var(--rmd-white);
  border: 1px solid var(--rmd-teal-20); border-radius: var(--rmd-radius-l);
  color: var(--rmd-teal); text-decoration: none;
  transition: border-color 150ms var(--rmd-ease);
}
.rmd-trk__card:hover { border-color: var(--rmd-teal-40); }
.rmd-trk__card:focus-visible { outline: none; box-shadow: var(--rmd-focus); border-color: var(--rmd-green); }
.rmd-trk__card-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--rmd-teal-5); border-radius: var(--rmd-radius); }
.rmd-trk__card-badgeslot { height: 24px; display: flex; align-items: center; }
/* Ohne Label (Variante A) keine reservierte Zeile: Abstand Bild → Titel = 24px */
.rmd-trk__card-badgeslot:empty { display: none; }
.rmd-trk__card-badgeslot:empty + .rmd-trk__card-title { margin-top: 12px; }
.rmd-trk__badge {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
  border-radius: 999px; background: var(--rmd-green-10);
  font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--rmd-teal);
}
.rmd-trk__card-title {
  min-height: 0; font-size: 16px; line-height: 1.35; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rmd-trk__card-body { min-height: 4.5em; font-size: 14px; margin-top: 5px; }
.rmd-trk__card-desc {
  font-size: 14px; line-height: 1.5; color: var(--rmd-teal-80);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rmd-trk__card-price { display: block; font-size: 20px; line-height: 1.2; font-weight: 800; }
.rmd-trk__card-vat { display: block; font-size: 12px; line-height: 1.4; color: var(--rmd-teal-80); }
.rmd-trk__card-cta {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border: 1px solid var(--rmd-green); border-radius: 999px;
  font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--rmd-green);
  transition: background-color 150ms var(--rmd-ease), color 150ms var(--rmd-ease);
}
.rmd-trk__card-cta svg { stroke: currentColor; }
.rmd-trk__card:hover .rmd-trk__card-cta { background: var(--rmd-green); color: var(--rmd-white); }
.rmd-trk__swipe { display: none; align-items: center; gap: 8px; font-size: 13px; color: var(--rmd-teal-80); }

@media (max-width: 1023px) {
  .rmd-trk__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 639px) {
  .rmd-trk__cards {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(var(--rmd-gutter) * -1); padding: 4px var(--rmd-gutter) 12px;
    scroll-padding-left: var(--rmd-gutter);
  }
  .rmd-trk__cards > li { flex: 0 0 76%; scroll-snap-align: start; }
  .rmd-trk__cards:focus-visible { outline: 3px solid var(--rmd-green); outline-offset: -3px; }
  .rmd-trk__swipe { display: flex; }
}

/* Vorteile ---------------------------------------------------------------- */
.rmd-trk__benefits { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin: 0; padding: 0; }
.rmd-trk__benefit {
  flex: 1 1 220px; min-width: 0;
  background: var(--rmd-white); border: 1px solid var(--rmd-teal-20); border-radius: var(--rmd-radius);
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
}
.rmd-trk__benefit-icon {
  width: 48px; height: 48px; border-radius: var(--rmd-radius); background: var(--rmd-green-10);
  display: inline-flex; align-items: center; justify-content: center;
}
.rmd-trk__benefit h3 { font-size: 18px; line-height: 1.3; font-weight: 700; }
.rmd-trk__benefit p { font-size: 15px; line-height: 1.55; color: var(--rmd-teal-80); }
@media (min-width: 1024px) { .rmd-trk__benefit { flex-basis: calc(25% - 18px); } }
@media (min-width: 640px) and (max-width: 1023px) { .rmd-trk__benefit { flex-basis: calc(50% - 12px); } }
@media (max-width: 639px) { .rmd-trk__benefit { flex-basis: 100%; } }

/* FAQ --------------------------------------------------------------------- */
.rmd-trk__faqhead { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 760px; margin: 0 auto; text-align: center; }
.rmd-trk__faqhead .rmd-trk__h2 { font-size: clamp(26px, 1.4vw + 18px, 36px); font-weight: 700; }
.rmd-trk__faqhead p { font-size: 16px; line-height: 1.55; color: var(--rmd-teal-80); }
.rmd-trk__faq { width: 100%; max-width: 1056px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.rmd-trk__faq-item {
  overflow: hidden;
  background: var(--rmd-white); border: 1px solid var(--rmd-teal-20); border-radius: var(--rmd-radius);
  transition: border-color 200ms var(--rmd-ease);
}
.rmd-trk__faq-item.is-open { border-color: var(--rmd-teal-40); }
.rmd-trk__faq-q { margin: 0; }
.rmd-trk__faq-btn {
  width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px clamp(16px, 2vw, 20px);
  background: transparent; border: none; border-radius: var(--rmd-radius);
  font: inherit; font-size: clamp(16px, 0.3vw + 15px, 18px); font-weight: 700; line-height: 1.4;
  color: var(--rmd-teal); text-align: left; cursor: pointer;
}
.rmd-trk__faq-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(0, 183, 69, 0.35); }
.rmd-trk__faq-chevron { transition: transform 260ms var(--rmd-ease); }
.rmd-trk__faq-item.is-open .rmd-trk__faq-chevron { transform: rotate(180deg); }
.rmd-trk__faq-a { display: grid; grid-template-rows: 1fr; }
.rmd-trk__faq-a > div { overflow: hidden; min-height: 0; }
.rmd-trk__faq-a p {
  margin: 0 clamp(12px, 1.5vw, 16px) clamp(12px, 1.5vw, 16px);
  padding: 16px clamp(16px, 2vw, 20px);
  background: var(--rmd-sand-40); border-radius: 6px;
  font-size: 16px; line-height: 1.65; color: var(--rmd-teal-80);
}
/* Eingeklappt nur, wenn JavaScript aktiv ist – ohne JS bleiben alle Antworten lesbar */
.rmd-trk--js .rmd-trk__faq-a {
  grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 260ms var(--rmd-ease), visibility 260ms;
}
.rmd-trk--js .rmd-trk__faq-item.is-open .rmd-trk__faq-a { grid-template-rows: 1fr; visibility: visible; }

/* Service ----------------------------------------------------------------- */
.rmd-trk__service {
  background: var(--rmd-sand-20); border: 1px solid var(--rmd-sand-80); border-radius: var(--rmd-radius-l);
  padding: clamp(24px, 3.5vw, 40px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px;
}
.rmd-trk__service-icon {
  width: 56px; height: 56px; border-radius: var(--rmd-radius-l);
  background: var(--rmd-white); border: 1px solid var(--rmd-teal-20);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.rmd-trk__service-text { flex: 999 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.rmd-trk__service-text > span { font-size: 14px; font-weight: 600; color: var(--rmd-teal-80); }
.rmd-trk__service-text p { font-size: 16px; line-height: 1.55; color: var(--rmd-teal-80); max-width: 640px; }
.rmd-trk__service .rmd-trk__btn { flex: 0 0 auto; padding: 0 28px; align-self: flex-end; }

@media (prefers-reduced-motion: reduce) {
  .rmd-trk *, .rmd-trk *::before, .rmd-trk *::after { transition: none !important; animation: none !important; }
}