/* Interactive site map by Lageplan-Service (https://lageplan-service.de)

Required Notice: Copyright 2026 Smart Things Internetkommunikation GmbH (https://lageplan-service.de)
Licensor Line of Business: Interactive site maps and you-are-here signs with QR codes for parks, zoos, hospitals, trade fairs and other venues: creating, designing, hosting and maintaining them (https://lageplan-service.de)
   License: PolyForm Shield License 1.0.0 (https://polyformproject.org/licenses/shield/1.0.0). Customers of
   the licensor get an additional permission, see LICENSE.md in their delivery. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2?v=7dae0c6c66) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2?v=18b2a1a39a) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.lp-app {
  --lp-ink: #15302A;
  --lp-ink-2: #3E544A;
  --lp-paper: #F5F7F0;
  --lp-surface: #FFFFFF;
  --lp-line: #D3DBC8;
  --lp-line-strong: #9FAE97;
  --lp-accent: #E2001A; /* Selection and logo, can be overridden by the configuration */
  --lp-sign: #22312B;
  --lp-route: #0B3D91;
  --lp-here: #F56600; /* You-are-here pin, can be overridden with "here.color" in the configuration */
  --lp-here-text: #15302A; /* Text on the pin colour: 4.6 : 1 on #F56600 */
  --lp-focus: #15302A;
  --lp-shadow: 0 1px 2px rgba(21, 48, 42, .14), 0 10px 30px rgba(21, 48, 42, .16);
  --lp-panel-width: clamp(250px, 36vw, 372px); /* narrower in a small window, e.g. a phone held sideways */
  --lp-info-width: 384px;
  --lp-sheet-medium: 0px;
  color-scheme: light;
}

:where(.lp-app), :where(.lp-app) *, :where(.lp-app) *::before, :where(.lp-app) *::after { box-sizing: border-box; }

:where(.lp-app) :is(button, input) { font: inherit; color: inherit; }
:where(.lp-app) button { cursor: pointer; }
:where(.lp-app) svg { flex: none; }
:where(.lp-app) [hidden] { display: none !important; }

.lp-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.lp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:where(.lp-app) :focus-visible { outline: 3px solid var(--lp-focus); outline-offset: 2px; }

.lp-skip {
  position: absolute; left: 12px; top: -80px; z-index: 50;
  padding: 10px 16px; border-radius: 8px;
  background: var(--lp-ink); color: #fff; font-weight: 700; text-decoration: none;
}
.lp-skip:focus { top: 12px; }

/* ---------- Base layout ---------- */

.lp-app {
  display: grid;
  /* The sidebar also covers the strip beside the notch of a phone held sideways (safe area, viewport-fit=cover) */
  grid-template-columns: calc(var(--lp-panel-width) + env(safe-area-inset-left)) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  font-family: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--lp-ink);
  background: var(--lp-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lp-panel {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--lp-paper);
  border-right: 1px solid var(--lp-line);
  padding-left: env(safe-area-inset-left);
}

/* Handle rows on sheet and info card and "Leiste einklappen" exist only on the phone (see below) */
.lp-handle-row, .lp-header-actions .lp-collapse { display: none; }

.lp-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo marke aktionen" "titel titel titel";
  align-items: center;
  column-gap: 10px;
  padding: 16px 16px 16px 22px;
}

.lp-logo { grid-area: logo; width: 27px; height: 25px; fill: var(--lp-accent); }

.lp-header-text { display: contents; }

.lp-brand {
  grid-area: marke;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.lp-title {
  grid-area: titel;
  margin: 12px 0 0;
  font-size: 34px;
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.02em;
}

.lp-header-actions { grid-area: aktionen; display: flex; gap: 2px; }

/* Logo back to the start page of the website ("home" in the configuration): heads the sidebar. The image keeps its
   proportions within a fixed height, so wide word marks and square signets both fit. The copy on the map is for the
   phone held upright (see there). */
.lp-home {
  display: block;
  flex: none;
  width: fit-content;
  max-width: calc(100% - 38px);
  margin: 18px 16px 0 22px;
  border-radius: 6px;
}
.lp-home img { display: block; width: auto; max-width: 100%; height: 40px; object-fit: contain; object-position: left center; }
.lp-home--map { display: none; }
.lp-home + .lp-handle-row + .lp-header { padding-top: 12px; }

.lp-icon-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 0; border-radius: 10px;
  background: transparent;
  color: var(--lp-ink-2);
}
.lp-icon-btn svg { width: 21px; height: 21px; }
.lp-icon-btn:hover { background: rgba(21, 48, 42, .07); color: var(--lp-ink); }
.lp-icon-btn[aria-pressed="true"] { background: var(--lp-ink); color: #fff; }

.lp-panel-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* 4 px at the top so the focus ring of the search (3 px plus 1 px gap) is not cut off at the edge;
     the head above gives them up */
  padding: 4px 22px 28px;
  scrollbar-gutter: stable;
}

/* ---------- Search ---------- */

.lp-search { position: relative; margin: 0 0 22px; }

.lp-search-icon {
  position: absolute; left: 14px; top: 50%;
  width: 20px; height: 20px;
  transform: translateY(-50%);
  color: var(--lp-ink-2);
  pointer-events: none;
}

.lp-search input {
  width: 100%;
  height: 48px;
  padding: 0 48px 0 44px;
  border: 1.5px solid var(--lp-line-strong);
  border-radius: 12px;
  background: var(--lp-surface);
  font-size: 16px;
}
.lp-search input::placeholder { color: #5E7268; opacity: 1; }
.lp-search input:focus-visible { outline-offset: 1px; border-color: var(--lp-ink); }
/* Clear button (lp-app.js); hide the browsers' built-in one, otherwise there would be two X */
.lp-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.lp-search-clear {
  position: absolute; right: 4px; top: 4px;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  padding: 0; border: 0; border-radius: 9px;
  background: transparent;
  color: var(--lp-ink-2);
}
.lp-search-clear svg { width: 20px; height: 20px; }
.lp-search-clear:hover { background: rgba(21, 48, 42, .07); color: var(--lp-ink); }
.lp-search-clear:focus-visible { outline-offset: 0; }

/* ---------- Blocks ---------- */

.lp-block { margin: 0 0 24px; }

.lp-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.lp-h2 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.3;
}

.lp-text-btn {
  padding: 2px 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 650;
  color: var(--lp-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Topic chips ---------- */

.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 13px 4px 5px;
  border: 1.5px solid var(--lp-line-strong);
  border-radius: 999px;
  background: var(--lp-surface);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.15;
  text-align: left;
}
.lp-chip:hover { border-color: var(--lp-topic-color); }

.lp-chip-icon {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--lp-topic-color);
  color: var(--lp-topic-ink);
}
.lp-chip-icon svg { width: 16px; height: 16px; }

.lp-chip-count {
  font-weight: 500;
  color: var(--lp-ink-2);
  font-variant-numeric: tabular-nums;
}

.lp-chip-check { display: none; width: 16px; height: 16px; margin-left: -2px; }

