/**
 * Site plan block - the interactive Geländeplan.
 *
 * Everything is scoped under .ef-siteplan so the plan can sit inside any page
 * without leaking. Colours come from the theme tokens where they are chrome;
 * the map's own palette lives in siteplan.js because it is drawn into SVG.
 */

.ef-siteplan{
  /* Every colour in this block is a design ROLE (tokens.css), under the
     block's own short names. There is no private palette and no private
     dark scheme any more: the site has one look, and when the theme gets a
     dark scheme it will come through the roles - surface, text, primary -
     and this block will follow without a line changing here. The MAP's own
     colours (fields, water, the marker discs) live in siteplan.js: they are
     the drawing, not the chrome. */
  --paper:var(--ef-color-surface);
  --ink:var(--ef-color-text); --ink-soft:var(--ef-color-text-muted);
  --gold:var(--ef-color-secondary); --orange:var(--ef-color-secondary);
  --plum:var(--ef-color-secondary);
  --red:var(--ef-color-danger); --red-bg:var(--ef-color-danger);
  --sel:var(--ef-color-highlight);
  --wall:var(--ef-color-primary); --panel:var(--ef-color-surface); --panel-2:var(--ef-color-surface-alt);
  --edge:var(--ef-color-primary);
  --txt:var(--ef-color-text); --txt-dim:var(--ef-color-text-muted); --focus:var(--ef-color-secondary);
  --on-bg:var(--ef-color-secondary); --on-fg:var(--ef-color-on-dark);
  --shadow:var(--ef-shadow-raised);
  --f-label:var(--ef-font-display);
  --f-ui:var(--ef-font-body);
}
.ef-siteplan *{box-sizing:border-box}

.ef-siteplan button,.ef-siteplan input,.ef-siteplan select{font:inherit;color:inherit}
.ef-siteplan :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--ef-radius)}.ef-siteplan .shell{display:grid;grid-template-columns:1fr 340px;height:100vh;height:100dvh}.ef-siteplan .shell.closed{grid-template-columns:1fr 0}
@media (max-width:920px){.ef-siteplan .shell{grid-template-columns:1fr}.ef-siteplan .drawer{position:fixed;inset:auto 0 0 0;height:52vh;height:52dvh;border-left:0;border-top:2px solid var(--edge);z-index:20}.ef-siteplan .shell.closed .drawer{display:none}}.ef-siteplan .stage{position:relative;overflow:hidden;display:grid;place-items:center;padding:calc(var(--sp-bar-h,54px) + 22px) 12px 12px}
.ef-siteplan svg.map{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.ef-siteplan svg.map.panning{cursor:grabbing}.ef-siteplan .bar{position:absolute;top:12px;left:12px;right:12px;z-index:6;display:flex;gap:6px;flex-wrap:wrap;
  align-items:center;background:var(--panel);border:2px solid var(--edge);border-radius:var(--ef-radius);
  padding:6px;box-shadow:var(--shadow)}.ef-siteplan .bar .sep{width:1px;align-self:stretch;background:var(--edge);margin:2px 3px}.ef-siteplan .bar .spring{flex:1}.ef-siteplan .spbtn{border:2px solid transparent;background:transparent;color:var(--txt);padding:6px 11px;
  border-radius:8px;cursor:pointer;font-weight:600;font-size:var(--ef-text-meta);display:inline-flex;
  align-items:center;gap:6px;white-space:nowrap}.ef-siteplan .spbtn.ghost{border-color:var(--edge)}.ef-siteplan .spbtn.on{background:var(--on-bg);color:var(--on-fg);border-color:var(--on-bg)}.ef-siteplan .spbtn:disabled{opacity:.4;cursor:not-allowed}.ef-siteplan .seg{display:inline-flex;border:2px solid var(--edge);border-radius:var(--ef-radius);overflow:hidden}.ef-siteplan .seg .spbtn{border-radius:0;border:0;padding:6px 13px}.ef-siteplan .brand{font-family:var(--f-label);font-size:var(--ef-text-meta);padding:0 8px 0 4px;color:var(--txt-dim)}.ef-siteplan .hint{position:absolute;bottom:12px;left:12px;z-index:6;background:var(--panel);
  border:2px solid var(--edge);border-radius:var(--ef-radius);padding:7px 12px;font-size:var(--ef-text-meta);
  box-shadow:var(--shadow);max-width:min(620px,72vw)}.ef-siteplan .hint[hidden]{display:none}.ef-siteplan .geopanel{position:absolute;bottom:12px;left:12px;z-index:7;background:var(--panel);
  border:2px solid var(--edge);border-radius:var(--ef-radius);padding:10px 13px;font-size:var(--ef-text-meta);
  box-shadow:var(--shadow);max-width:min(420px,74vw)}.ef-siteplan .geopanel[hidden]{display:none}.ef-siteplan .geopanel h3{margin:0 0 6px;font-family:var(--f-label);font-size:var(--ef-text-meta);font-weight:700;color:var(--ink)}.ef-siteplan .geopanel .acc{color:var(--txt-dim);font-size:var(--ef-text-meta);margin-bottom:6px}.ef-siteplan .geopanel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}.ef-siteplan .geopanel li{display:flex;justify-content:space-between;gap:14px}.ef-siteplan .geopanel li b{font-weight:700;font-variant-numeric:tabular-nums}.ef-siteplan .geopanel .bad{color:var(--red)}
