/* Reisekarte: Darstellung der Routenkarte. Farben aus dem USA-Reisen-Experte-CI, über die Variablen in .rk anpassbar */
.rk {
  --rk-red: #D1111F;
  --rk-navy: #003F7D;
  --rk-text: #202020;
  --rk-water: #DCE7EF;
  --rk-land: #FAF8F3;
  --rk-land-o: #EDE9E1;
  --rk-line: #CFC6B6;
  --rk-border: #A59C8C;
  container-type: inline-size;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 28px;
  padding: 0;
}
/* Marke Kanada-Reisen Experte */
.rk-marke-kanada { --rk-red: #A70E11; --rk-navy: #1D231F; }
.rk-sea.rk-lake-t { font-size: 13.5px; }
.rk-map { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--rk-water); font-family: inherit; }
.rk-water { fill: var(--rk-water); }
.rk-land { fill: var(--rk-land); stroke: #D9D1C3; stroke-width: .8px; vector-effect: non-scaling-stroke; }
.rk-land-o { fill: var(--rk-land-o); stroke: #D9D1C3; stroke-width: .8px; vector-effect: non-scaling-stroke; }
.rk-lake { fill: var(--rk-water); stroke: #C9D8E4; stroke-width: .6px; vector-effect: non-scaling-stroke; }
.rk-river { fill: none; stroke: #BCD0DF; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.rk-state { fill: none; stroke: var(--rk-line); stroke-width: 1px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.rk-border { fill: none; stroke: var(--rk-border); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }

.rk-inset-frame { fill: none; stroke: #B9C9D6; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.rk-region { font-size: 14px; font-weight: 600; letter-spacing: .14em; fill: #A79F90; }
.rk-sea { font-size: 15px; font-style: italic; fill: #6F93AE; }

.rk-case { fill: none; stroke: #fff; stroke-width: 8px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .9; }
.rk-case-thin { stroke-width: 5px; opacity: .7; }
.rk-seg { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rk-auto { stroke: var(--rk-red); stroke-width: 3.5px; }
.rk-bus { stroke: var(--rk-navy); stroke-width: 3.5px; }
.rk-zug { stroke: var(--rk-navy); stroke-width: 5px; }
.rk-zug-i { stroke: #fff; stroke-width: 2px; stroke-dasharray: 7 7; stroke-linecap: butt; }
.rk-faehre { stroke: var(--rk-red); stroke-width: 3px; stroke-dasharray: 8 7; stroke-linecap: butt; }
.rk-flug { stroke: #5A6B7D; stroke-width: 2.4px; stroke-dasharray: .1 7; }

.rk-mk circle, .rk-mk rect { fill: var(--rk-navy); stroke: #fff; stroke-width: 3px; vector-effect: non-scaling-stroke; }
.rk-mk text { fill: #fff; font-size: 15px; font-weight: 700; text-anchor: middle; }
.rk-mk-s { transform-box: fill-box; transform-origin: center; }
.rk-lbl { font-size: 21px; font-weight: 600; fill: var(--rk-text); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.rk-n { display: none; }

.rk-cap { margin: 12px 2px 0; padding: 0; }
.rk-legend, .rk-stops { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.rk-legend { gap: 6px 22px; font-size: 14px; color: #555; }
.rk-legend li { display: flex; align-items: center; gap: 8px; margin: 0; }
.rk-legend svg { width: 42px; height: 14px; overflow: visible; }
.rk-stops { gap: 8px 10px; margin-top: 12px; counter-reset: none; }
.rk-stops li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 12px 4px 4px; background: #F3F1EC; border-radius: 99px; font-size: 14px; line-height: 1.3; color: var(--rk-text); }
.rk-n-badge { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--rk-navy); color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.rk-st-name { font-weight: 600; }
.rk-st-n { color: #6b6b6b; }
.rk-credit { margin: 10px 0 0; font-size: 11px; color: #8a8a8a; }
.rk-credit a { color: inherit; }
.rk-st-n::before { content: "·"; margin-right: 6px; color: #aaa; }

/* Schmale Darstellung (Handy): groessere Schrift und Punkte, eigene Beschriftung */
@container (max-width: 599px) {
  .rk-w { display: none; }
  .rk-n { display: inline; }
  .rk-mk-s { transform: scale(1.75); }
  .rk-lbl { font-size: 38px; stroke-width: 8px; }
  .rk-lbl-s { font-size: 30.4px; stroke-width: 7px; }
  .rk-inset-frame { fill: none; stroke: #B9C9D6; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.rk-region { font-size: 25px; }
  .rk-sea { font-size: 26px; }
  .rk-sea.rk-lake-t { font-size: 23px; }
  .rk-map { border-radius: 10px; }
  .rk-stops li { font-size: 13px; }
}

/* Shortcode-Optionen */
.rk-ohne-liste .rk-stops { display: none; }
.reisekarte-wrap { margin: 0 0 8px; }
.rk-heading { margin: 0 0 16px; }