/* Two distinct places: a quiet document for planning, a full map for discovery. */
:root {
  --rp-page: #1c1c1e;
  --rp-surface: #2c2c2e;
  --rp-text: #f5f5f7;
  --rp-secondary: #a1a1a6;
  --rp-line: #38383a;
  --rp-accent: #409cff;
  --rp-wash: #242426;
  --rp-danger: #ff6b61;
  /* Eine Kurve für alles: schnell anfahren, weich auslaufen. */
  --rp-ease: cubic-bezier(.32, .72, 0, 1);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --rp-page: #fff; --rp-surface: #f5f5f7; --rp-text: #1d1d1f;
    --rp-secondary: #6e6e73; --rp-line: #e5e5e7; --rp-accent: #0066cc; --rp-wash: #fafafa; --rp-danger: #c9342a;
  }
}
:root[data-theme="light"] {
  --rp-page: #fff; --rp-surface: #f5f5f7; --rp-text: #1d1d1f;
  --rp-secondary: #6e6e73; --rp-line: #e5e5e7; --rp-accent: #0066cc; --rp-wash: #fafafa; --rp-danger: #c9342a;
}
html[data-view="plan"], html[data-view="plan"] body { background: var(--rp-page); }
html[data-view="plan"] .stage { visibility: hidden; pointer-events: none; }
#plannerLoading { display: none; }
html[data-view="plan"] #plannerLoading { display: block; position: fixed; inset: 0; padding: 25vh 24px; text-align: center; background: var(--rp-page); color: var(--rp-secondary); z-index: 20; }
#plannerLoading a { color: var(--rp-accent); display: inline-block; margin-top: 20px; }
.route-map-nav { position: absolute; top: 99px; left: 16px; z-index: 8; }
.route-map-nav[hidden] { display: none; }
.route-toggle { position: static; padding: 11px 17px; color: var(--text); font: 600 13px var(--font); cursor: pointer; border: 1px solid var(--hairline); }
.route-planner {
  position: fixed; inset: 0; height: 100dvh; z-index: 20; overflow-y: auto;
  background: var(--rp-page); color: var(--rp-text); font: 15px/1.5 var(--font);
  scrollbar-width: thin; scrollbar-color: var(--rp-line) var(--rp-page); overscroll-behavior: contain;
}
.route-planner[hidden], .route-planner [hidden] { display: none !important; }
.rp-header { position: sticky; top: 0; background: var(--rp-page); border-bottom: 1px solid var(--rp-line); z-index: 5; padding: env(safe-area-inset-top, 0px) 32px 0; }
.rp-toolbar { max-width: 1000px; height: 76px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.rp-header h1 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.route-planner button, .route-planner a { font: inherit; }
.route-planner button { cursor: pointer; color: var(--rp-accent); background: transparent; border: 0; border-radius: 10px; min-height: 44px; padding: 10px 14px; }
.route-planner button:disabled { opacity: .45; cursor: default; }
.route-planner button { transition: background-color .2s var(--rp-ease), color .2s var(--rp-ease), border-color .2s var(--rp-ease), transform .2s var(--rp-ease); }
.route-planner button:hover:not(:disabled) { background: var(--rp-surface); }
.route-planner button:active:not(:disabled) { transform: scale(.97); transition-duration: .08s; }
.route-planner :is(button, a, input, textarea, select, summary):focus-visible, .route-toggle:focus-visible { outline: 3px solid var(--rp-accent); outline-offset: 3px; }
/* Nach dem Hinzufügen springt der Fokus auf die Überschrift. Nur für die Tastatur sichtbar. */
.rp-stop h3:focus { outline: none; }
.rp-stop h3:focus-visible { outline: 3px solid var(--rp-accent); outline-offset: 4px; border-radius: 5px; }
.rp-toolbar>button { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; }
.rp-scroll, .rp-footer-inner, .rp-status { width: min(100% - 64px, 720px); margin: 0 auto; }
.rp-scroll { padding: 52px 0 0; }
.rp-status { padding: 18px 0 0; color: var(--rp-secondary); font-size: 13px; }
.rp-status:empty { display: none; }
.rp-status.is-error { color: var(--okay); }
.route-planner fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.route-planner label { display: block; color: var(--rp-secondary); font-size: 13px; line-height: 1.5; }
.route-planner input, .route-planner textarea, .route-planner select {
  display: block; width: 100%; min-width: 0; margin-top: 6px; min-height: 44px;
  border: 1px solid var(--rp-line); background: var(--rp-surface); color: var(--rp-text);
  border-radius: 10px; padding: 9px 12px; font: 16px var(--font);
}
.route-planner input:disabled, .route-planner textarea:disabled, .route-planner select:disabled { opacity: 1; color: var(--rp-text); -webkit-text-fill-color: var(--rp-text); }
.route-planner .rp-title-label textarea { font-size: clamp(26px, 4vw, 36px); font-weight: 650; letter-spacing: -.04em; background: transparent; border-color: transparent; padding: 0; margin: 0; border-radius: 4px; line-height: 1.2; resize: none; overflow: hidden; }
.rp-title-label textarea:hover:not(:disabled) { background: var(--rp-wash); }
.rp-trip-start { display: flex; align-items: center; gap: 28px; margin-top: 24px; }
.rp-trip-start>label { display: flex; align-items: center; gap: 14px; }
.rp-trip-start input { width: 163px; margin: 0; }
.route-planner summary { cursor: pointer; color: var(--rp-accent); min-height: 44px; padding: 11px 0; list-style: none; }
.route-planner summary::-webkit-details-marker { display: none; }
.rp-chev { flex: none; width: 6px; height: 6px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; opacity: .75; transform: rotate(45deg); transition: transform .28s var(--rp-ease); }
details[open]>summary .rp-chev { transform: rotate(-135deg); }
.rp-chev-lead { transform: rotate(-45deg); }
details[open]>summary .rp-chev-lead { transform: rotate(45deg); }
.rp-summary { display: flex; flex-direction: column; gap: 3px; padding: 26px 0 28px; border-bottom: 1px solid var(--rp-line); }
.rp-summary strong { font-size: 14px; font-weight: 500; }
.rp-summary span { color: var(--rp-secondary); font-size: 13px; }
.rp-season { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.rp-season-bar { display: flex; gap: 2px; height: 6px; }
.rp-season-bar i { min-width: 6px; border-radius: 99px; }
.rp-season-bar .rp-m2 { background: var(--ideal); }
.rp-season-bar .rp-m1 { background: var(--okay); }
.rp-season-bar .rp-m0 { background: var(--land-bad); }
.rp-season p { margin: 0; font-size: 12px; color: var(--rp-secondary); }
.rp-empty { padding: 20px 0 22px; border-bottom: 1px solid var(--rp-line); }
.rp-empty-head { margin: 0 0 11px; font-size: 13px; color: var(--rp-secondary); }
.rp-empty-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.route-planner .rp-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 15px; border: 1px solid var(--rp-line); border-radius: 21px; background: var(--rp-surface); color: var(--rp-text); font-size: 13px; font-weight: 500; }
.rp-chip span { font-size: 17px; line-height: 1; }
.rp-stops { list-style: none; padding: 0; margin: 0; }
.rp-stops.is-reordering { user-select: none; -webkit-user-select: none; }
.rp-stops.is-reordering .rp-stop { transition: transform .22s var(--rp-ease); }
.route-planner .rp-drag { cursor: grab; touch-action: none; }
.route-planner .rp-drag:active { cursor: grabbing; }
/* Sechs Punkte am linken Rand: ruhig, bis die Zeile berührt wird. */
.route-planner .rp-grip { flex: none; width: 24px; min-height: 36px; margin-left: -7px; padding: 0; display: grid; place-items: center; border-radius: 8px; color: var(--rp-secondary); opacity: .5; transition: opacity .2s var(--rp-ease), background-color .2s var(--rp-ease); }
.rp-stop:hover .rp-grip, .rp-stop.is-active .rp-grip { opacity: .95; }
.route-planner .rp-grip:hover:not(:disabled) { opacity: 1; background: var(--rp-surface); }
.route-planner .rp-grip:focus-visible { opacity: 1; }
.route-planner .rp-grip:active:not(:disabled) { transform: none; }
.route-planner .rp-stop-menu { flex: none; width: 34px; min-height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; color: var(--rp-secondary); }
.route-planner .rp-stop-menu:hover:not(:disabled), .route-planner .rp-stop-menu[aria-expanded="true"] { background: var(--rp-surface); color: var(--rp-text); }
.rp-stop.is-dragging { position: relative; z-index: 4; transition: none; border-bottom-color: transparent; border-radius: 18px; background: var(--rp-page); box-shadow: 0 14px 34px #00000026; }
.rp-stop.is-active .rp-number { border-color: var(--sel-stroke); box-shadow: 0 0 0 1px var(--sel-stroke), 0 2px 8px #00000022; }
.rp-stop { padding: 26px 0 12px; border-bottom: 1px solid var(--rp-line); }
.rp-stop-top { display: flex; align-items: center; gap: 14px; }
.rp-stop-identity { flex: 1; min-width: 0; }
.rp-stop h3 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin: 0; overflow-wrap: anywhere; }
.rp-stop-top p { font-size: 13px; color: var(--rp-secondary); margin: 3px 0 0; }
.route-planner .rp-number { border-radius: 50%; width: 38px; min-height: 38px; padding: 0; flex-shrink: 0; font-size: 14px; font-weight: 600; background: var(--rp-surface); color: var(--rp-text); }
.route-planner .rp-number:hover { color: var(--rp-accent); }
.rp-stop-sub { margin: 7px 0 0 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; }
.rp-climate-text { font-size: 12px; line-height: 1.6; color: var(--rp-secondary); margin: 0; }
.rp-climate-text i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.rp-score-2 { background: var(--ideal); } .rp-score-1 { background: var(--okay); } .rp-score-0 { background: var(--land-bad); }
/* Die Feineinstellungen fahren aus der Zeile aus, statt als zweite Aufklappzeile danebenzustehen. */
.rp-edit-wrap { margin-left: 56px; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--rp-ease); }
.rp-edit-wrap.is-open { grid-template-rows: 1fr; }
.rp-edit-clip { overflow: hidden; min-height: 0; }
.rp-edit-body { margin: 12px 0 4px; padding: 18px; background: var(--rp-wash); border: 1px solid var(--rp-line); border-radius: 16px; }
.rp-edit-head { margin: 0; font: 600 11px/1.4 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--rp-secondary); }
.rp-edit-body .rp-grid:first-of-type { margin-top: 10px; }
.rp-edit-done { display: flex; justify-content: flex-end; margin-top: 16px; }
.route-planner .rp-edit-done button { font-size: 13px; padding: 8px 18px; border: 1px solid var(--rp-line); border-radius: 20px; color: var(--rp-text); }
.rp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.rp-connection { margin: 0 0 0 56px; font-size: 13px; }
.rp-connection>summary { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.rp-flight-search { padding: 5px 0 15px; }
.rp-flight-search>p:first-child { font-size: 12px; color: var(--rp-secondary); }
.rp-flight-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 15px; }
.route-planner a { color: var(--rp-accent); text-underline-offset: 3px; }
.rp-flight-links a { display: inline-flex; align-items: center; font-size: 13px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--rp-line); border-radius: 10px; text-decoration: none; }
.rp-flight-links a:hover { background: var(--rp-surface); }
.rp-land-note { margin: 10px 0 14px 56px; font-size: 12px; color: var(--rp-secondary); }
.rp-add { padding: 24px 0 0; }
.route-planner .rp-discover { background: var(--rp-surface); font-weight: 500; }
.route-planner .rp-add-toggle { font-size: 13px; }
#routeAddSearch:not([hidden]) { margin-top: 20px; }
.rp-results { margin-top: 8px; display: grid; }
.route-planner .rp-results button { display: flex; justify-content: space-between; align-items: center; text-align: left; gap: 12px; padding: 13px 10px; border-bottom: 1px solid var(--rp-line); border-radius: 0; color: var(--rp-text); }
.rp-results-head { margin: 2px 0 6px; font-size: 12px; color: var(--rp-secondary); }
.route-planner .rp-results button > .rp-result-name { min-width: 0; }
.rp-result-meta { color: var(--rp-secondary); font-size: 12px; white-space: nowrap; }
.rp-result-meta b { font-size: 18px; color: var(--rp-accent); margin-left: 8px; }
.rp-more { margin-top: 32px; }
.rp-more>summary { color: var(--rp-secondary); font-size: 13px; display: flex; align-items: center; gap: 9px; }
.rp-routes { margin: 4px 0 6px; }
.rp-routes-head { margin: 0 0 10px; font: 600 11px/1.4 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--rp-secondary); }
.rp-route-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.rp-route { position: relative; isolation: isolate; display: flex; align-items: center; min-width: 0; border: 1px solid var(--rp-line); border-radius: 14px; background: var(--rp-wash); transition: border-color .24s var(--rp-ease), box-shadow .24s var(--rp-ease), transform .24s var(--rp-ease); }
/* Die Aufhellung liegt als eigene Fläche in der Form der Zeile und wird ein- und ausgeblendet. */
.rp-route::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--hover-wash); opacity: 0; transition: opacity .24s var(--rp-ease); }
.rp-route:has(.rp-route-open:hover)::before { opacity: 1; }
.rp-route:has(.rp-route-open:hover) { transform: translateY(-1px); }
.rp-route:has(.rp-route-open:active) { transform: scale(.988); transition-duration: .09s; }
.rp-route.is-current { border-color: var(--rp-accent); }
.route-planner .rp-route-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 6px 12px 15px; margin: 0; border-radius: 13px; background: none; color: var(--rp-text); text-align: left; text-decoration: none; }
.route-planner button.rp-route-open:active { transform: none; }
.route-planner .rp-route-open:last-child { padding-right: 15px; }
.rp-route-title { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-route-meta { font-size: 11.5px; color: var(--rp-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-planner .rp-route-remove { flex-shrink: 0; width: 34px; min-height: 34px; margin: 0 8px; padding: 0; display: grid; place-items: center; border-radius: 50%; font-size: 17px; line-height: 1; color: var(--rp-secondary); }
.route-planner .rp-route-remove:hover { background: var(--rp-surface); color: var(--rp-text); }
@supports selector(:has(*)) {
  .route-planner .rp-route-open:focus-visible { outline: none; }
  .rp-route:has(.rp-route-open:focus-visible) { outline: 3px solid var(--rp-accent); outline-offset: 3px; }
}
.route-planner .rp-route-new { margin-top: 10px; font-size: 13px; border: 1px solid var(--rp-line); border-radius: 24px; color: var(--rp-text); }
.rp-route-confirm { margin-top: 6px; }
.rp-route-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rp-route-confirm-actions button { font-size: 13px; padding: 8px 16px; border: 1px solid var(--rp-line); border-radius: 20px; }
.rp-note { color: var(--rp-secondary); font-size: 12px; line-height: 1.6; margin: 12px 0 0; }
.rp-note:empty { display: none; }
.rp-footer { padding: 28px 0 max(48px, env(safe-area-inset-bottom, 0px)); }
.rp-footer-inner { border-top: 1px solid var(--rp-line); padding-top: 24px; }
#routeActions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.route-planner .rp-primary { background: var(--rp-accent); color: #fff; font-weight: 600; padding: 12px 24px; }
.route-planner .rp-primary:hover:not(:disabled) { background: var(--rp-accent); filter: brightness(.93); }
#routeShare { margin-top: 22px; }
.rp-link-row { display: flex; gap: 10px; align-items: end; }
.rp-link-row input { font-size: 13px; }
.rp-snapshot { display: inline-block; font-size: 12px; color: var(--rp-secondary); margin: 0 0 14px; }
/* Ein Menü im Stil der Systemmenüs: Kopf mit Ziel, Aktionen darunter, Entfernen abgesetzt. */
.rp-menu { position: fixed; inset: auto; z-index: 40; margin: 0; padding: 6px; width: max-content; min-width: 214px; max-width: min(86vw, 290px);
  border: 1px solid var(--hairline); border-radius: 17px; background: var(--glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: var(--shadow); color: var(--text); font: 14px/1.4 var(--font);
  opacity: 0; transform: scale(.94) translateY(-6px); transform-origin: top right;
  transition: opacity .18s var(--rp-ease), transform .18s var(--rp-ease); }
.rp-menu.is-up { transform: scale(.94) translateY(6px); transform-origin: bottom right; }
.rp-menu.is-open { opacity: 1; transform: none; }
.rp-menu[hidden] { display: none !important; }
.rp-menu-head { display: flex; align-items: center; gap: 9px; margin: 0 0 5px; padding: 7px 12px 10px; border-bottom: 1px solid var(--hairline); font-size: 12px; color: var(--text-dim); }
.rp-menu-head span { font: 18px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.rp-menu button { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-height: 40px; padding: 9px 12px; border: 0; border-radius: 11px; background: none; color: var(--text); font: 14px var(--font); text-align: left; cursor: pointer; transition: background-color .15s var(--rp-ease); }
.rp-menu button:hover, .rp-menu button:focus-visible { background: var(--hover-wash); outline: none; }
.rp-menu button:focus-visible { box-shadow: 0 0 0 2px var(--sel-stroke) inset; }
.rp-menu button:active { background: var(--hover-wash); }
.rp-menu svg { flex: none; opacity: .75; }
.rp-menu hr { border: 0; border-top: 1px solid var(--hairline); margin: 5px 8px; }
.rp-menu .is-danger { color: var(--rp-danger); }
.rp-menu .is-danger:hover, .rp-menu .is-danger:focus-visible { background: color-mix(in srgb, var(--rp-danger) 13%, transparent); }
.rp-map-marker { width: 29px; height: 29px; border: 2px solid #e5f3ff; border-radius: 50%; background: #153653; color: #fff; font: 700 12px var(--font); box-shadow: 0 2px 7px #0007; cursor: pointer; transition: background-color .2s var(--rp-ease), box-shadow .2s var(--rp-ease); }
.rp-map-marker.is-active { background: #2f7fd0; box-shadow: 0 0 0 6px #91c8ff40, 0 2px 10px #0007; }
.route-add-button { display: block; width: 100%; margin: 14px 0; padding: 12px; border: 0; border-radius: 10px; background: var(--chip); color: var(--chip-text); font: 600 13px var(--font); cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 820px) {
  .route-map-nav { top: calc(61px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 600px) {
  .rp-header { padding-left: 20px; padding-right: 16px; }
  .rp-toolbar { height: 64px; gap: 10px; }
  .rp-header h1 { font-size: 16px; }
  .rp-toolbar>button { font-size: 13px; padding: 8px; gap: 7px; }
  .rp-scroll, .rp-footer-inner, .rp-status { width: calc(100% - 40px); }
  .rp-scroll { padding-top: 30px; }
  .rp-trip-start { flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; }
  .rp-trip-start>label { gap: 12px; }
  .rp-summary { padding: 22px 0; }
  .rp-stop { padding-top: 22px; }
  .rp-stop-top { gap: 12px; }
  .rp-stop h3 { font-size: 18px; }
  .rp-stop-top p { font-size: 12px; }
  .route-planner .rp-number { width: 32px; min-height: 32px; font-size: 13px; }
  .rp-stop-sub { gap: 2px 10px; }
  .rp-grid { grid-template-columns: 1fr; gap: 12px; }
  .rp-edit-body { padding: 12px; }
  .route-planner .rp-add-toggle { width: 100%; text-align: center; }
  .rp-result-meta { font-size: 10px; }
  .rp-link-row { flex-wrap: wrap; }
  .rp-link-row input { font-size: 16px; }
}

/* Liquid Glass: the map's materials, on an independent and quiet planning canvas. */
.route-planner { background: var(--bg-grad); color: var(--text); }
.route-planner {
  --rp-text: var(--text); --rp-secondary: var(--text-dim); --rp-line: var(--hairline);
  --rp-surface: var(--hover-wash); --rp-wash: var(--hover-wash); --rp-accent: var(--text);
}
.rp-header { background: var(--glass); backdrop-filter: blur(30px) saturate(145%); -webkit-backdrop-filter: blur(30px) saturate(145%); box-shadow: 0 1px 0 #ffffff08 inset; }
.rp-scroll { width: min(100% - 64px, 800px); margin-top: 38px; padding: 36px 40px 24px; border: 1px solid var(--hairline); border-radius: 28px; background: var(--glass); backdrop-filter: blur(32px) saturate(135%); -webkit-backdrop-filter: blur(32px) saturate(135%); box-shadow: var(--shadow), 0 1px 0 #ffffff15 inset; }
.rp-toolbar>button { border: 1px solid var(--hairline); border-radius: 24px; padding: 10px 17px; background: var(--hover-wash); box-shadow: 0 1px 0 #ffffff0b inset; }
.rp-footer { padding-top: 20px; }
.rp-footer-inner { width: min(100% - 64px, 800px); padding: 22px 40px; border: 1px solid var(--hairline); border-radius: 24px; background: var(--glass); backdrop-filter: blur(28px) saturate(135%); -webkit-backdrop-filter: blur(28px) saturate(135%); box-shadow: 0 10px 32px #0001, 0 1px 0 #ffffff10 inset; }
.route-planner :is(input, textarea, select) { box-shadow: 0 1px 0 #ffffff08 inset; }
.route-planner .rp-title-label textarea { box-shadow: none; }
.route-planner .rp-number { width: 50px; min-height: 50px; position: relative; border-radius: 17px; border: 1px solid var(--hairline); background: var(--hover-wash); box-shadow: 0 2px 8px #0001, 0 1px 0 #ffffff12 inset; }
.rp-flag { font: 27px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.rp-stop-index { position: absolute; right: -5px; bottom: -4px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; font-size: 10px; border-radius: 50%; background: var(--glass-strong); border: 1px solid var(--hairline); color: var(--text-dim); }
.rp-stop-sub, .rp-edit-wrap, .rp-connection, .rp-land-note { margin-left: 68px; }
.rp-result-name { display: flex; gap: 11px; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-result-flag { font-size: 22px; }
.route-planner .rp-discover, .route-planner .rp-primary, .route-planner .rp-route-new { border-radius: 24px; border: 1px solid var(--hairline); box-shadow: 0 1px 0 #ffffff15 inset; }
.rp-route { background: var(--glass-strong); border-color: var(--hairline); box-shadow: 0 1px 0 #ffffff0b inset; }
.rp-route:has(.rp-route-open:hover) { box-shadow: 0 6px 18px #0000001f, 0 1px 0 #ffffff14 inset; }
.rp-stop.is-dragging { background-color: var(--rp-page); background-image: linear-gradient(var(--glass-strong), var(--glass-strong)); }
.rp-route.is-current { border-color: var(--sel-stroke); }
.rp-route-confirm-actions button { border-color: var(--hairline); }
.route-planner .rp-primary { background: var(--chip); color: var(--chip-text); }
.route-planner .rp-primary:hover:not(:disabled) { background: var(--chip); }
.rp-flight-links a { border-radius: 20px; background: var(--hover-wash); }
.rp-note { max-width: 68ch; }
@media (max-width: 600px) {
  .rp-scroll { width: calc(100% - 24px); margin-top: 18px; padding: 26px 20px 20px; border-radius: 24px; }
  .rp-footer-inner { width: calc(100% - 24px); padding: 20px; border-radius: 22px; }
  .rp-toolbar>button { padding: 9px 12px; }
  .route-planner .rp-number { width: 42px; min-height: 42px; border-radius: 14px; }
  .rp-flag { font-size: 24px; }
  /* Am Handy beginnt alles an derselben Kante wie das Saisonband, sonst wird die Zeile zu schmal. */
  .rp-stop-sub, .rp-edit-wrap, .rp-connection, .rp-land-note { margin-left: 0; }
  .rp-stop-index { min-width: 18px; height: 18px; font-size: 9px; }
  .rp-stop-top { gap: 12px; }
}


/* ---------- Planungsmodus: Planung links, Karte rechts (ab 900px) ----------
   Eine Bühne statt zwei Seiten. Die Karte läuft ungeschnitten weiter, die Planung
   schwebt als Glasspalte darüber, im selben Material wie das übrige Chrome. */
@media (min-width: 900px) {
  html[data-view="plan"] { --plan-w: clamp(336px, 31vw, 430px); }
  html[data-view="plan"] .stage { visibility: visible; pointer-events: auto; }
  html[data-view="plan"] .chrome-title { display: none; }
  html[data-view="plan"] .search-wrap,
  html[data-view="plan"] .chrome-months { left: calc(var(--plan-w) + 32px); }
  /* Die Leisten zentrieren sich in der freien Fläche und dürfen sie nicht überlaufen. */
  html[data-view="plan"] .search-wrap { width: min(376px, calc(100vw - var(--plan-w) - 96px)); }
  html[data-view="plan"] .chrome-months { max-width: min(452px, calc(100vw - var(--plan-w) - 112px)); padding: 4px; --pill-h: 34px; }
  /* Die zwölf Monatsfelder haben sonst eine feste Breite und laufen rechts aus der
     Kapsel heraus, sobald die Planung die Fläche schmaler macht. Hier teilen sie sich
     die vorhandene Breite. Sichtbar ist je Feld nur die Kerbe, den Namen des Monats
     trägt der Regler selbst. */
  html[data-view="plan"] .chrome-months { width: auto; }
  html[data-view="plan"] .months { width: 100%; }
  html[data-view="plan"] .months button { flex: 1 1 0; width: auto; min-width: 0; }
  /* Flacher als auf der Karte: neben der Planung soll die Leiste nicht der schwerste Körper im Bild sein. */
  html[data-view="plan"] .months button { padding: 28px 0 3px; }
  html[data-view="plan"] .m-tick { height: 5px; }
  html[data-view="plan"] .months button.q .m-tick { height: 8px; }
  html[data-view="plan"] .months::before, html[data-view="plan"] .m-fill { top: 13px; height: 4px; }
  html[data-view="plan"] .m-thumb { top: 2px; width: 38px; height: 25px; font-size: 12px; }

  .route-planner {
    position: fixed; inset: 16px auto 16px 16px; width: var(--plan-w); height: auto;
    display: flex; flex-direction: column; overflow: hidden; z-index: 20;
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
    border: 1px solid var(--hairline); border-radius: 22px; box-shadow: var(--shadow);
  }
  .rp-header { position: static; flex: none; padding: 13px 18px 0; border-bottom: 1px solid var(--hairline); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .rp-toolbar { height: auto; max-width: none; padding-bottom: 11px; gap: 8px; }
  .rp-header h1 { font-size: 12px; font-weight: 600; color: var(--text-dim); letter-spacing: .01em; }
  .route-planner .rp-exit { font-size: 12px; padding: 8px 12px; gap: 6px; min-height: 36px; }
  .rp-status { width: auto; padding: 11px 18px 0; }
  .rp-scroll { flex: 1; min-height: 0; width: auto; margin: 0; padding: 15px 18px 20px; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; }
  .rp-footer { flex: none; padding: 0; }
  .rp-footer-inner { width: auto; padding: 12px 18px max(12px, env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid var(--hairline); border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .route-planner .rp-title-label textarea { font-size: 21px; letter-spacing: -.03em; }
  .rp-trip-start { margin-top: 12px; gap: 4px 16px; flex-wrap: wrap; }
  .route-planner .rp-trip-start input { width: 146px; min-height: 38px; }
  .rp-summary { padding: 12px 0 10px; }
  .rp-stop { padding: 13px 0 8px; }
  .rp-band { margin-top: 10px; }
  .rp-connection > summary { min-height: 32px; padding: 6px 0; }
  .route-planner .rp-stop-menu { width: 30px; min-height: 30px; }
  .rp-edit-body { padding: 14px; }
  .rp-land-note { margin-top: 6px; }
  .rp-stop-top { gap: 10px; }
  .route-planner .rp-weeks button { width: 28px; min-height: 28px; }
  .rp-weeks b { min-width: 56px; }
  .rp-stop h3 { font-size: 16px; line-height: 1.2; }
  .rp-stop-top p { font-size: 11.5px; }
  .route-planner .rp-number { width: 42px; min-height: 42px; border-radius: 14px; }
  .rp-flag { font-size: 23px; }
  .rp-stop-index { min-width: 18px; height: 18px; font-size: 9px; right: -4px; bottom: -3px; }
  .rp-stop-sub, .rp-edit-wrap, .rp-connection, .rp-land-note { margin-left: 0; }
  .rp-stop-sub { margin-top: 6px; gap: 4px 10px; }
  .rp-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .rp-add { padding-top: 20px; }
  .route-planner .rp-add-toggle { width: 100%; text-align: center; }
  .rp-note { max-width: none; }
  .rp-more { margin-top: 22px; }
  #routeActions { gap: 8px; }
  .route-planner .rp-primary { padding: 11px 20px; font-size: 14px; }
}

/* Saisonband: zwölf Monatsfelder in den Kartenfarben, der eigene Aufenthalt ist umrandet.
   Die Monatszahl steht leise im Feld, damit über der Liste keine Kopfzeile nötig ist. */
.rp-band { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: 12px; }
.rp-band i { display: grid; place-items: center; height: 22px; border-radius: 5px; font: 500 9px/1 var(--font); font-style: normal; opacity: .34; color: var(--text); }
.rp-band .rp-m2 { background: var(--ideal); }
.rp-band .rp-m1 { background: var(--okay); }
.rp-band .rp-m0 { background: var(--land-bad); }
.rp-band .is-in { opacity: 1; color: #12161d; box-shadow: 0 0 0 1.5px var(--sel-stroke); }
.rp-band .is-in.rp-m0 { color: var(--text); }

/* Aufenthalt in ganzen Wochen, die genauen Nächte liegen in den Feineinstellungen. */
.rp-weeks { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.route-planner .rp-weeks button { width: 30px; min-height: 30px; padding: 0; display: grid; place-items: center; border: 1px solid var(--hairline); border-radius: 10px; background: var(--hover-wash); color: var(--text); font-size: 16px; line-height: 1; }
.route-planner .rp-weeks button:hover:not(:disabled) { background: var(--glass-strong); }
.rp-weeks b { min-width: 62px; text-align: center; font: 600 11.5px/1 var(--font); }

@media (max-width: 899px) {
  .rp-band i { height: 26px; font-size: 10px; }
  .route-planner .rp-weeks button { width: 36px; min-height: 36px; border-radius: 12px; }
  .rp-weeks b { min-width: 60px; font-size: 12.5px; }
}
.rp-exit-short { display: none; }
@media (max-width: 600px) {
  .rp-exit-long { display: none; }
  .rp-exit-short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .route-planner button, .rp-route, .rp-route::before, .rp-chev, .rp-map-marker, .rp-stops.is-reordering .rp-stop, .rp-menu, .rp-edit-wrap { transition-duration: .01ms; }
  .route-planner button:active:not(:disabled), .rp-route:has(.rp-route-open:hover), .rp-route:has(.rp-route-open:active) { transform: none; }
}

/* Ein- und Ausblenden der Planung: am Handy von unten, am Schreibtisch aus der Spalte. */
@keyframes rp-enter { from { opacity: 0; transform: translateY(12px); } }
@keyframes rp-leave { to { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: no-preference) {
  .route-planner:not([hidden]) { animation: rp-enter .34s var(--rp-ease) both; }
  .route-planner.is-leaving { animation: rp-leave .19s ease-in both; }
}
@media (min-width: 900px) {
  @keyframes rp-enter { from { opacity: 0; transform: translateX(-16px) scale(.985); } }
  @keyframes rp-leave { to { opacity: 0; transform: translateX(-12px) scale(.99); } }
}