@media print{.geopanel{display:none!important}}.ef-siteplan .readout{position:absolute;bottom:12px;right:12px;z-index:6;background:var(--panel);
  border:2px solid var(--edge);border-radius:var(--ef-radius);padding:6px 11px;font-size:var(--ef-text-meta);
  font-variant-numeric:tabular-nums;box-shadow:var(--shadow);color:var(--txt-dim)}.ef-siteplan .drawer{background:var(--panel);border-left:2px solid var(--edge);overflow-y:auto}.ef-siteplan .dsec{padding:14px 16px;border-bottom:2px solid var(--edge)}.ef-siteplan .dsec h2{font-family:var(--f-label);font-size:var(--ef-text-meta);font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-dim);margin:0 0 10px}.ef-siteplan .field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.ef-siteplan .field label{font-size:var(--ef-text-meta);font-weight:700;color:var(--txt-dim)}.ef-siteplan .field input[type=text],.ef-siteplan .field select{background:var(--panel-2);border:2px solid var(--edge);
  border-radius:8px;padding:7px 9px;width:100%}.ef-siteplan .row{display:flex;gap:8px}.ef-siteplan .row>*{flex:1;min-width:0}.ef-siteplan .swatches{display:flex;gap:6px;flex-wrap:wrap}.ef-siteplan .sw{width:28px;height:28px;border-radius:50%;border:3px solid transparent;cursor:pointer;padding:0}.ef-siteplan .sw[aria-pressed="true"]{border-color:var(--txt);transform:scale(1.08)}.ef-siteplan .tray{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.ef-siteplan .tray button{border:2px solid var(--edge);border-radius:var(--ef-radius);background:var(--panel-2);cursor:pointer;
  padding:6px 2px 4px;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10px;line-height:1.15;text-align:center;color:var(--txt-dim);min-height:56px}.ef-siteplan .tray button.on{background:var(--on-bg);border-color:var(--on-bg);color:var(--on-fg)}.ef-siteplan .tray svg{width:21px;height:21px}.ef-siteplan .chips{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}.ef-siteplan .ucgroup{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.ef-siteplan .ucgroup h4{margin:2px 0 2px;font-family:var(--f-label);font-size:var(--ef-text-meta);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--txt-dim)}.ef-siteplan .chips button.todo{border-style:dashed}.ef-siteplan .chips button{display:flex;align-items:center;gap:9px;width:100%;cursor:pointer;
  border:2px solid var(--edge);border-radius:var(--ef-radius);background:var(--panel-2);
  padding:8px 10px;font-size:var(--ef-text-meta);color:var(--txt);text-align:left}.ef-siteplan .chips button svg{width:20px;height:20px;color:var(--c);flex:none}.ef-siteplan .chips button span{flex:1}.ef-siteplan .chips button em{font-style:normal;font-size:var(--ef-text-meta);color:var(--txt-dim);font-variant-numeric:tabular-nums}.ef-siteplan .chips button.on{background:var(--c);border-color:var(--c);color:var(--on-fg)}.ef-siteplan .chips button.on svg{color:var(--on-fg)}.ef-siteplan .chips button.on em{color:var(--on-fg);opacity:.85}.ef-siteplan .ucnote{font-size:var(--ef-text-meta);color:var(--txt-dim);border-left:4px solid;padding:2px 0 2px 9px;margin:0 0 7px}.ef-siteplan .ucnote b{color:var(--txt)}.ef-siteplan .ucnote .prov{color:var(--gold)}.ef-siteplan .chips button i.redraw{font-style:normal;font-size:var(--ef-text-body);opacity:.6;padding:0 2px;cursor:pointer}.ef-siteplan .chips button.on i.redraw{color:var(--on-fg);opacity:.9}.ef-siteplan .empty{color:var(--txt-dim);font-style:italic;font-size:var(--ef-text-meta)}.ef-siteplan .danger{color:var(--red);border-color:var(--red)}.ef-siteplan .list{display:flex;flex-direction:column;gap:2px;max-height:210px;overflow-y:auto}.ef-siteplan .list button{text-align:left;border:0;background:transparent;padding:5px 8px;border-radius:var(--ef-radius);
  cursor:pointer;font-size:var(--ef-text-meta);display:flex;align-items:center;gap:8px;width:100%}.ef-siteplan .list button[aria-current="true"]{background:var(--on-bg);color:var(--on-fg)}.ef-siteplan .list .dot{width:10px;height:10px;border-radius:50%;flex:none}.ef-siteplan .note{font-size:var(--ef-text-meta);color:var(--txt-dim);margin:8px 0 0}.ef-siteplan .warn{background:var(--sel);border:2px solid var(--edge);border-radius:8px;padding:9px 11px;
  font-size:var(--ef-text-meta);color:var(--txt);margin:0 0 8px}
.ef-siteplan .waybox{position:fixed;inset:0;z-index:30;background:var(--ef-scrim-strong);
  display:grid;place-items:center;padding:20px}.ef-siteplan .waybox[hidden]{display:none}.ef-siteplan .waycard{background:var(--panel);border:2px solid var(--edge);border-radius:var(--ef-radius);
  box-shadow:var(--shadow);width:min(560px,100%);max-height:82vh;overflow-y:auto;padding:16px}.ef-siteplan .wayhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.ef-siteplan .wayhead h3{margin:0;font-family:var(--f-label);font-size:19px;color:var(--ink)}.ef-siteplan .waycard h4{margin:12px 0 6px;font-family:var(--f-label);font-size:var(--ef-text-meta);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--txt-dim)}.ef-siteplan .waycard .row2{display:flex;align-items:center;gap:9px;width:100%;cursor:pointer;
  border:2px solid var(--edge);border-radius:var(--ef-radius);background:var(--panel-2);
  padding:9px 11px;font-size:var(--ef-text-meta);color:var(--txt);text-align:left;margin-bottom:6px}.ef-siteplan .waycard .row2 svg{width:21px;height:21px;color:var(--c);flex:none}.ef-siteplan .waycard .row2 span{flex:1}.ef-siteplan .waycard .row2 em{font-style:normal;font-size:var(--ef-text-meta);color:var(--txt-dim);font-variant-numeric:tabular-nums}.ef-siteplan .waycard .row2.on{background:var(--c);border-color:var(--c);color:var(--on-fg)}.ef-siteplan .waycard .row2.on svg,.ef-siteplan .waycard .row2.on em{color:var(--on-fg)}.ef-siteplan .waycard .row2 i.redraw{font-style:normal;font-size:var(--ef-text-body);opacity:.6;padding:0 2px}.ef-siteplan .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);z-index:40;
  background:var(--on-bg);color:var(--on-fg);padding:10px 18px;border-radius:var(--ef-radius-pill);font-weight:600;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s}.ef-siteplan .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.ef-siteplan .vtx{fill:var(--paper);stroke:var(--orange);stroke-width:2.5;cursor:crosshair}.ef-siteplan .selbox{fill:none;stroke:var(--orange);stroke-width:3;stroke-dasharray:9 7;pointer-events:none}.ef-siteplan .hit{cursor:move}
@media print{.ef-siteplan{background:var(--paper);overflow:visible}.ef-siteplan .bar,.ef-siteplan .drawer,.ef-siteplan .hint,.ef-siteplan .toast,.ef-siteplan .readout{display:none!important}.ef-siteplan .shell{display:block;height:auto}.ef-siteplan .stage{padding:0}.ef-siteplan svg.map{width:100%;height:auto}
  @page{size:A3 landscape;margin:6mm}}
@media (prefers-reduced-motion:reduce){.ef-siteplan *{transition:none!important}}