.lp-chip[aria-pressed="true"] {
  border-color: var(--lp-topic-color);
  background: color-mix(in srgb, var(--lp-topic-color) 13%, #fff);
  box-shadow: inset 0 0 0 1.5px var(--lp-topic-color);
}
.lp-chip[aria-pressed="true"] .lp-chip-check { display: block; }
.lp-chip[aria-pressed="true"] .lp-chip-count { display: none; }

/* ---------- Layers ---------- */

.lp-layers { display: grid; gap: 8px; }

.lp-layer {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--lp-line-strong);
  border-radius: 12px;
  background: var(--lp-surface);
  text-align: left;
}
.lp-layer:hover { border-color: var(--lp-ink-2); }

.lp-layer-symbol {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 9px;
  color: #fff;
}
.lp-layer-symbol svg { width: 22px; height: 22px; }
.lp-layer-symbol { background: var(--lp-layer-color, var(--lp-ink)); }

.lp-layer-text { display: grid; gap: 1px; }
.lp-layer-name { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.lp-layer-info { font-size: 13.5px; color: var(--lp-ink-2); line-height: 1.3; }

/* Switch look: state shown by position and fill, not only colour */
.lp-layer::after {
  content: "";
  justify-self: end;
  width: 38px; height: 22px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 11px 50%, #fff 7px, transparent 7.5px),
    #B9C4B2;
  transition: background .18s ease;
}
.lp-layer[aria-pressed="true"]::after {
  background:
    radial-gradient(circle at 27px 50%, #fff 7px, transparent 7.5px),
    var(--lp-ink);
}

/* ---------- List ---------- */

.lp-status {
  margin: 0;
  font-size: 14px;
  color: var(--lp-ink-2);
  font-variant-numeric: tabular-nums;
}

.lp-list { list-style: none; margin: 0 -8px; padding: 0; }
.lp-list:focus { outline: none; }

.lp-entry {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  padding: 8px;
  border: 0;
  border-radius: 9px;
  background: none;
  text-align: left;
  font-size: 15.5px;
  line-height: 1.3;
}
.lp-entry:hover { background: rgba(21, 48, 42, .065); }
/* Active place: whole row filled dark. Deliberately no coloured side bar – that is a worn-out device. */
.lp-entry[aria-current="true"] {
  background: var(--lp-ink);
  color: #fff;
  font-weight: 700;
}
.lp-entry[aria-current="true"] .lp-dot { box-shadow: 0 0 0 1.5px #fff; }

.lp-dots { display: inline-flex; gap: 3px; width: 23px; flex: none; }
.lp-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--lp-topic-color);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9);
}

.lp-empty { margin: 4px 0 0; color: var(--lp-ink-2); font-size: 15px; }

/* ---------- Stage and map ---------- */

.lp-stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--lp-stage, #FFFFFF);
}

.lp-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  container-type: size;
}
.lp-map:active { cursor: grabbing; }
.lp-map:focus-visible { outline: 3px solid var(--lp-focus); outline-offset: -3px; }

/* The canvas fits the whole map exactly into the visible map area, like object-fit: contain.
   That is also the smallest zoom (minScale 1). Container units instead of measuring in the script: when the
   area changes (sidebar hidden, window size), the canvas adapts at once. --lp-aspect (width by height of
   the map) is set by lp-app.js, --lp-bottom (phone: the collapsed sheet above the bottom edge) is below. */
.lp-canvas {
  position: absolute;
  inset: 0 0 var(--lp-bottom, 0px);
  width: min(100cqw, (100cqh - var(--lp-bottom, 0px)) * var(--lp-aspect, 1.5));
  height: min(100cqh - var(--lp-bottom, 0px), 100cqw / var(--lp-aspect, 1.5));
  margin: auto;
  --lp-k: 1;
  --lp-unit: 1;
}

.lp-basemap-layer, .lp-basemap-layer svg { width: 100%; height: 100%; display: block; }

/* Layers of the basemap (hide, dim) are written by lp-app.js as <style id="lp-layers-style"> from the configuration */

.lp-veil {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background .25s ease;
  pointer-events: none;
}
.lp-filtered .lp-veil,
.lp-routes-on .lp-veil { background: rgba(255, 255, 255, .4); }

.lp-routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.lp-marker-layer { position: absolute; inset: 0; }

/* ---------- Markers ---------- */

.lp-marker {
  --lp-dot-size: 12px;
  position: absolute;
  left: calc(var(--lp-x) * 1%);
  top: calc(var(--lp-y) * 1%);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  padding: 0;
  border: 0;
  background: none;
  transform: scale(var(--lp-k));
  transition: transform .26s cubic-bezier(.2, .7, .2, 1);
}
.lp-marker:focus-visible { outline: none; z-index: 4; }

.lp-marker-dot {
  display: grid;
  place-items: center;
  width: var(--lp-dot-size);
  height: var(--lp-dot-size);
  border-radius: 50%;
  background: var(--lp-topic-color);
  color: var(--lp-topic-ink);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--lp-topic-color-2, #fff), 0 1px 4px 3px rgba(21, 48, 42, .22);
  transition: width .16s ease, height .16s ease, box-shadow .16s ease;
}
.lp-marker-dot svg { width: 62%; height: 62%; display: none; }

.lp-z0 .lp-marker { --lp-dot-size: 9px; }
.lp-z0 .lp-marker-dot { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--lp-topic-color-2, #fff), 0 1px 3px 1px rgba(21, 48, 42, .2); }
.lp-z2 .lp-marker { --lp-dot-size: 22px; }
.lp-z3 .lp-marker { --lp-dot-size: 28px; }
.lp-z2 .lp-marker-dot svg, .lp-z3 .lp-marker-dot svg { display: block; }
/* Minor places (staff housing, workshops …) step back in the overview; hovered or open they get the full size */
.lp-z0 .lp-marker--minor, .lp-z0 .lp-label--minor { --lp-dot-size: 6px; }
.lp-z1 .lp-marker--minor, .lp-z1 .lp-label--minor { --lp-dot-size: 8px; }

.lp-marker:hover { z-index: 3; }
.lp-marker:hover .lp-marker-dot { --lp-dot-size: 26px; }
.lp-marker:hover .lp-marker-dot svg { display: block; }

.lp-marker:focus-visible .lp-marker-dot {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--lp-focus), 0 2px 6px rgba(21, 48, 42, .3);
}

.lp-marker--highlight { z-index: 2; }

/* Names on their own layer above all points; which are visible is decided by the collision test in the script */
.lp-label-layer { position: absolute; inset: 0; z-index: 10; pointer-events: none; }

.lp-label {
  --lp-dot-size: 12px;
  font-size: 1rem;
  position: absolute;
  left: calc(var(--lp-x) * 1%);
  top: calc(var(--lp-y) * 1%);
  width: 0;
  height: 0;
  transform: scale(var(--lp-k));
  transform-origin: 0 0;
  transition: transform .26s cubic-bezier(.2, .7, .2, 1);
}
.lp-z0 .lp-label { --lp-dot-size: 9px; }
.lp-z2 .lp-label { --lp-dot-size: 22px; }
.lp-z3 .lp-label { --lp-dot-size: 28px; }
.lp-label--active { --lp-dot-size: 32px; z-index: 3; }
.lp-label--hover { z-index: 2; }

