/* Jebli Tours — Rundreisen (/rundreisen). Ergänzt styles.css + guide.css (Nav, Footer, Cards, Artikel-Layout). */

.cr-lede { max-width: 52ch; }
.cr-title-link { color: inherit; }
.cr-btn-over { position: relative; z-index: 2; }
.cr-overline { margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; color: var(--blue); }
.cr-muted { color: var(--muted); margin: 0 0 14px; }

.cr-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 4px 0 0; }
.cr-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.cr-aside-btn { font-size: 15px; padding: 13px 20px; }

.cr-main { min-width: 0; display: flex; flex-direction: column; gap: 44px; }
.cr-main h2 { font-family: var(--f-serif); font-weight: 400; font-size: 28px; line-height: 1.2; margin: 0 0 16px; color: var(--ink); }

/* Tagesprogramm: nummerierte Zeitleiste */
.cr-days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cr-day { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding-bottom: 28px; }
.cr-day::before {
  content: ''; position: absolute; inset-inline-start: 21px; top: 44px; bottom: 0; width: 2px;
  background: rgba(29, 93, 143, .18);
}
.cr-day:last-child { padding-bottom: 0; }
.cr-day:last-child::before { display: none; }
.cr-day-n {
  width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-serif); font-size: 19px; box-shadow: 0 0 0 5px var(--sand);
}
.cr-day-body h3 { font-size: 20px; line-height: 1.3; margin: 2px 0 8px; color: var(--ink); }
.cr-day-lbl { display: block; font-family: var(--f-sans, inherit); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 2px; }
.cr-day-body p { margin: 0 0 12px; line-height: 1.65; color: #22323F; }
.cr-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 10px; }
.cr-fact {
  background: var(--cream); border: 1px solid rgba(29, 93, 143, .14); border-radius: 999px;
  padding: 4px 11px; font-size: 13.5px; font-weight: 600; color: var(--subtle);
}
.cr-fact-unesco { background: rgba(232, 161, 60, .16); border-color: rgba(232, 161, 60, .5); color: #7A4B00; }
.cr-day-img { width: min(100%, 260px); height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 18px; border: 5px solid var(--cream); box-shadow: 0 10px 24px rgba(29, 93, 143, .14); }

/* Inklusive / Nicht inklusive */
.cr-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.cr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cr-list li { position: relative; padding-inline-start: 28px; line-height: 1.55; }
.cr-list li::before { position: absolute; inset-inline-start: 0; top: 0; font-weight: 700; }
.cr-list-yes li::before { content: '✓'; color: #2E7D4F; }
.cr-list-no li::before { content: '–'; color: var(--subtle); }

/* Optionen */
.cr-options { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 10px; line-height: 1.6; }

@media (max-width: 560px) {
  .cr-day { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
  .cr-day-n { width: 36px; height: 36px; font-size: 16px; }
  .cr-day::before { inset-inline-start: 17px; top: 36px; }
  .cr-main h2 { font-size: 24px; }
}

/* Buchungs-Konfigurator ------------------------------------------------- */
.cr-book { scroll-margin-top: 96px; background: var(--cream); border: 1px solid rgba(29, 93, 143, .14); border-radius: 22px; padding: 28px; box-shadow: 0 10px 28px rgba(29, 93, 143, .08); }
.cr-book h2 { margin-bottom: 6px; }
.cr-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 20px; margin-top: 18px; }
.cr-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.cr-field label, .cr-field legend { font-size: 14px; font-weight: 700; color: var(--ink); padding: 0; }
.cr-field small { font-size: 12.5px; color: var(--subtle); }
.cr-field input[type="text"], .cr-field input[type="tel"], .cr-field input[type="email"], .cr-field input[type="date"], .cr-field select {
  width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid rgba(29, 93, 143, .28);
  border-radius: 12px; background: #fff; color: var(--ink); min-height: 48px;
}
.cr-field input:focus-visible, .cr-field select:focus-visible { outline: 3px solid rgba(29, 93, 143, .35); outline-offset: 1px; }
.cr-field input[aria-invalid="true"] { border-color: #B3261E; }
.cr-addons { grid-column: 1 / -1; gap: 10px; }
.cr-check { display: flex; align-items: center; gap: 10px; font-weight: 500 !important; font-size: 15px !important; min-height: 44px; cursor: pointer; }
.cr-check input { width: 20px; height: 20px; flex: none; accent-color: var(--blue); }
.cr-check-price { margin-inline-start: auto; font-weight: 700; color: var(--blue); white-space: nowrap; }
.cr-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }

.cr-price { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; background: var(--sand); border-radius: 16px; padding: 18px 20px; }
.cr-price-lbl { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); }
.cr-price-val { font-family: var(--f-serif); font-weight: 400; font-size: 36px; line-height: 1.1; color: var(--ink); }
.cr-price-sub, .cr-price-season { font-size: 14.5px; color: var(--ink); }
.cr-price-season:empty, .cr-price-sub:empty { display: none; }
.cr-price-note { font-size: 13px; color: var(--subtle); margin-top: 4px; }
.cr-error { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border-radius: 12px; background: #FDECEA; color: #8C1D18; font-weight: 600; }
.cr-submit { grid-column: 1 / -1; justify-self: start; font-size: 17px; padding: 15px 28px; }
.cr-submit:disabled { opacity: .65; cursor: wait; }
.cr-success { margin-top: 18px; background: #EAF5EE; border: 1px solid rgba(46, 125, 79, .35); border-radius: 16px; padding: 22px; }
.cr-success h3 { margin: 0 0 8px; font-family: var(--f-serif); font-weight: 400; font-size: 26px; }
.cr-success p { margin: 0 0 10px; }
.cr-success:focus { outline: none; }
[hidden] { display: none !important; }

@media (max-width: 560px) {
  .cr-book { padding: 20px 16px; border-radius: 18px; }
  .cr-submit { justify-self: stretch; text-align: center; }
  .cr-price-val { font-size: 30px; }
}

/* Routenkarte (Leaflet, lazy) ------------------------------------------- */
.cr-map { width: 100%; height: 400px; border-radius: 20px; border: 5px solid var(--cream); box-shadow: 0 10px 24px rgba(29, 93, 143, .14); background: #E8EEF2; overflow: hidden; z-index: 0; }
.cr-map[hidden] { display: none !important; }
.cr-stops { counter-reset: crstop; list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.cr-stops li { counter-increment: crstop; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); background: var(--cream); border: 1px solid rgba(29, 93, 143, .14); border-radius: 999px; padding: 5px 12px 5px 6px; }
.cr-stops li::before { content: counter(crstop); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; }
.cr-pin { background: var(--blue); color: #fff; border: 2px solid #fff; border-radius: 50%; width: 28px !important; height: 28px !important; display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--f-sans, sans-serif); box-shadow: 0 2px 8px rgba(14, 42, 61, .4); }
.cr-pin-end { background: var(--amber); color: #19293B; }
@media (max-width: 560px) { .cr-map { height: 320px; border-radius: 16px; } }