/* ------------------------------------------------------------------ *
 * The block on a page.
 *
 * Everything above is the plan itself, lifted from the drawing tool.
 * Everything below is what changes when that tool is embedded in a
 * WordPress page: it gets a height instead of the viewport, and a
 * visitor gets the viewer without the editor around it.
 * ------------------------------------------------------------------ */

/* The plan fills the box the block was given, not the whole screen. */
.ef-siteplan-block{position:relative}
.ef-siteplan-block .ef-siteplan{height:auto}
.ef-siteplan-block .shell{height:480px}
.ef-siteplan-block--short  .shell{height:480px}
.ef-siteplan-block--medium .shell{height:640px}
.ef-siteplan-block--tall   .shell{height:820px}
.ef-siteplan-block--screen .shell{height:calc(100vh - 120px);min-height:520px}

/* View mode: the drawing tools are the author's, not the visitor's.
   Hidden rather than never-rendered because the same script runs both,
   and one class is the whole difference between them. */
.ef-siteplan.is-view #btnUndo,
.ef-siteplan.is-view #btnRedo,
.ef-siteplan.is-view #btnJson,
.ef-siteplan.is-view #btnSave,
.ef-siteplan.is-view #btnDrawer,
.ef-siteplan.is-view .drawer,
.ef-siteplan.is-view .hint,
.ef-siteplan.is-view .vtx,
.ef-siteplan.is-view .selbox,
/* the route chooser is a visitor popup, but each row carries the
   author's “redraw this path” pencil - not theirs to press */
.ef-siteplan.is-view .redraw{display:none!important}
.ef-siteplan.is-view .shell,
.ef-siteplan.is-view .shell.closed{grid-template-columns:1fr}
/* Nothing on the plan is draggable when it cannot be saved. */
.ef-siteplan.is-view .hit{cursor:pointer}

/* Legend off: the sheet still draws it, so hide the block-level list too. */
.ef-siteplan--nolegend .ef-siteplan-list{display:none}

/* Full screen, and the CSS-only fallback for browsers without the API
   (iOS Safari has none for arbitrary elements). */
.ef-siteplan-block.is-faux-fs{position:fixed;inset:0;z-index:99999}

.ef-siteplan-block.is-faux-fs .ef-siteplan-list{display:none}

/* The written list of places under the plan. It is not a placeholder:
   a drawing of a field has no reading order, so this stays for anyone
   who cannot read the map - screen reader, tiny screen, or printout. */
.ef-siteplan-list{margin:16px auto 0;max-width:64rem;font-family:var(--ef-font-body,inherit)}
.ef-siteplan-list summary{cursor:pointer;font-weight:700;padding:10px 4px;color:var(--ef-color-secondary)}

.ef-siteplan-list ul{list-style:none;margin:8px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 20px}
.ef-siteplan-list li{padding:5px 0;border-bottom:1px solid var(--ef-color-primary)}
.ef-siteplan-count{color:var(--ef-color-secondary);opacity:.7;font-variant-numeric:tabular-nums}
.ef-siteplan-empty{padding:20px;text-align:center;font-family:var(--ef-font-body,inherit)}

/* ------------------------------------------------------------------ *
 * The legend, as real DOM under the map.
 *
 * It used to be drawn inside the SVG and scaled with the sheet, which on a
 * page-sized block meant 3-5 px text: present, but unreadable and not
 * recognisably clickable. Out here it is sized in CSS, always crisp,
 * keyboard reachable — and the map got back the third of the sheet it used
 * to occupy.
 * ------------------------------------------------------------------ */
.ef-siteplan .legendbar{
  flex:0 0 auto;
  background:var(--panel);border-top:2px solid var(--edge);
  padding:14px 18px 18px;font-family:var(--f-ui)}
.ef-siteplan--nolegend .legendbar{display:none}

.ef-siteplan .legendbar__head{display:flex;align-items:baseline;gap:10px 16px;flex-wrap:wrap;margin-bottom:12px}
.ef-siteplan .legendbar__head h3{margin:0;font-family:var(--f-label);font-size:19px;color:var(--ink)}
.ef-siteplan .legendbar__head p{margin:0;font-size:var(--ef-text-meta);color:var(--ink-soft);flex:1 1 16rem}
/* An action, not a state, so it reads as the block's primary button - and
   white on ink is 12.6:1 where white on gold was 2.51:1. */
.ef-siteplan .legendbar__reset{margin-left:auto;background:var(--on-bg);color:var(--on-fg);border-color:var(--on-bg)}


.ef-siteplan .leggroup{margin-bottom:14px}
.ef-siteplan .leggroup:last-child{margin-bottom:0}
.ef-siteplan .leggroup__head{
  display:block;width:100%;text-align:left;margin:0 0 8px;padding:6px 10px;
  font-family:var(--f-label);font-size:var(--ef-text-meta);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink);background:var(--panel-2);border:2px solid transparent;border-radius:var(--ef-radius);
  cursor:pointer;transition:background .12s,border-color .12s}

.ef-siteplan .leggroup__head.is-on{background:var(--sel);color:var(--ink);border-color:var(--gold)}

.ef-siteplan .leggroup__items{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:5px 10px}
.ef-siteplan .legitem{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:5px 9px;border:2px solid transparent;border-radius:var(--ef-radius);
  background:none;text-align:left;cursor:pointer;
  font-size:var(--ef-text-meta);color:var(--ink);line-height:1.25;
  transition:background .12s,border-color .12s,opacity .12s}

.ef-siteplan .legitem.is-on{background:var(--sel);border-color:var(--gold);color:var(--ink)}
.ef-siteplan .legitem.is-dim{opacity:.42}
.ef-siteplan .legitem__dot{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;color:var(--on-fg)}
.ef-siteplan .legitem__dot svg{width:16px;height:16px}
.ef-siteplan .legitem__label{min-width:0;overflow-wrap:anywhere}
.ef-siteplan .legitem__label b{color:var(--red)}

/* Full screen is the one place the two share a fixed box: the plan takes
   what it can and the legend scrolls in the rest. */
.ef-siteplan-block:fullscreen .ef-siteplan,
.ef-siteplan-block.is-faux-fs .ef-siteplan{display:flex;flex-direction:column;height:100vh}
.ef-siteplan-block:fullscreen .shell,
.ef-siteplan-block.is-faux-fs .shell{flex:1 1 auto;min-height:0;height:auto}
.ef-siteplan-block:fullscreen .legendbar,
.ef-siteplan-block.is-faux-fs .legendbar{overflow-y:auto}