.lp-marker-name {
  position: absolute;
  left: calc(var(--lp-dot-size) / 2 + 7px);
  top: 0;
  display: none;
  padding: 3px 8px 4px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 1px 3px rgba(21, 48, 42, .25);
  color: var(--lp-ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  transform: translateY(-50%);
}
.lp-label--on .lp-marker-name,
.lp-label--hover .lp-marker-name,
.lp-label--active .lp-marker-name { display: block; }
.lp-label--active .lp-marker-name { background: var(--lp-ink); color: #fff; }
/* If a name sticks out on the right, it stands left of the point (placeLabels in lp-app.js) */
.lp-label--left .lp-marker-name { left: auto; right: calc(var(--lp-dot-size) / 2 + 7px); }

.lp-note .lp-marker-name { left: calc(50% + var(--lp-dot-size) / 2 + 7px); top: 50%; }
.lp-note:hover .lp-marker-name,
.lp-note:focus-visible .lp-marker-name { display: block; }

.lp-marker--active { z-index: 5; }
.lp-marker--active .lp-marker-dot {
  --lp-dot-size: 32px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--lp-accent), 0 6px 14px rgba(21, 48, 42, .35);
}
.lp-marker--active .lp-marker-dot svg { display: block; }

.lp-marker--active::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 0 solid transparent; /* width and colour come from the animation */
  /* 2.3 seconds, the ring grows to three times its size: long and large enough for the eye to find the selected place
     (before 1.1 s and 1.9 times – too fleeting) */
  animation: lp-pulse 2.3s cubic-bezier(.2, .6, .3, 1) 1;
  pointer-events: none;
}
/* The ring grows by size and border width and fades by its colour, not by transform and opacity: Safari draws the
   scaled map at low resolution while such an animation runs inside it, and map and names stayed blurry for the whole
   pulse (iPhone test, 2026-10-16). Same look: scale .6 → 3 of the 46 px ring with its 2 px border. */
@keyframes lp-pulse {
  0% { inset: 3.2px; border-width: 1.2px; border-color: color-mix(in srgb, var(--lp-accent) 95%, transparent); }
  55% { border-color: color-mix(in srgb, var(--lp-accent) 60%, transparent); }
  100% { inset: -52px; border-width: 6px; border-color: transparent; }
}

/* ---------- You are here ---------- */

/* Pin with its tip on the location. The tip lies at 50 % / 93.5 % of the graphic (y 159 of 170);
   it is counter-scaled around this point so the pin keeps its size and does not wander while zooming. */