/* ------------------------------------------------------------------ *
 * Exploring is a full-screen affair.
 *
 * In a page column the whole plan is already framed, so wheel, drag and
 * pinch have nothing to do — and swallowing touch there stops a phone
 * scrolling past the block.
 * ------------------------------------------------------------------ */
.ef-siteplan svg.map{touch-action:pan-y;cursor:default}
.ef-siteplan.can-explore svg.map{touch-action:none;cursor:grab}
.ef-siteplan.can-explore svg.map.panning{cursor:grabbing}

/* ------------------------------------------------------------------ *
 * The pointer.
 *
 * The theme swaps the OS cursor for a pair of drumsticks by hiding the real
 * one (`html.drumstick-cursor-active * { cursor: none !important }`) and
 * drawing an overlay. A full-screen element renders in the top layer, above
 * every fixed-position overlay — so inside the plan the drumsticks are
 * behind it and the real cursor is off: no pointer at all. A plan is a tool;
 * it gets the ordinary pointer back.
 * ------------------------------------------------------------------ */
html.drumstick-cursor-active .ef-siteplan,
html.drumstick-cursor-active .ef-siteplan *{cursor:auto!important}
html.drumstick-cursor-active .ef-siteplan button,
html.drumstick-cursor-active .ef-siteplan .legitem,
html.drumstick-cursor-active .ef-siteplan .leggroup__head,
html.drumstick-cursor-active .ef-siteplan [style*="cursor:pointer"]{cursor:pointer!important}
html.drumstick-cursor-active .ef-siteplan.can-explore svg.map{cursor:grab!important}
html.drumstick-cursor-active .ef-siteplan.can-explore svg.map.panning{cursor:grabbing!important}

/* Full screen: the browser paints its own ground behind a top-layer element,
   so the block has to bring a background of its own or the plan floats on
   black. The legend keeps a share of the height, but a smaller one — here
   the map is the point. */
.ef-siteplan-block:fullscreen,
.ef-siteplan-block:-webkit-full-screen{background:var(--ef-color-primary)}
.ef-siteplan-block:fullscreen .legendbar,
.ef-siteplan-block.is-faux-fs .legendbar{max-height:32vh;padding:12px 18px 14px}
.ef-siteplan-block:fullscreen .legendbar .leggroup,
.ef-siteplan-block.is-faux-fs .legendbar .leggroup{margin-bottom:9px}
.ef-siteplan-block:fullscreen .legendbar__head,
.ef-siteplan-block.is-faux-fs .legendbar__head{margin-bottom:8px}
/* Nothing to explore here, so the fit control is not offered either. */
.ef-siteplan #btnZoomIn[hidden],
.ef-siteplan #btnZoomOut[hidden],
.ef-siteplan #btnFit[hidden]{display:none}

/* ------------------------------------------------------------------ *
 * A position, given away.
 *
 * The grid square is the part that gets read out over a phone to someone
 * running towards you, so it is the biggest thing in both panels.
 * ------------------------------------------------------------------ */
.ef-siteplan .gridref,
.ef-siteplan .sharegrid{
  display:flex;align-items:baseline;gap:10px;margin:8px 0 6px}
.ef-siteplan .gridref span,
.ef-siteplan .sharegrid span{
  font-family:var(--f-label);font-size:var(--ef-text-meta);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-soft)}
.ef-siteplan .gridref b,
.ef-siteplan .sharegrid b{
  font-family:var(--f-label);font-size:34px;line-height:1;color:var(--red);
  font-variant-numeric:tabular-nums}
.ef-siteplan .sharegrid b{font-size:46px}
.ef-siteplan .sharecoords{
  margin:0 0 12px;font-size:var(--ef-text-meta);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ef-siteplan .sharerow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ef-siteplan .sharerow .spbtn{text-decoration:none}
.ef-siteplan .shareimport{margin-top:16px;padding-top:14px;border-top:2px solid var(--edge)}
.ef-siteplan .shareimport label{
  display:block;margin-bottom:6px;font-size:var(--ef-text-meta);font-weight:700;color:var(--ink-soft)}
.ef-siteplan .shareimport input{
  flex:0 0 7rem;background:var(--panel-2);border:2px solid var(--edge);border-radius:var(--ef-radius);
  padding:8px 10px;font:inherit;font-size:18px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink)}

/* Places this visitor kept: their own camp, a friend's van. Stored in this
   browser and nowhere else, so the list has to make removing one as easy as
   adding it. */
.ef-siteplan .spotlist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ef-siteplan .spotlist li{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  padding:10px;border:2px solid var(--edge);border-radius:var(--ef-radius);background:var(--panel)}
.ef-siteplan .spotlist li.is-on{border-color:var(--plum);background:var(--panel-2)}
.ef-siteplan .spotlist__name{flex:1 1 auto;min-width:0;font-weight:700;overflow-wrap:anywhere}
.ef-siteplan .spotlist__ref{
  flex:0 0 auto;color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:var(--ef-text-meta)}
.ef-siteplan .spotlist .spbtn{padding:4px 10px;font-size:var(--ef-text-meta)}
.ef-siteplan .spotlist .danger{color:var(--red)}
.ef-siteplan .shareimport input#spotName,
.ef-siteplan .shareimport input#importName{
  flex:1 1 10rem;text-transform:none;letter-spacing:normal;font-size:var(--ef-text-body)}

/* A phone should get two legend columns, not one very long one. */
@media (max-width:520px){
  .ef-siteplan .leggroup__items{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .ef-siteplan .legitem{font-size:var(--ef-text-meta);padding:4px 7px;gap:7px}
  .ef-siteplan .legitem__dot{width:22px;height:22px}
  .ef-siteplan .legitem__dot svg{width:13px;height:13px}
}

/* Inside a card the bare .spbtn (transparent on transparent) reads as plain
   text, which is how "Auf der Karte zeigen" ended up looking like a caption
   next to its own input. On the toolbar it works because everything there
   carries .ghost; here the default has to stand on its own. */
.ef-siteplan .sharerow .spbtn:not(.on):not(.ghost),
.ef-siteplan .shareimport .spbtn:not(.on):not(.ghost){
  border-color:var(--edge);background:var(--panel-2)}

/* E/* Every hover keeps the text on the ink colour: the default .spbtn colour is
   inherited{color:var(--ink)}



.ef-siteplan .spotlist .spbtn{border-color:var(--edge)}

/* On a phone the plan is landscape and the column is not: a fixed map height
   left the drawing sitting in a tall box of empty ground. siteplan.js
   publishes the sheet's own aspect (--sp-plan-aspect), so the box can be the
   height the drawing actually needs — with a floor, so a very wide plan does
   not become a letterbox slit. */
@media (max-width:720px){
  .ef-siteplan-block .shell,
  .ef-siteplan-block--short .shell,
  .ef-siteplan-block--medium .shell,
  .ef-siteplan-block--tall .shell,
  .ef-siteplan-block--screen .shell{
    /* explicit width, or aspect-ratio derives the WIDTH from min-height
       and the box runs 46px past a 390px screen */
    width:100%;max-width:100%;
    /* siteplan.js sets --sp-shell-h in px on a phone; aspect-ratio is the
       fallback for the moment before it has (and for the editor) */
    height:auto;
    height:var(--sp-shell-h,auto);
    aspect-ratio:var(--sp-plan-aspect,1.6);
    min-height:300px;
    max-height:78vh}
  /* the toolbar is a lot of buttons in a narrow column - let it scroll
     sideways rather than stack six rows deep over the map */
  .ef-siteplan .bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .ef-siteplan .bar::-webkit-scrollbar{display:none}
  .ef-siteplan .bar .spring{display:none}
  .ef-siteplan .stage{padding-top:calc(var(--sp-bar-h,44px) + 14px)}
}

/* The pointer that hops over whatever is singled out. Motion is the one
   signal a static drawing cannot fake — and the one thing some people must
   not be given, hence the reduced-motion arm. */
@keyframes ef-sp-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2.2%)}
}
.ef-siteplan .ef-sp-bob{animation:ef-sp-bob 1.15s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .ef-siteplan .ef-sp-bob{animation:none}
}

/* Sections inside the cards. Both "Meine Orte" and "Notfall" are several
   distinct jobs in one panel, and a panel of unlabelled controls is a panel
   whose features nobody finds — which is exactly what was reported. */
.ef-siteplan .sossec{margin-top:16px;padding-top:14px;border-top:2px solid var(--edge)}
.ef-siteplan .sossec:first-child{margin-top:0;padding-top:0;border-top:0}
.ef-siteplan .sossec h4{
  margin:0 0 4px;font-family:var(--f-label);font-size:var(--ef-text-meta);letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink)}
.ef-siteplan .sossec .shareimport{margin-top:10px;padding-top:0;border-top:0}

/* The emergency card. Red is reserved for it across the plan, and the two
   numbers are the largest touch targets anywhere in the block: whoever is
   reading this is not in a state to aim. */
.ef-siteplan .spbtn.sos{border-color:var(--red);color:var(--red);font-weight:700}

.ef-siteplan .sosrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.ef-siteplan .spbtn.sosnum{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:12px 16px;background:var(--red);color:var(--on-fg);border-color:var(--red);
  text-decoration:none;white-space:normal}
.ef-siteplan .spbtn.sosnum b{font-family:var(--f-label);font-size:32px;line-height:1}
.ef-siteplan .spbtn.sosnum span{font-size:var(--ef-text-meta);opacity:.92;text-align:left}

.ef-siteplan .soslist{margin:0;padding-left:1.5em;display:grid;gap:5px;font-size:var(--ef-text-meta);list-style:decimal}
.ef-siteplan .soslist li{display:list-item}
.ef-siteplan .soslist li{padding-left:2px}
.ef-siteplan .soslist b{color:var(--ink)}

/* Dragging the plan used to select the area names underneath it — blue
   highlight over the map, and a text selection nobody asked for. The map is
   a thing you move, not a thing you read word by word; the cards keep normal
   selection because copying a grid reference out of one is the point. */
.ef-siteplan .stage,
.ef-siteplan svg.map,
.ef-siteplan svg.map *{
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent}
.ef-siteplan .waycard,
.ef-siteplan .waycard *,
.ef-siteplan .geopanel,
.ef-siteplan .geopanel *{-webkit-user-select:text;user-select:text}

/* The find field is the one input somebody types into in a hurry. */
.ef-siteplan .findinput{
  flex:1 1 14rem;min-width:0;background:var(--panel-2);border:2px solid var(--edge);
  border-radius:var(--ef-radius);padding:10px 12px;font:inherit;font-size:var(--ef-text-body);color:var(--ink)}
.ef-siteplan #findErr{color:var(--red);font-weight:700}
.ef-siteplan #findErr[hidden]{display:none}

/* The "Du bist hier" panel sits over a corner of the map, so it needs a way
   out. Closing it only puts the panel away — the position stays drawn on the
   plan, which is what someone actually wants when they close it. */
/* The toast is fixed to the bottom of the viewport, which is exactly where
   an open card keeps its buttons. While one is open it moves to the top. */
.ef-siteplan .toast.over-card{bottom:auto;top:22px}

.ef-siteplan .geopanel{position:relative;padding-right:34px}
.ef-siteplan .geoclose{
  position:absolute;top:6px;right:6px;width:24px;height:24px;
  display:grid;place-items:center;padding:0;line-height:1;
  border:2px solid transparent;border-radius:var(--ef-radius);background:none;
  color:var(--ink-soft);font-size:var(--ef-text-meta);cursor:pointer}


/* A note that reports a problem — no grid square here, no position yet. */
.ef-siteplan .note.bad{color:var(--red);font-weight:700}

/* Folding the bar away. The plan is the point; eight buttons stacked over a
   phone-sized map are not. Collapsed, only the name and the toggle remain —
   and the stage reclaims the height, because its padding is measured. */
.ef-siteplan .bartoggle{margin-left:auto;font-size:var(--ef-text-body);line-height:1;padding:6px 10px}
.ef-siteplan.bar-collapsed .bar > *:not(.brand):not(.bartoggle):not(.ef-siteplan-fs):not(#btnClear){display:none}
.ef-siteplan.bar-collapsed .bar{flex-wrap:nowrap}

/* Full screen: the bar is the navigation, so it sits on the top edge of the
   viewport and stays there — a floating pill inset from a corner reads as a
   widget, not as the way out. The stage still reserves its measured height,
   so nothing underneath is covered. */
.ef-siteplan-block:fullscreen .bar,
.ef-siteplan-block.is-faux-fs .bar{
  top:0;left:0;right:0;border-radius:0;
  border-bottom:2px solid var(--edge);
  box-shadow:var(--ef-shadow)}
.ef-siteplan-block:fullscreen .stage,
.ef-siteplan-block.is-faux-fs .stage{
  padding:calc(var(--sp-bar-h,54px) + 10px) 10px 10px}

/* Full screen means the whole screen. The block is a page section and carries
   the theme's vertical rhythm — 110px of padding — which in full screen
   pushed the bar off the top edge and shoved the legend clean past the bottom
   of the viewport. Inside the top layer that rhythm has nothing to align to. */
.ef-siteplan-block:fullscreen,
.ef-siteplan-block.is-faux-fs{padding:0!important;margin:0!important}
.ef-siteplan-block:fullscreen .ef-siteplan-list{display:none}

/* ------------------------------------------------------------------ *
 * First aid.
 *
 * Read by somebody frightened, one-handed, possibly in the dark. So: one
 * step per screen, a figure big enough to recognise without reading, and
 * the next button always in the same place.
 * ------------------------------------------------------------------ */
.ef-siteplan .aidpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:10px}
.ef-siteplan .aidpick__btn{
  flex-direction:column;gap:6px;padding:12px 10px;height:auto;white-space:normal;
  border-color:var(--edge);background:var(--panel-2);color:var(--ink);text-align:center}