.lp-here {
  position: absolute;
  left: calc(var(--lp-x) * 1%);
  top: calc(var(--lp-y) * 1%);
  z-index: 7;
  width: 34px;
  padding: 0;
  border: 0;
  background: none;
  translate: -50% -93.5%;
  scale: var(--lp-k);
  transform-origin: 50% 93.5%;
  transition: scale .26s cubic-bezier(.2, .7, .2, 1);
}
.lp-here-pin { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 1px 2px rgba(21, 48, 42, .45)); }
.lp-here-rim { fill: #fff; stroke: #fff; stroke-width: 20; stroke-linejoin: round; }
.lp-here-drop { fill: var(--lp-here); }
.lp-here-eye { fill: #fff; }
.lp-here:focus-visible { outline: none; }
.lp-here:focus-visible .lp-here-rim { stroke: var(--lp-focus); stroke-width: 26; }

.lp-here-name {
  position: absolute;
  right: calc(100% + 6px);
  top: 32%;
  translate: 0 -50%;
  padding: 3px 8px 4px;
  border-radius: 7px;
  background: var(--lp-here);
  box-shadow: 0 1px 3px rgba(21, 48, 42, .25);
  color: var(--lp-here-text);
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.15;
  white-space: nowrap;
}
/* At the left map edge above the pin, the name of the place already stands to its right */
.lp-here--top .lp-here-name { right: auto; left: 50%; top: auto; bottom: calc(100% + 4px); translate: -50% 0; }
/* Name of the place under the pin to the right of the pin instead of next to the (covered) symbol */
.lp-label--here .lp-marker-name { left: 24px; }

/* Ring at the tip, like the selection pulse of a place, but twice */
.lp-here::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 93.5%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  border: 0 solid transparent; /* width and colour come from the animation */
  pointer-events: none;
}
.lp-here--pulse::after { animation: lp-pulse-here 2.3s cubic-bezier(.2, .6, .3, 1) 2; }
/* Like lp-pulse: the 24 px ring with its 3 px border from scale .6 to 3, by size, border width and colour */
@keyframes lp-pulse-here {
  0% { width: 14.4px; height: 14.4px; margin: -7.2px 0 0 -7.2px; border-width: 1.8px; border-color: color-mix(in srgb, var(--lp-here) 95%, transparent); }
  55% { border-color: color-mix(in srgb, var(--lp-here) 60%, transparent); }
  100% { width: 72px; height: 72px; margin: -36px 0 0 -36px; border-width: 9px; border-color: transparent; }
}

/* Heading at the location, only with the compass switched on. Below the markers so they stay readable,
   and counter-scaled like the pin. The rotation comes as --lp-heading (degrees, 0 = up) from lp-app.js. */
.lp-heading {
  display: none;
  position: absolute;
  left: calc(var(--lp-x) * 1%);
  top: calc(var(--lp-y) * 1%);
  z-index: 0;
  width: 224px;
  height: 224px;
  translate: -50% -50%;
  rotate: calc(var(--lp-heading, 0) * 1deg);
  scale: var(--lp-k);
  color: var(--lp-here);
  pointer-events: none;
  transition: scale .26s cubic-bezier(.2, .7, .2, 1);
}
.lp-compass-on .lp-heading:not([hidden]) { display: block; }
.lp-heading svg { display: block; width: 100%; height: 100%; }

/* The place under the pin: its symbol steps back, it stays reachable via list and pin */
.lp-marker.lp-below-pin { visibility: hidden; }

.lp-entry-here {
  flex: none;
  margin-left: auto;
  padding: 2px 7px 3px;
  border-radius: 6px;
  background: var(--lp-here);
  color: var(--lp-here-text);
  font-size: 12.5px;
  font-weight: 750;
  white-space: nowrap;
}

/* In the route view the other places step back */
.lp-route-focus .lp-marker:not(.lp-route-object) { opacity: .45; }
.lp-route-focus .lp-marker:not(.lp-route-object):hover,
.lp-route-focus .lp-marker:not(.lp-route-object):focus-visible { opacity: 1; }
.lp-route-focus .lp-label:not(.lp-label--hover) { opacity: .6; }

/* Routes: stops, notes, direction arrows (shown via the hidden attribute) */
.lp-stop, .lp-note { z-index: 4; }

.lp-stop .lp-marker-dot {
  --lp-dot-size: 22px;
  background: #fff;
  color: var(--lp-route-own, var(--lp-route));
  box-shadow: 0 0 0 2.5px var(--lp-route-own, var(--lp-route)), 0 1px 4px 2px rgba(21, 48, 42, .25);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
}
.lp-z1 .lp-stop .lp-marker-dot { --lp-dot-size: 20px; }

.lp-note .lp-marker-dot {
  --lp-dot-size: 24px;
  border-radius: 7px;
  background: var(--lp-route-own, var(--lp-route));
  color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 1px 4px 2px rgba(21, 48, 42, .25);
}
.lp-note .lp-marker-dot svg { display: block; width: 15px; height: 15px; }

.lp-route-arrow {
  position: absolute;
  left: calc(var(--lp-x) * 1%);
  top: calc(var(--lp-y) * 1%);
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  color: #fff;
  transform: rotate(var(--lp-angle)) scale(var(--lp-k));
  pointer-events: none;
}
.lp-route-arrow svg { width: 100%; height: 100%; display: block; }

.lp-route-edge {
  fill: none;
  stroke: #fff;
  stroke-width: calc(var(--lp-unit) * var(--lp-k) * 10);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-route-line {
  fill: none;
  stroke: var(--lp-route-own, var(--lp-route));
  stroke-width: calc(var(--lp-unit) * var(--lp-k) * 6);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-route-marked {
  fill: none;
  stroke: var(--lp-accent);
  stroke-width: calc(var(--lp-unit) * var(--lp-k) * 6);
  stroke-linecap: round;
}
.lp-route-center {
  fill: none;
  stroke: rgba(255, 255, 255, .95);
  stroke-width: calc(var(--lp-unit) * var(--lp-k) * 1.6);
  stroke-dasharray: calc(var(--lp-unit) * var(--lp-k) * 2) calc(var(--lp-unit) * var(--lp-k) * 7);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Line from the you-are-here location to the open place, in the colour of pin and fan: when the fan lies on it,
   you are looking at the target. Dashed, because it is a beeline and not a path. */
.lp-target-edge, .lp-target-line {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: calc(var(--lp-unit) * var(--lp-k) * 9) calc(var(--lp-unit) * var(--lp-k) * 9);
}
.lp-target-edge { stroke: #fff; stroke-width: calc(var(--lp-unit) * var(--lp-k) * 8); }
.lp-target-line { stroke: var(--lp-here); stroke-width: calc(var(--lp-unit) * var(--lp-k) * 4); }

/* ---------- Map controls ---------- */

/* One flat bar at the top: zoom | arrows | whole map. Saves height compared to a stack, the map stays free. */
.lp-controls {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-control-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--lp-line);
  border-radius: 11px;
  background: var(--lp-surface);
  color: var(--lp-ink);
}
.lp-control-btn svg { width: 19px; height: 19px; }
.lp-control-btn:hover { background: #EEF2E8; }

/* Groups and the single button carry the shadow, the buttons of a group touch each other */
.lp-group, .lp-single {
  box-shadow: 0 1px 2px rgba(21, 48, 42, .12), 0 3px 10px rgba(21, 48, 42, .1);
}
.lp-group { display: flex; border-radius: 11px; }
.lp-group .lp-control-btn { border-radius: 0; }
.lp-group .lp-control-btn + .lp-control-btn { border-left: 0; }
.lp-group .lp-control-btn:first-child { border-radius: 11px 0 0 11px; }
.lp-group .lp-control-btn:last-child { border-radius: 0 11px 11px 0; }

/* Button that opens the arrows, and the magnifier, only on the phone (see below) */
.lp-arrows-toggle, .lp-search-button { display: none; }

/* North arrow: round badge, free next to the controls. Shows, as on a printed plan, where north lies on the
   map; with a compass it is also its switch (lp-app.js, "Compass"). Round like the compass button
   on the phone, so both belong together. */
.lp-north-arrow {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid var(--lp-line);
  border-radius: 50%;
  background: var(--lp-surface);
  color: var(--lp-ink);
  box-shadow: 0 1px 2px rgba(21, 48, 42, .12), 0 3px 10px rgba(21, 48, 42, .1);
}
button.lp-north-arrow:hover { background: #EEF2E8; }
/* Without a compass (desktop) it is information only: flat on the map like a printed north arrow, without shadow
   and border. The buttons carry the shadow, it says "can be pressed". Grey would mean "not available right now". */
span.lp-north-arrow { background: rgba(255, 255, 255, .82); border-color: transparent; box-shadow: none; }
.lp-north-arrow svg { display: block; width: 38px; height: 38px; overflow: visible; }
.lp-north-arrow-n, .lp-north-arrow-tip { fill: currentColor; }
.lp-north-arrow-n { font-size: 11px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }

/* Compass on the phone: round button with pin and fan, the symbol it switches on on the map. Off, the fan
   points up faintly, on it turns like the one at the location (--lp-heading). */
.lp-heading-button { position: relative; border-radius: 50%; }
.lp-heading-button-fan { fill: var(--lp-here); opacity: .4; }
.lp-compass-on .lp-heading-button-fan { opacity: .65; transform: rotate(calc(var(--lp-heading, 0) * 1deg)); }
.lp-heading-button[aria-pressed="true"], .lp-north-arrow[aria-pressed="true"] {
  border-color: var(--lp-here);
  box-shadow: inset 0 0 0 1px var(--lp-here), 0 1px 2px rgba(21, 48, 42, .12), 0 3px 10px rgba(21, 48, 42, .1);
}
/* Short hint at the button, read out via #lp-announce */
.lp-north-arrow[data-hint]::after, .lp-heading-button[data-hint]::after {
  content: attr(data-hint);
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: max-content;
  max-width: 230px;
  padding: 5px 9px 6px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(21, 48, 42, .25);
  color: var(--lp-ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  text-align: left;
  pointer-events: none;
}
/* Phone: compass as a large round button centred on the top edge of sheet and info card, half over the map
   (handle row, see below) */
.lp-heading-button--handle {
  order: -1;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-top: -30px;
  padding: 0;
  border: 1px solid var(--lp-line);
  background: var(--lp-surface);
  color: var(--lp-ink);
  box-shadow: 0 1px 2px rgba(21, 48, 42, .14), 0 4px 14px rgba(21, 48, 42, .16);
}
.lp-heading-button--handle svg { width: 50px; height: 50px; overflow: visible; }
/* Invitation on site (see inviteCompass): a ring in the pin colour runs outwards three times */
.lp-heading-button--invite { animation: lp-invite 1.6s ease-out 3; }
@keyframes lp-invite {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lp-here) 55%, transparent), 0 4px 14px rgba(21, 48, 42, .16); }
  100% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--lp-here) 0%, transparent), 0 4px 14px rgba(21, 48, 42, .16); }
}

/* ---------- Hide and show the sidebar (desktop only) ---------- */

/* A handle at the edge of the sidebar, at the top next to the head. With the sidebar hidden it stands at the window
   edge and says what it brings back. On the phone the bottom sheet does this job. */
.lp-flap { display: none; }

/* ---------- Info card as a plant sign ---------- */

.lp-info-card {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  width: min(var(--lp-info-width), calc(100% - 36px));
  max-height: calc(100% - 36px);
  overflow: hidden;
  border-radius: 14px;
  background: var(--lp-surface);
  box-shadow: var(--lp-shadow);
  animation: lp-rise .24s cubic-bezier(.2, .7, .2, 1);
}
@keyframes lp-rise {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.lp-sign {
  position: relative;
  flex: none;
  padding: 20px 96px 22px 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 55%),
    var(--lp-sign);
  color: #fff;
}

.lp-rivet {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #C9D2CC 0, #7F8E86 45%, #3B4A43 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 1px rgba(0, 0, 0, .35);
}
.lp-rivet--l { left: 9px; }
.lp-rivet--r { right: 9px; }

.lp-sign-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, .86);
}
/* One colour dot per topic instead of a colour band: colour as information, not as decoration */
.lp-sign-topic { display: inline-flex; align-items: center; gap: 7px; }
.lp-sign-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lp-topic-color);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9);
  flex: none;
}