.ef-siteplan .aidpick__btn span{font-weight:700;font-size:var(--ef-text-meta);line-height:1.2}
.ef-siteplan .aidpick__btn .aidfig{width:58px;height:44px}

.ef-siteplan .aidstep{text-align:center}
.ef-siteplan .aidstep__count{
  font-family:var(--f-label);font-size:var(--ef-text-meta);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px}
.ef-siteplan .aidstep__fig{
  display:grid;place-items:center;padding:14px 10px;margin-bottom:12px;
  background:var(--panel-2);border:2px solid var(--edge);border-radius:var(--ef-radius);color:var(--ink)}
.ef-siteplan .aidfig{width:100%;max-width:260px;height:auto;display:block}
.ef-siteplan .aidstep h4{
  margin:0 0 6px;font-family:var(--f-label);font-size:19px;color:var(--ink);text-transform:none;letter-spacing:0}
.ef-siteplan .aidstep p{margin:0 auto;max-width:34rem;font-size:var(--ef-text-body);line-height:1.5;color:var(--ink)}
.ef-siteplan .aidstep p b{color:var(--red)}

.ef-siteplan .aidnav{display:flex;align-items:center;gap:12px;margin-top:16px}
.ef-siteplan .aidnav .spbtn{min-width:7rem;justify-content:center}
.ef-siteplan .aidnav #aidNext,
.ef-siteplan .aidnav #aidDone{margin-left:auto}
.ef-siteplan .aiddots{display:flex;gap:6px;justify-content:center;flex:1}
.ef-siteplan .aiddots span{
  width:9px;height:9px;border-radius:50%;background:var(--edge)}
.ef-siteplan .aiddots span.is-on{background:var(--on-bg)}

/* ------------------------------------------------------------------ *
 * The plan's menu belongs to the plan.
 *
 * As a page section the block carried the theme's vertical rhythm, and the
 * bar floated 12px inside that — so the plan's own navigation sat in a strip
 * of page background 32px below the site header, reading as a widget that
 * had come loose. It now starts exactly where the header ends and spans the
 * width, with its own ground. --ef-header-height is the theme's own token,
 * so it follows the header at every breakpoint.
 * ------------------------------------------------------------------ */
.header_background .site__content > .ef-siteplan-block,
.ef-siteplan-block{padding-top:var(--ef-header-height,90px)}
.ef-siteplan .bar{
  top:0;left:0;right:0;border-radius:0;
  border-bottom:2px solid var(--edge);
  box-shadow:var(--ef-shadow)}

/* A focus ring is 3px of outline sitting 2px clear of the box, so anything
   directly above an input needs at least that much room — otherwise the ring
   is drawn straight over it, which is what the explanation above the "Ort
   finden" field was wearing. */
.ef-siteplan .waycard .note{margin:0 0 12px}
.ef-siteplan .waycard .sharerow{margin-top:6px}
.ef-siteplan .waycard .sharerow + .note{margin-top:10px}
/* ...and inside a card the ring hugs the field rather than reaching for its
   neighbours; the border is already 2px, so it stays perfectly visible. */
.ef-siteplan .waycard input:focus-visible,
.ef-siteplan .waycard select:focus-visible{outline-offset:1px}

/* ------------------------------------------------------------------ *
 * The CSS-only full screen, done properly.
 *
 * On an iPhone there is no Fullscreen API for anything but a video, so the
 * block gets `.is-faux-fs` and a fixed box over the viewport. That box used
 * to stay INSIDE main.site__content, which is `position:relative; z-index:2`
 * and therefore a stacking context: no z-index on the block can climb out of
 * it, so the fixed header (z-index 4) and the footer painted over the plan,
 * and the "full screen" was a strip of map between the two. siteplan.js now
 * moves the block to <body> for the duration; these rules make the box fill
 * the screen the phone actually shows (dvh, not vh - vh includes the ground
 * under Safari's toolbar) and stop the page scrolling underneath it.
 * ------------------------------------------------------------------ */
.ef-siteplan-block.is-faux-fs .ef-siteplan{height:100vh;height:100dvh}
.ef-siteplan-block.is-faux-fs{width:100%;height:100vh;height:100dvh;overflow:hidden}
/* The phone-column rule gives the shell the plan's aspect ratio and a 78vh
   cap, which is right in a page and wrong in a box that IS the screen. */
.ef-siteplan-block:fullscreen .shell,
.ef-siteplan-block.is-faux-fs .shell{aspect-ratio:auto;max-height:none;min-height:0}
.ef-siteplan-block.is-faux-fs .bar{padding-top:calc(6px + env(safe-area-inset-top,0px))}
html.ef-siteplan-fs-lock,
html.ef-siteplan-fs-lock body{overflow:hidden!important;overscroll-behavior:none}

/* ------------------------------------------------------------------ *
 * The legend on a phone.
 *
 * Under a 230 px map the full legend ran to 900 px - four screens of key
 * for a map that fits in one - so in a page column it starts folded to its
 * heading, a note that the plan is meant to be used in full screen there,
 * and the two buttons that follow from that. Full screen (real or faux)
 * always shows it whole; wider screens never fold it.
 * ------------------------------------------------------------------ */
.ef-siteplan .legendbar__mobile{display:none}
@media (max-width:720px){
  .ef-siteplan-block:not(:fullscreen):not(.is-faux-fs) .legendbar__mobile{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:8px}
  .ef-siteplan-block:not(:fullscreen):not(.is-faux-fs) .legendbar__mobile p{
    flex:1 1 100%;margin:0;font-size:var(--ef-text-meta);line-height:1.35;color:var(--ink)}
  .ef-siteplan-block:not(:fullscreen):not(.is-faux-fs) .legendbar__head p{display:none}
  .ef-siteplan-block:not(:fullscreen):not(.is-faux-fs) .legendbar:not(.is-open) .legendbar__body{display:none}
  .ef-siteplan-block:not(:fullscreen):not(.is-faux-fs) .legendbar{padding-bottom:12px}
}
.ef-siteplan .legendbar__mobile .spbtn{border-color:var(--edge);background:var(--panel-2)}
.ef-siteplan .legendbar__mobile .legendbar__fs{background:var(--on-bg);color:var(--on-fg);border-color:var(--on-bg)}


/* ------------------------------------------------------------------ *
 * The toolbar and the position panel on a phone.
 *
 * The bar's buttons were desktop-sized (13.5px, ~34px tall) on a screen
 * where they are pressed with a thumb, and in a page column they sat over a
 * map only ~230px tall. Phones get 44px targets and a box that grows by
 * the bar's measured height, so the drawing keeps its share. The "Du bist
 * hier" panel, which covered most of that small map, becomes a slim strip
 * along its bottom edge there - square and accuracy, the list of nearby
 * places waits for full screen, where there is room for it.
 * ------------------------------------------------------------------ */
@media (max-width:720px){
  .ef-siteplan .bar{gap:7px;padding:7px}
  .ef-siteplan .spbtn{font-size:var(--ef-text-body);padding:9px 13px;min-height:44px}
  .ef-siteplan .seg .spbtn{padding:9px 14px}
  .ef-siteplan .brand{font-size:var(--ef-text-body)}
  .ef-siteplan .bartoggle,
  .ef-siteplan .geoclose{min-width:44px;min-height:44px}
  .ef-siteplan .geoclose{width:44px;height:44px;top:0;right:0;font-size:18px}
  .ef-siteplan-block:not(:fullscreen):not(.is-faux-fs) .shell{
    min-height:calc(var(--sp-bar-h,54px) + 270px)}
  .ef-siteplan-block:not(:fullscreen):not(.is-faux-fs) .geopanel{
    left:8px;right:8px;bottom:8px;max-width:none;padding:8px 44px 8px 11px;
    display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
  .ef-siteplan-block:not(:fullscreen):not(.is-faux-fs) .geopanel ul{display:none}
  .ef-siteplan-block:not(:fullscreen):not(.is-faux-fs) .geopanel h3{display:inline;margin:0 10px 0 0}
  .ef-siteplan-block:not(:fullscreen):not(.is-faux-fs) .geopanel .gridref{display:inline-flex;margin:0 10px 0 0}
  .ef-siteplan-block:not(:fullscreen):not(.is-faux-fs) .geopanel .gridref b{font-size:22px}
  .ef-siteplan-block:not(:fullscreen):not(.is-faux-fs) .geopanel .acc{display:inline;margin:0}
}

/* ------------------------------------------------------------------ *
 * Red in the dark.
 *
 * --red is both a text colour (the emergency button's label, a grid
 * square, a warning) and a surface (the 112 / 110 buttons under white
 * text). One value cannot be both once the panel goes dark: #a3271c on
 * #272252 is 1.9:1. So text gets --red, which lightens in the dark scheme,
 * and surfaces get --red-bg, which stays the deep red white text sits on.
 * ------------------------------------------------------------------ */

.ef-siteplan .spbtn.sosnum{background:var(--red-bg);border-color:var(--red-bg);color:var(--on-fg)}

/* The phone toolbar wraps into rows. It used to scroll sideways in one
   row, which hid half the buttons and made the fold-away toggle pointless:
   there was nothing on screen to fold. Rows are measured (--sp-bar-h), so
   the map keeps its room under them, and ▴ folds them to one. */
@media (max-width:720px){
  .ef-siteplan .bar{flex-wrap:wrap;overflow-x:visible}
  .ef-siteplan .bar .sep{display:none}
  .ef-siteplan.bar-collapsed .bar{flex-wrap:nowrap}
}

/* The block's own text colour, on the block itself. The cards and the
   position panel never set one and inherited the PAGE's - dark text, which
   on the block's dark panels read at 1.2:1. */
.ef-siteplan{color:var(--txt)}
/* Fewer, not smaller: on a phone the brand (the page heading says it) and
   the print button (nobody prints from a field) leave the bar, and the
   rest packs tighter, so the bar is two or three rows of 44px targets. */
@media (max-width:720px){
  .ef-siteplan .bar{gap:6px;padding:6px}
  .ef-siteplan .spbtn{padding:9px 10px;font-size:var(--ef-text-meta)}
  .ef-siteplan.is-view .bar .brand,
  .ef-siteplan.is-view #btnPrint{display:none}
  .ef-siteplan-block:fullscreen .legendbar,
  .ef-siteplan-block.is-faux-fs .legendbar{max-height:26vh}
}
/* The coordinate readout is the author's instrument; a visitor's map
   should not carry a pair of decimals in its corner. */
.ef-siteplan.is-view .readout{display:none}


/* ------------------------------------------------------------------ *
 * Hover, only where there is a pointer that hovers.
 *
 * iOS applies :hover on a tap and keeps it until the next tap somewhere
 * else, so after pressing 112 the button sat in its hover colours next to
 * an untouched 110. Every hover rule lives here, behind the media query;
 * touch gets :active instead (below).
 * ------------------------------------------------------------------ */
@media (hover:hover) and (pointer:fine){
.ef-siteplan .spbtn:hover{background:var(--panel-2)}
.ef-siteplan .tray button:hover{border-color:var(--orange);color:var(--txt)}
.ef-siteplan .chips button:hover{border-color:var(--c)}
.ef-siteplan .chips button i.redraw:hover{opacity:1}
.ef-siteplan .list button:hover{background:var(--panel-2)}
.ef-siteplan .waycard .row2:hover{border-color:var(--c)}
.ef-siteplan .vtx:hover{fill:var(--orange)}
.ef-siteplan-list summary:hover{text-decoration:underline}
.ef-siteplan .legendbar__reset:hover{background:var(--plum);color:var(--on-fg)}
.ef-siteplan .leggroup__head:hover{border-color:var(--edge)}
.ef-siteplan .legitem:hover{background:var(--panel-2);border-color:var(--edge)}
.ef-siteplan .sharerow .spbtn:not(.on):not(.ghost):hover,
.ef-siteplan .shareimport .spbtn:not(.on):not(.ghost):hover{background:var(--wall);color:var(--ink)}
and on a tinted hover ground that was the thing going pale. */
.ef-siteplan .spbtn:hover{color:var(--ink)}
.ef-siteplan .spbtn.on:hover{color:var(--on-fg)}
.ef-siteplan .spbtn.sos:hover,
.ef-siteplan .spbtn.sosnum:hover{color:var(--on-fg)}
.ef-siteplan .legitem:hover,
.ef-siteplan .leggroup__head:hover{color:var(--ink)}
.ef-siteplan .spbtn.sos:hover{background:var(--red);color:var(--on-fg)}
.ef-siteplan .spbtn.sosnum:hover{background:var(--on-bg);border-color:var(--on-bg);color:var(--on-fg)}
.ef-siteplan .geoclose:hover{background:var(--panel-2);border-color:var(--edge);color:var(--ink)}
.ef-siteplan .aidpick__btn:hover{background:var(--sel);border-color:var(--gold);color:var(--ink)}
.ef-siteplan .legendbar__mobile .legendbar__fs:hover{color:var(--on-fg)}
.ef-siteplan .spbtn.sos:hover{background:var(--red-bg);color:var(--on-fg);border-color:var(--red-bg)}
}
.ef-siteplan .spbtn:active{background:var(--panel-2)}
.ef-siteplan .spbtn.on:active{background:var(--on-bg)}
.ef-siteplan .legitem:active{background:var(--panel-2)}

/* ------------------------------------------------------------------ *
 * Full screen on a phone: the legend is a bottom sheet.
 *
 * Toolbar rows plus a 26vh legend left the map ~300 of 664 px. The legend
 * now sits over the map's bottom edge as a 48px strip ("Legende ▾") and
 * opens over the map on a tap; the map has the whole box underneath.
 * ------------------------------------------------------------------ */
.ef-siteplan .legendbar__sheet{display:none}
@media (max-width:720px){
  .ef-siteplan-block:fullscreen .legendbar,
  .ef-siteplan-block.is-faux-fs .legendbar{
    position:absolute;left:0;right:0;bottom:0;z-index:8;max-height:70vh;max-height:70dvh;
    padding:0 14px 14px;border-top:2px solid var(--edge);border-radius:var(--ef-radius) 14px 0 0;
    box-shadow:var(--ef-shadow-raised)}
  .ef-siteplan-block:fullscreen .legendbar__sheet,
  .ef-siteplan-block.is-faux-fs .legendbar__sheet{
    display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
    min-height:48px;padding:8px 4px;margin:0;background:none;border:0;
    font-family:var(--f-label);font-size:var(--ef-text-body);color:var(--ink);cursor:pointer;text-align:left}
  .ef-siteplan-block:fullscreen .legendbar__sheet span,
  .ef-siteplan-block.is-faux-fs .legendbar__sheet span{font-family:var(--f-ui);font-size:var(--ef-text-meta);color:var(--ink-soft);font-weight:400}
  .ef-siteplan-block:fullscreen .legendbar:not(.is-open) .legendbar__head,
  .ef-siteplan-block.is-faux-fs .legendbar:not(.is-open) .legendbar__head,
  .ef-siteplan-block:fullscreen .legendbar:not(.is-open) .legendbar__body,
  .ef-siteplan-block.is-faux-fs .legendbar:not(.is-open) .legendbar__body{display:none}
  .ef-siteplan-block:fullscreen .legendbar.is-open .legendbar__body,
  .ef-siteplan-block.is-faux-fs .legendbar.is-open .legendbar__body{display:block}
  .ef-siteplan-block:fullscreen .ef-siteplan,
  .ef-siteplan-block.is-faux-fs .ef-siteplan{position:relative}
  .ef-siteplan-block:fullscreen .shell,
  .ef-siteplan-block.is-faux-fs .shell{flex:1 1 auto}
  /* the strip covers the map's bottom edge; the stage keeps that much clear */
  .ef-siteplan-block:fullscreen .stage,
  .ef-siteplan-block.is-faux-fs .stage{padding-bottom:58px}
  /* the folded bar keeps its name on a phone - an empty white strip with two
     buttons at the far end read as a broken header */
  .ef-siteplan.is-view.bar-collapsed .bar .brand{display:inline}
}
/* The fallback's ground follows the scheme. */
.ef-siteplan-block.is-faux-fs{background:var(--ef-color-primary)}

/* Touch on the map: while exploring, the browser gets no gesture at all -
   on the stage as well as on the SVG, because iOS resolves touch-action up
   the chain and an inline SVG alone has not always been enough. No
   long-press callout on the drawing either. */
.ef-siteplan.can-explore .stage,
.ef-siteplan.can-explore svg.map{touch-action:none;-webkit-touch-callout:none}
.ef-siteplan svg.map *{-webkit-touch-callout:none}

/* Placeholders - "z. B. unser Camp", "K5" - are the default text of a
   field and have to be read as such. The theme's own placeholder rule
   colours them in the secondary colour and blanks them on focus (with
   !important); inside the plan they keep the muted text role and stay
   visible while typing starts, so nobody loses the example they were
   about to copy. */
.ef-siteplan input::placeholder,
.ef-siteplan input:focus::placeholder{color:var(--txt-dim)!important;opacity:1}
.ef-siteplan input::-webkit-input-placeholder,
.ef-siteplan input:focus::-webkit-input-placeholder{color:var(--txt-dim)!important;opacity:1}

/* ------------------------------------------------------------------ *
 * The top layer.
 *
 * A card is a <dialog> opened with showModal() and the toast is a popover:
 * both live in the top layer, above every stacking context on the page -
 * including main.site__content (z-index:2), whose footer (z-index:3) used
 * to paint over a position:fixed card and scroll across it. The UA gives
 * a dialog and a popover a centred box, a margin, a border and a backdrop;
 * all of that is reset here so they keep the layout they always had. */
.ef-siteplan dialog.waybox{
  width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;
  color:var(--txt);overflow:hidden}
.ef-siteplan dialog.waybox::backdrop{background:transparent}
.ef-siteplan dialog.waybox:not([open]){display:none}
.ef-siteplan .toast[popover]{inset:auto auto 26px 50%;margin:0;border:0;overflow:visible;padding:8px 16px;width:auto;height:auto}
.ef-siteplan .toast.over-card[popover]{inset:22px auto auto 50%}
.ef-siteplan .toast[popover]:not(:popover-open){display:none}
.ef-siteplan .toast[popover]:popover-open{display:block}

/* A kept spot: its name and square on one line, the four actions on the
   next. In one flex row with four buttons a name on a phone was squeezed
   into a 14px column and set one letter per line. */
.ef-siteplan .spotlist__head{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.ef-siteplan .spotlist__acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ef-siteplan .spotlist__acts .danger{margin-left:auto}