.lp-sign-title {
  margin: 0;
  font-size: 25px;
  font-weight: 760;
  line-height: 1.12;
  letter-spacing: -.008em;
  text-wrap: balance;
}
.lp-sign-title:focus { outline: none; }
.lp-sign-title:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.lp-sign-subline {
  margin: 6px 0 0;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .86);
}

/* Share and close at the top right of the sign */
.lp-sign-button {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #fff;
}
.lp-sign-button svg { width: 20px; height: 20px; }
.lp-sign-button:hover { background: rgba(255, 255, 255, .12); }
.lp-sign-button:focus-visible { outline-color: #fff; outline-offset: -2px; }
.lp-share { right: 50px; }
.lp-share svg { width: 18px; height: 18px; }
/* Confirmation after copying, read out via #lp-announce */
.lp-share[data-copied]::after {
  content: 'Link kopiert';
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  padding: 4px 9px 5px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(21, 48, 42, .25);
  color: var(--lp-ink);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  pointer-events: none;
}

.lp-info-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 22px;
  overscroll-behavior: contain;
}

.lp-info-image {
  margin: 0;
  aspect-ratio: 3 / 2;
  max-height: 220px;
  width: 100%;
  background: #E3EADB;
  overflow: hidden;
}
.lp-info-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.lp-info-text {
  margin: 0;
  padding: 18px 26px 0;
  font-size: 16px;
  line-height: 1.55;
}

.lp-info-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 26px 0;
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--lp-ink);
  border-radius: 11px;
  background: var(--lp-surface);
  color: var(--lp-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.lp-btn svg { width: 18px; height: 18px; }
.lp-btn:hover { background: #EEF2E8; }
.lp-btn--primary { background: var(--lp-ink); color: #fff; }
.lp-btn--primary:hover { background: #24453C; }

.lp-info-section { padding: 22px 26px 0; }

.lp-h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 750;
}

.lp-nearby-list, .lp-stops, .lp-notes { list-style: none; margin: 0 -8px; padding: 0; }

.lp-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 7px 16px;
  margin: 0;
  padding: 20px 26px 0;
  font-size: 15px;
  line-height: 1.4;
}
.lp-facts dt { font-weight: 700; }
.lp-facts dd { margin: 0; }

.lp-stop-nr {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2.5px solid var(--lp-route-own, var(--lp-route));
  color: var(--lp-route-own, var(--lp-route));
  font-size: 12.5px;
  font-weight: 800;
  flex: none;
}

.lp-note-symbol {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--lp-route-own, var(--lp-route));
  color: #fff;
  flex: none;
  align-self: flex-start;
  margin-top: 1px;
}
.lp-note-symbol svg { width: 15px; height: 15px; }
.lp-note-text { display: grid; gap: 2px; }
.lp-note-text strong { font-weight: 700; }
.lp-note-text span { font-size: 14.5px; color: var(--lp-ink-2); font-weight: 400; }

/* Directions: text alternative to the line on the map */
.lp-description summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  margin: 0 -8px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 750;
  list-style: none;
  cursor: pointer;
}
.lp-description summary::-webkit-details-marker { display: none; }
.lp-description summary:hover { background: var(--lp-paper); }
.lp-description summary svg { width: 18px; height: 18px; transition: transform .15s; }
.lp-description[open] summary svg { transform: rotate(180deg); }
.lp-description p { margin: 4px 0 0; }

.lp-footnote {
  margin: 20px 26px 0;
  font-size: 13.5px;
  color: var(--lp-ink-2);
}

/* ---------- Intro ---------- */

.lp-intro {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(245, 247, 240, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.lp-intro-card {
  width: min(460px, 100%);
  padding: 30px 28px 26px;
  border-radius: 18px;
  background: var(--lp-surface);
  box-shadow: var(--lp-shadow);
  animation: lp-intro-in .5s cubic-bezier(.2, .7, .2, 1);
}
@keyframes lp-intro-in {
  from { transform: translateY(18px) scale(.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.lp-logo--large { width: 44px; height: 41px; display: block; margin-bottom: 14px; }

.lp-intro-title {
  margin: 0;
  font-size: 28px;
  font-weight: 780;
  line-height: 1.1;
  letter-spacing: -.012em;
}

.lp-intro-text { margin: 8px 0 18px; color: var(--lp-ink-2); font-size: 16px; }

.lp-intro-choices { display: grid; gap: 10px; }

.lp-intro-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--lp-line-strong);
  border-radius: 13px;
  background: var(--lp-surface);
  text-align: left;
}
.lp-intro-btn:hover { border-color: var(--lp-ink); background: #F7F9F4; }
.lp-intro-btn > svg { width: 26px; height: 26px; color: var(--lp-ink); }
.lp-intro-btn > span { display: grid; gap: 1px; }
.lp-intro-btn strong { font-size: 16.5px; font-weight: 750; line-height: 1.25; }
.lp-intro-btn span span { font-size: 14.5px; color: var(--lp-ink-2); }

/* ---------- Dialog ---------- */

.lp-dialog {
  width: min(600px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  padding: 28px 30px 26px;
  border: 0;
  border-radius: 16px;
  color: var(--lp-ink);
  box-shadow: var(--lp-shadow);
}
.lp-dialog::backdrop { background: rgba(21, 48, 42, .38); }
.lp-dialog h2 { margin: 0 0 6px; font-size: 24px; font-weight: 780; line-height: 1.15; }
/* The heading only takes the focus when the dialog opens; it is not a control */
.lp-dialog h2:focus { outline: none; }
.lp-dialog h3 { margin: 20px 0 6px; font-size: 16px; font-weight: 750; }
.lp-dialog ul { margin: 0; padding-left: 20px; }
.lp-dialog li { margin: 4px 0; }
.lp-dialog .lp-btn { margin-top: 22px; }
/* Help: each point with a picture of the button it explains, drawn like the real one */
.lp-dialog .lp-help-list { display: grid; gap: 16px; margin: 4px 0 0; padding: 0; list-style: none; }
.lp-dialog .lp-help-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; align-items: start; margin: 0; }
.lp-dialog .lp-help-list li[hidden] { display: none; }
.lp-help-list p { margin: 0; padding-top: 9px; }
.lp-help-visual { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lp-help-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--lp-line);
  border-radius: 11px;
  background: var(--lp-surface);
  color: var(--lp-ink);
  box-shadow: 0 1px 2px rgba(21, 48, 42, .12), 0 3px 10px rgba(21, 48, 42, .1);
}
.lp-help-btn svg { width: 19px; height: 19px; }
.lp-help-btn--round { border-radius: 50%; }
.lp-help-btn--round svg { width: 34px; height: 34px; overflow: visible; }
/* The buttons in the head of the sidebar have no frame */
.lp-help-btn--plain { border-color: transparent; background: rgba(21, 48, 42, .07); color: var(--lp-ink-2); box-shadow: none; }
.lp-dialog kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 .35em;
  border: 1px solid var(--lp-line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--lp-surface);
  font: inherit;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

/* Notes of the project at the end ("about" in config.json), e.g. that a demo is made up */
.lp-about-note { margin: 18px 0 0; color: var(--lp-ink-2); }
.lp-about-note + .lp-about-note { margin-top: 8px; }
.lp-dialog a { color: inherit; text-underline-offset: 2px; }

/* ---------- Footer of the sidebar: Impressum, Datenschutz, credit ---------- */

.lp-foot {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  padding: 7px 22px 8px;
  border-top: 1px solid var(--lp-line);
  color: var(--lp-ink-2);
  font-size: 12px;
  line-height: 1.4;
}
.lp-foot a { color: inherit; text-underline-offset: 2px; }
.lp-foot a:hover { color: var(--lp-ink); }
/* The credit stands below Impressum and Datenschutz in rank: smaller and lighter (still 4.5:1 on the paper colour),
   on the right, or on a line of its own in a narrow sidebar */
.lp-credit {
  margin-left: auto;
  font-size: 11px;
  color: var(--lp-ink-2);
  color: color-mix(in srgb, var(--lp-ink-2) 85%, var(--lp-paper));
}

/* ---------- Sidebar beside the map (desktop, phone held sideways) ---------- */

/* Which layout applies: the sidebar beside the map from 900 px width, or on a landscape window from 560 px (a phone
   held sideways); otherwise the bottom sheet (see "Phone" below). The same queries stand in lp-app.js (SHEET_LAYOUT).
   Screen edges get the safe areas of the phone (notch, home indicator), zero on the desktop. */
@media (min-width: 900px), (min-width: 560px) and (orientation: landscape) {
  .lp-controls { right: calc(18px + env(safe-area-inset-right)); }
  .lp-info-card { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .lp-panel-content { padding-bottom: 28px; }
  .lp-foot { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .lp-app:not(.lp-right).lp-no-sidebar .lp-info-card { left: calc(18px + env(safe-area-inset-left)); }
  .lp-right.lp-no-sidebar .lp-info-card { right: calc(18px + env(safe-area-inset-right)); }

  /* Sidebar on the right mirrors the layout: sidebar and info card on the right, map controls on the left */
  .lp-right { grid-template-columns: minmax(0, 1fr) calc(var(--lp-panel-width) + env(safe-area-inset-right)); }
  .lp-right .lp-panel { order: 2; border-right: 0; border-left: 1px solid var(--lp-line); padding-left: 0; padding-right: env(safe-area-inset-right); }
  .lp-right .lp-controls { right: auto; left: calc(18px + env(safe-area-inset-left)); }
  .lp-right .lp-info-card { left: auto; right: 18px; }

  /* Handle to hide and show the sidebar (see above). The arrow shows where the sidebar goes. */
  .lp-flap {
    position: absolute;
    top: 16px;
    left: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 6px 0 4px;
    border: 1px solid var(--lp-line);
    border-left: 0;
    border-radius: 0 11px 11px 0;
    background: var(--lp-surface);
    color: var(--lp-ink);
    box-shadow: 0 1px 2px rgba(21, 48, 42, .12), 0 3px 10px rgba(21, 48, 42, .1);
    font-size: 15px;
    font-weight: 600;
  }
  .lp-flap svg { width: 18px; height: 18px; }
  /* Collapsed: arrow and magnifier, without text (name for screen readers in lp-app.js) */
  .lp-flap-search { display: none; }
  .lp-no-sidebar .lp-flap-search { display: block; width: 20px; height: 20px; }
  .lp-flap:hover { background: #EEF2E8; }
  .lp-right .lp-flap {
    left: auto;
    right: 0;
    flex-direction: row-reverse;
    padding: 0 4px 0 6px;
    border-left: 1px solid var(--lp-line);
    border-right: 0;
    border-radius: 11px 0 0 11px;
  }
  .lp-no-sidebar .lp-flap { padding: 0 12px 0 8px; }
  .lp-right.lp-no-sidebar .lp-flap { padding: 0 8px 0 12px; }
  .lp-app:not(.lp-right).lp-no-sidebar .lp-flap { left: env(safe-area-inset-left); }
  .lp-right.lp-no-sidebar .lp-flap { right: env(safe-area-inset-right); }
  .lp-app:not(.lp-right).lp-no-sidebar .lp-flap-arrow,
  .lp-right:not(.lp-no-sidebar) .lp-flap-arrow { transform: scaleX(-1); }

  .lp-app.lp-no-sidebar { grid-template-columns: minmax(0, 1fr); }
  .lp-no-sidebar .lp-panel { display: none; }

  /* The info card ends below the handle */
  .lp-info-card { max-height: calc(100% - 96px); }
}

/* Low window beside the map, above all a phone held sideways: the head in one row as on the phone, and the info card
   takes the place of the sidebar, full height, so the map beside it stays free. Turning the phone must stay possible
   (WCAG 1.3.4), and in landscape the bottom sheet left only a strip of map. */
@media (min-width: 900px) and (max-height: 520px), (min-width: 560px) and (orientation: landscape) and (max-height: 520px) {
  .lp-header {
    grid-template-areas: "logo titel aktionen";
    padding: 8px 10px 8px 18px;
  }
  .lp-brand { display: none; }
  .lp-logo { width: 26px; height: 24px; }
  .lp-title { margin: 0; font-size: 23px; }
  .lp-home { margin: 10px 10px 0 18px; }
  .lp-home img { height: 28px; }
  .lp-home + .lp-handle-row + .lp-header { padding-top: 4px; }

  .lp-info-card {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 20;
    width: calc(var(--lp-panel-width) + env(safe-area-inset-left));
    max-height: none;
    border-radius: 0;
    padding-left: env(safe-area-inset-left);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .lp-right .lp-info-card {
    left: auto; right: 0;
    width: calc(var(--lp-panel-width) + env(safe-area-inset-right));
    padding-left: 0;
    padding-right: env(safe-area-inset-right);
  }
  .lp-app:not(.lp-right).lp-no-sidebar .lp-info-card { left: 0; }
  .lp-right.lp-no-sidebar .lp-info-card { right: 0; }
  /* While the info card covers the sidebar, the handle would hide a list nobody sees */
  .lp-info-open:not(.lp-no-sidebar) .lp-flap { display: none; }
}

/* ---------- High contrast ---------- */

.lp-app.lp-hc {
  --lp-ink-2: #15302A;
  --lp-line: #15302A;
  --lp-line-strong: #15302A;
}
.lp-hc .lp-basemap-layer { filter: saturate(.55) contrast(1.12); }
.lp-hc .lp-marker-dot { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px #000; }
/* The active place keeps its ring in the accent colour, set off in black outside (otherwise the rule above would win).
   With keyboard focus the focus ring applies as usual. */
.lp-hc .lp-marker--active:not(:focus-visible) .lp-marker-dot { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--lp-accent), 0 0 0 8.5px #000; }
.lp-hc .lp-marker-name { background: #15302A; color: #fff; }
/* Lighten more only with an active filter or route – otherwise contrast mode would make the map paler */
.lp-hc .lp-filtered .lp-veil,
.lp-hc .lp-routes-on .lp-veil { background: rgba(255, 255, 255, .5); }

/* ---------- Phone: list as bottom sheet ---------- */

/* Complement of the query for the sidebar above: phone held upright, or a very narrow window */
@media (max-width: 899px) and (orientation: portrait), (max-width: 559px) {
  /* Heights of the sheet: collapsed (handle row only, height measured by lp-app.js), medium, expanded. lp-app.js reads them while dragging. */
  .lp-app {
    --lp-sheet-collapsed: calc(var(--lp-handle-height, 44px) + env(safe-area-inset-bottom));
    --lp-sheet-medium: calc(262px + env(safe-area-inset-bottom));
    --lp-sheet-expanded: 86dvh;
  }

  .lp-app { display: block; }

  .lp-stage { position: fixed; inset: 0; }
  /* The whole map fits into the part above the collapsed sheet */
  .lp-canvas { --lp-bottom: calc(var(--lp-sheet-medium) - 8px); }

  .lp-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--lp-sheet-medium);
    border-right: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 28px rgba(21, 48, 42, .18);
    transition: height .28s cubic-bezier(.2, .7, .2, 1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .lp-panel--expanded { height: var(--lp-sheet-expanded); }
  /* Without a transition when the search gets the focus (lp-app.js) */
  .lp-panel--instant { transition: none; }
  .lp-panel--collapsed { height: var(--lp-sheet-collapsed); }
  /* Head and list disappear only once the sheet has arrived at the bottom; when pulled up they are there at once */
  .lp-panel--collapsed > .lp-header, .lp-panel--collapsed > .lp-panel-content, .lp-panel--collapsed > .lp-foot {
    visibility: hidden; transition: visibility 0s .28s;
  }

  /* Handle row at the top of sheet and info card: bar to tap and drag, the compass below it. The whole row
     belongs to the handle (::before of the button), the compass lies above it. */
  .lp-handle-row {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-bottom: 8px;
    touch-action: none;
  }
  .lp-sheet-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 8px 0 2px;
    border: 0;
    background: none;
    color: var(--lp-ink-2);
    font-size: 13px;
    font-weight: 650;
  }
  .lp-sheet-handle::before { content: ""; position: absolute; inset: 0; }
  /* The button is as wide as the row; the focus ring lies around the bar */
  .lp-sheet-handle:focus-visible { outline: none; }
  .lp-sheet-handle:focus-visible .lp-sheet-handle-bar { outline: 2px solid var(--lp-focus); outline-offset: 4px; }
  .lp-handle-row .lp-heading-button { z-index: 1; }
  /* With a compass the bar stands below it */
  .lp-handle-row--compass .lp-sheet-handle { padding-top: 4px; }
  .lp-header-actions .lp-collapse { display: grid; }
  .lp-sheet-handle-bar {
    width: 40px; height: 5px;
    border-radius: 999px;
    background: var(--lp-line-strong);
  }

  .lp-header {
    grid-template-areas: "logo titel aktionen";
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 2px 10px 6px 18px;
  }
  .lp-brand { display: none; }
  .lp-logo { width: 26px; height: 24px; }
  .lp-title { margin: 0; font-size: 23px; }

  /* The logo back to the start page stands at the top left of the map, as a card like the buttons on the right
     (44 px high), also while an info card is open. The copy in the sheet is not needed here. */
  .lp-home--panel { display: none; }
  .lp-home--map {
    display: block;
    position: absolute;
    z-index: 6;
    top: calc(12px + env(safe-area-inset-top));
    left: calc(12px + env(safe-area-inset-left));
    max-width: calc(100% - 96px - env(safe-area-inset-left) - env(safe-area-inset-right));
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--lp-line);
    border-radius: 11px;
    background: var(--lp-surface);
    box-shadow: 0 1px 2px rgba(21, 48, 42, .12), 0 3px 10px rgba(21, 48, 42, .1);
  }
  .lp-home--map img { height: 26px; }
  .lp-home + .lp-handle-row + .lp-header { padding-top: 2px; }

  .lp-panel-content { padding: 4px 16px 24px; }
  .lp-foot { padding: 6px 16px 7px; }
  .lp-search { margin-bottom: 14px; }

  .lp-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 2px 16px 6px;
    scrollbar-width: none;
  }
  .lp-chips::-webkit-scrollbar { display: none; }
  .lp-chip { flex: none; }

  /* Map controls as a column: see below. The magnifier opens the search in the sheet from anywhere. */
  .lp-search-button { display: grid; }
  /* Expanded sheet: the stage is inert (lp-app.js), the buttons above it would only be dummies */
  .lp-panel--expanded + .lp-stage :is(.lp-controls, .lp-home--map) { visibility: hidden; }
  /* The hint at the compass button at the bottom appears above the button */
  .lp-handle-row .lp-heading-button[data-hint]::after {
    top: auto; right: auto; bottom: calc(100% + 10px); left: 50%;
    translate: -50% 0;
    max-width: min(320px, calc(100vw - 32px));
  }
  #lp-side-toggle { display: none; }

  /* The info card replaces the sheet while it is open */
  .lp-info-open .lp-stage { z-index: 15; }

  /* The handle row at the top as on the sheet. Only the compass hint sticks out over the edge, the body scrolls itself. */
  .lp-info-card {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    width: auto;
    max-height: 64dvh;
    overflow: visible;
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation-name: lp-sheet-rise;
  }
  .lp-info-card > .lp-handle-row { border-radius: 20px 20px 0 0; background: var(--lp-surface); }
  /* Collapsed (that is how it opens on the phone): handle row, sign and the start of the content, faded out towards
     the bottom as a sign that more follows. Tapping, swiping up or the handle open it fully. */
  .lp-info--collapsed .lp-info-body {
    flex: none;
    height: 58px;
    overflow: hidden;
    padding-bottom: 0;
    -webkit-mask-image: linear-gradient(#000 25%, transparent);
    mask-image: linear-gradient(#000 25%, transparent);
  }
  .lp-info--collapsed { cursor: pointer; }
  /* It can be dragged at the sign as well */
  .lp-info-card .lp-sign { touch-action: none; }
  @keyframes lp-sheet-rise {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
  .lp-sign { padding: 18px 92px 20px 22px; }
  .lp-sign-title { font-size: 22px; }
  .lp-info-image { max-height: 160px; }
  .lp-info-text, .lp-info-actions, .lp-info-section, .lp-facts { padding-left: 22px; padding-right: 22px; }

  /* Intro above the sheet: the stage comes to the front while it is open (same pattern as for the info card) */
  .lp-intro-open .lp-stage { z-index: 15; }
  .lp-intro { align-items: start; padding-top: 4dvh; overflow-y: auto; }
  .lp-intro-card { padding: 24px 20px 20px; }
  .lp-intro-title { font-size: 24px; }
  .lp-intro-btn { padding: 12px 14px; }
}

/* ---------- Map controls as a column (phone, low window) ---------- */

/* Narrow vertical bar at the edge, with the phone upright (sheet) and in a low window (phone held sideways): a row
   at the top would cover too much of the map there. The arrows open only via "Karte verschieben", as a row below
   the button: alternative to dragging with one finger (WCAG 2.5.7), without covering the map for good. */
@media (max-width: 899px) and (orientation: portrait), (max-width: 559px),
  (min-width: 900px) and (max-height: 520px), (min-width: 560px) and (orientation: landscape) and (max-height: 520px) {
  .lp-controls { top: 12px; right: calc(12px + env(safe-area-inset-right)); flex-direction: column; align-items: flex-end; gap: 6px; }
  .lp-arrows-toggle { display: grid; }
  .lp-arrows-toggle[aria-expanded="true"] { background: var(--lp-ink); border-color: var(--lp-ink); color: #fff; }
  .lp-arrows-toggle[aria-expanded="false"] + .lp-arrows { display: none; }
  .lp-control-btn { width: 44px; height: 44px; }
  .lp-control-btn svg { width: 20px; height: 20px; }
  .lp-zoom { flex-direction: column-reverse; }
  .lp-zoom .lp-control-btn + .lp-control-btn { border-left: 1px solid var(--lp-line); border-bottom: 0; }
  .lp-zoom .lp-control-btn:first-child { border-radius: 0 0 11px 11px; }
  .lp-zoom .lp-control-btn:last-child { border-radius: 11px 11px 0 0; }
  /* The north arrow sits at the top of the column, as in the corner of a paper map, with a gap to the buttons and
     centred above them (2 px wider on each side) */
  .lp-controls .lp-north-arrow { order: -1; width: 48px; height: 48px; margin: 0 -2px 8px 0; }
  .lp-controls .lp-north-arrow svg { width: 42px; height: 42px; }
  /* Its hint stands beside it, below it lie the buttons */
  .lp-north-arrow[data-hint]::after { top: 50%; right: calc(100% + 8px); translate: 0 -50%; }
}

/* Low window with the sidebar on the right: the column stands on the left */
@media (min-width: 900px) and (max-height: 520px), (min-width: 560px) and (orientation: landscape) and (max-height: 520px) {
  .lp-right .lp-controls { left: calc(12px + env(safe-area-inset-left)); align-items: flex-start; }
  .lp-right .lp-controls .lp-north-arrow { margin: 0 0 8px -2px; }
  .lp-right .lp-north-arrow[data-hint]::after { right: auto; left: calc(100% + 8px); }
}

/* ---------- Windows contrast mode (forced-colors) ---------- */

/* The system replaces all colours by a few system colours and removes box-shadow and gradients. What otherwise only
   shows through fill or shadow (dots, rings, focus, switches, selection) gets borders and
   fills in system colours here. Selection and "on" state uniformly in Highlight. Basemap and routes are SVG
   and keep their colours (Chrome: forced-color-adjust: preserve-parent-color). */
@media (forced-colors: active) {
  :where(.lp-app) :focus-visible { outline-color: Highlight; }

  /* The pulse rings are decoration and fade by their border colour, which the system would replace */
  .lp-marker--active::after, .lp-here::after { forced-color-adjust: none; }

  /* Two-colour outline like the white ring otherwise: stands out from light and dark map */
  .lp-marker-dot { border: 2px solid CanvasText; outline: 2px solid Canvas; }
  .lp-marker:focus-visible .lp-marker-dot { outline: 3px solid Highlight; outline-offset: 3px; }
  .lp-marker--active .lp-marker-dot { background: Highlight; color: HighlightText; }
  .lp-marker-name { border: 1px solid CanvasText; }
  /* Arrows belong to the route line, which keeps its colour */
  .lp-route-arrow { forced-color-adjust: none; }
  .lp-here, .lp-entry-here { forced-color-adjust: none; }
  .lp-here-drop { fill: Highlight; }
  .lp-here-rim, .lp-here-eye { fill: Canvas; stroke: Canvas; }
  .lp-here:focus-visible .lp-here-rim { stroke: CanvasText; }
  .lp-here-name, .lp-entry-here { background: Highlight; color: HighlightText; border: 1px solid CanvasText; }
  .lp-here::after { border-color: Highlight; }
  .lp-north-arrow, .lp-heading-button, .lp-heading { forced-color-adjust: none; }
  .lp-north-arrow, span.lp-north-arrow, .lp-heading-button { background: Canvas; border-color: CanvasText; color: CanvasText; }
  .lp-north-arrow[aria-pressed="true"], .lp-heading-button[aria-pressed="true"] { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; }
  .lp-heading-button-fan { fill: Highlight; }
  .lp-target-line { stroke: Highlight; }
  .lp-target-edge { stroke: Canvas; }
  .lp-heading { color: Highlight; }

  /* forced-color-adjust: none, because Chrome otherwise puts a Canvas-coloured plate behind text:
     HighlightText would then stand on Canvas instead of Highlight and be invisible */
  .lp-label--active .lp-marker-name,
  .lp-chip[aria-pressed="true"],
  .lp-icon-btn[aria-pressed="true"],
  .lp-arrows-toggle[aria-expanded="true"],
  .lp-entry[aria-current="true"] { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
  .lp-label--active .lp-marker-name { border-color: CanvasText; }

  /* Switches: track and knob in system colours, the position of the knob shows the state */
  .lp-layer::after {
    forced-color-adjust: none;
    border: 2px solid ButtonText;
    background: radial-gradient(circle at 9px 50%, ButtonText 5px, transparent 5.5px), Canvas;
  }
  .lp-layer[aria-pressed="true"]::after {
    border-color: Highlight;
    background: radial-gradient(circle at 25px 50%, HighlightText 5px, transparent 5.5px), Highlight;
  }

  /* Topic dots in list and info card carry information: keep the colour, with an outline */
  .lp-dot, .lp-sign-dot { forced-color-adjust: none; outline: 1px solid CanvasText; }

  /* Areas that otherwise stand out from the map only by a shadow */
  .lp-info-card, .lp-intro-card, .lp-dialog, .lp-panel { outline: 2px solid CanvasText; }
}

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