/* =============================================================
   PRONTA TOOL LAYER, Pension Meier
   Everything in this file belongs to pronta, not to the depicted
   firm: the notice bar, the pencil, the editing box, the labelled
   edit buttons, the editing panels, the photo swap and the status
   line in the foot. Copied from haar-schmink-atelier (css/tool.css,
   stamp 20260924e, itself from treuhand-moser) onto Martin's pilot
   site of 25.09.2026, whose own stylesheet (css/site.css) stays as he
   delivered it apart from its font path. This template adds the colour
   choice of the other templates over the pilot's own palettes (spec
   2026-09-25-pensionmeier-neutral-template.md, P-C9). No team
   counter, no removable blocks, no whole-picture photo button.
   Removing this file and js/tool.js yields the pilot design.

   Two things differ from the sister site because the design under
   the layer is not ours: the marks are taken out with display:none
   when editing is off (P2), since a collapsed button still counts in
   a foreign flex gap or grid row, and every rule the layer needs to
   sit on the pilot's markup is collected in the block at the end.
   ============================================================= */

:root {
  /* Fixed, never taken from the site's colours (decision 53; the
     slate grey appears nowhere in the pilot either). #738491 carries
     the icon-only pencil, the ring and every hairline, where the 3:1
     non-text ratio applies (white on it measures 3.86:1); the small
     bold labels of marks, pills and strip sit on #5C6B77 (5.5:1) and
     press one step darker still (7.3:1). */
  --pr-color: #738491;
  --pr-color-deep: #5C6B77;
  --pr-color-press: #4B5863;
  --pr-bright: #FFFFFF;
  --pr-ink: #2E3841;
  /* white with eight percent of the layer colour, the same tone the
     block under edit gets as a translucent wash (point 13); opaque
     here because bar, box, sheet and dialog float over page content */
  --pr-paper: #F4F5F6;
  --pr-line: #C7CED3;
  --pr-dash: rgba(115, 132, 145, 0.55);
  --pr-shade-strong: rgba(38, 44, 49, 0.28);
  --pr-shade-soft: rgba(38, 44, 49, 0.14);
  --pr-font: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* how far the pencil and the box stand above the pilot's fixed
     contact bar (.mobile-actionbar: 48px high, .75rem above the foot of
     the screen, only up to 600px) */
  --pr-fab-lift: 0px;
}

@media (max-width: 600px) {
  :root {
    --pr-fab-lift: calc(48px + 0.75rem + 1rem);
  }
}

/* ---------- notice bar -------------------------------------- */

/* The bar carries the legally required non-binding notice and nothing
   else; every control lives in the box behind the pencil at the foot of
   the screen. */
.pr-bar {
  background: var(--pr-paper);
  color: var(--pr-ink);
  border-block-end: 2px solid var(--pr-color);
  font-family: var(--pr-font);
  overflow-x: clip;
}

.pr-bar__note {
  margin: 0;
  padding-block: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.45;
  max-inline-size: 40rem;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.pr-bar__note strong {
  font-weight: 650;
}

/* ---------- the pencil ------------------------------------- */

/* The one permanent entry into the tool layer: a pencil in the bottom
   right corner that pulses so it is found, over a page that otherwise
   looks finished. The ring expands and fades on a 3.2s cycle with a
   rest phase; only transform and opacity move, the button itself is
   still. Keyframes, duration, easing, rest phase and start opacity are
   the sister sites' one to one; ring colour and alpha are Martin's
   (point 10, spec E4). A hairline white contour keeps the button
   legible on the dark foot (point 9). The editing sheet at phone width
   stands above it (z-index 70 here, above the pilot's header at 50 and
   contact bar at 60), which is also why it steps aside while that sheet
   is open: the sheet carries its own Fertig button in the same corner. */
.pr-fab {
  position: fixed;
  z-index: 46;
  inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
  /* above the pilot's contact bar where there is one (:root above) */
  translate: 0 calc(-1 * var(--pr-fab-lift));
  inset-inline-end: 1rem;
  display: none;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: var(--pr-color);
  color: var(--pr-bright);
  cursor: pointer;
  /* Martin's white outline (F9) is the defined edge of this button, so the
     elevation stays close: a 24px blur next to a hairline is the
     border-plus-halo pair the design hook flags as a generated-UI
     signature (04.09.2026). 14px still lifts the button off the page. */
  box-shadow: 0 2px 4px var(--pr-shade-strong), 0 6px 14px var(--pr-shade-soft);
  transition: background-color 140ms var(--ease-out, ease-out),
    translate 100ms var(--ease-out, ease-out);
}

html[data-pr] .pr-fab {
  display: grid;
}

body.pr-panel-open .pr-fab {
  display: none;
}

.pr-fab::before {
  content: "";
  inline-size: 22px;
  block-size: 22px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.9 2.3a1.1 1.1 0 0 1 1.55 0l1.25 1.25a1.1 1.1 0 0 1 0 1.55L6.1 12.7l-3.9 1.1 1.1-3.9Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.9 2.3a1.1 1.1 0 0 1 1.55 0l1.25 1.25a1.1 1.1 0 0 1 0 1.55L6.1 12.7l-3.9 1.1 1.1-3.9Z'/%3E%3C/svg%3E");
}

.pr-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Martin's 0.22 measured too faint (spec E4, protocol as decision
     75/80: peak grey-level frame delta over one cycle, 1.9x crop
     around the button, 390x844, over plain paper): 16/255. Raised in
     0.05 steps until the peak reached 40/255; 0.57 measures 40 at
     160 ms and 44 at 50 ms sampling (01.09.2026). */
  border: 3px solid rgba(115, 132, 145, 0.57);
  border-radius: 50%;
  pointer-events: none;
  animation: pr-pulse 3.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pr-pulse {
  0% {
    opacity: 0.85;
    scale: 1;
  }
  55%,
  100% {
    opacity: 0;
    scale: 1.8;
  }
}

.pr-fab:hover::after,
.pr-fab:focus-visible::after,
html:has(.pr-box:popover-open) .pr-fab::after {
  animation: none;
  opacity: 0;
}

/* The blanket override in site.css only shortens durations; an infinite
   animation at 0.01ms would flicker rather than stop, so the ring is
   taken away outright here. */
@media (prefers-reduced-motion: reduce) {
  .pr-fab::after {
    content: none;
  }
}

.pr-fab:active {
  translate: 0 1px;
}

/* Below 416px a smaller button covers less of the page; 48px is still
   a full tap target. */
@media (max-width: 26em) {
  .pr-fab {
    inline-size: 3rem;
    block-size: 3rem;
    inset-inline-end: 0.625rem;
  }
}

/* ---------- palette picker (spec C9, as on treuhand-moser) --- */

.palette {
  display: flex;
  align-items: center;
  /* the 44px hit areas (::after inset -12px below) need at least 1.5rem
     between buttons, or neighbouring targets overlap */
  gap: 1.5rem;
}

.palette__label {
  font-size: 0.78rem;
  white-space: nowrap;
}

.palette__btn {
  position: relative;
  inline-size: 1.3rem;
  block-size: 1.3rem;
  padding: 0;
  border: 2px solid var(--pr-line);
  border-radius: 50%;
  background: var(--sw-paper);
  cursor: pointer;
  transition: border-color 140ms var(--ease-out, ease-out);
}

/* a filled dot of the accent tone inside a paper-toned ring reads as a
   colour swatch */
.palette__btn::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--sw-seal);
  transition: inset 140ms var(--ease-out, ease-out);
}

/* 44px target without layout change; the gap keeps neighbouring
   targets from overlapping */
.palette__btn::after {
  content: "";
  position: absolute;
  inset: -12px;
}

.palette__btn[aria-pressed="true"] {
  border-color: var(--pr-color);
}

.palette__btn[aria-pressed="true"]::before {
  inset: 3px;
}

/* the three colour worlds of this site: canvas and brand tone of each
   (css/site.css, [data-palette]) */
.palette__btn--wald { --sw-paper: #f7f6f2; --sw-seal: #365c4c; }
.palette__btn--moos { --sw-paper: #f4f5ef; --sw-seal: #52613f; }
.palette__btn--erde { --sw-paper: #f7f3ed; --sw-seal: #795640; }

/* ---------- the editing box --------------------------------- */

/* A native popover: the top layer, light dismiss and Escape come with
   it, so none of that is written here. Anchored over the pencil rather
   than centred, which is where the eye already is when it is pressed. */
.pr-box {
  position: fixed;
  inset: auto 1rem calc(1.15rem + var(--pr-fab-lift) + env(safe-area-inset-bottom, 0px)) auto;
  inline-size: min(20rem, calc(100vw - 2rem));
  max-block-size: min(70vh, 30rem);
  overflow-y: auto;
  margin: 0;
  padding: 1rem 1.1rem 1.1rem;
  border: 0;
  border-radius: 14px;
  background: var(--pr-paper);
  color: var(--pr-ink);
  font-family: var(--pr-font);
  box-shadow: 0 1px 2px var(--pr-shade-strong), 0 14px 34px var(--pr-shade-soft);
}

.pr-box::backdrop {
  background: transparent;
}

.pr-box__title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 650;
}

.pr-box__hint {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  line-height: 1.5;
}

.pr-box__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 0.9rem;
}

/* The toggle's label: a plain text node has no state of its own, so it
   would read "ausblenden" for the whole span between first paint and
   tool.js running, even though the boot snippet has already restored
   data-marks="off". Two spans switched by an attribute selector on
   <html> are correct from first paint with no JavaScript in the loop.
   Unlike the sister site the inactive span carries no hidden
   attribute: the pilot's Tailwind preflight sets [hidden] to
   display:none !important inside a cascade layer, which no rule here
   could undo. display:none keeps the span out of the accessible name
   all the same. */
.pr-toggle--on,
.pr-toggle--off {
  display: none;
}

html[data-pr]:not([data-marks="off"]) .pr-toggle--on {
  display: inline;
}

html[data-marks="off"] .pr-toggle--off {
  display: inline;
}

/* ---------- pill buttons ------------------------------------ */

.pr-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.95rem;
  border: 1.5px solid var(--pr-color-deep);
  border-radius: 999px;
  background: transparent;
  color: var(--pr-color-deep);
  font-family: var(--pr-font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  transition: background-color 140ms var(--ease-out, ease-out),
    color 140ms var(--ease-out, ease-out);
}

/* 44px touch target without layout change; box gaps keep neighbours apart */
.pr-btn::after {
  content: "";
  position: absolute;
  inset: -7px -2px;
  border-radius: 999px;
}

.pr-btn--solid {
  background: var(--pr-color-deep);
  border-color: var(--pr-color-deep);
  color: var(--pr-bright);
}

.pr-btn:active {
  translate: 0 1px;
}

/* ---------- edit marks -------------------------------------- */

/* A real button with its own place in the flow; in grid containers it
   takes a full row of its own. Where the pilot's markup has no room for
   it in the flow, it stands absolutely, see the coupling block at the
   end. */
.pr-mark {
  position: relative;
  /* block-level flex, not inline-flex: vertical margins on atomic
     inline boxes do not push line boxes apart, so the gap between
     mark and zone content would silently vanish */
  display: flex;
  inline-size: fit-content;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.9rem;
  padding-block: 0.68rem;
  padding-inline: 0.9rem 1.05rem;
  border: 0;
  border-radius: 999px;
  background: var(--pr-color-deep);
  color: var(--pr-bright);
  font-family: var(--pr-font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px var(--pr-shade-strong), 0 6px 16px var(--pr-shade-soft);
  grid-column: 1 / -1;
  justify-self: start;
  transition: background-color 140ms var(--ease-out, ease-out),
    translate 100ms var(--ease-out, ease-out);
  visibility: hidden;
}

/* inherit, not visible: the pilot closes its phone menu with
   visibility:hidden, and a mark that insisted on being visible would
   stay focusable in the closed menu */
html[data-pr] .pr-mark {
  visibility: inherit;
}

/* icon drawn in the label colour, masked from an inline SVG */
.pr-mark::before {
  content: "";
  flex: none;
  inline-size: 14px;
  block-size: 14px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.pr-mark--text::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.9 2.3a1.1 1.1 0 0 1 1.55 0l1.25 1.25a1.1 1.1 0 0 1 0 1.55L6.1 12.7l-3.9 1.1 1.1-3.9Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.9 2.3a1.1 1.1 0 0 1 1.55 0l1.25 1.25a1.1 1.1 0 0 1 0 1.55L6.1 12.7l-3.9 1.1 1.1-3.9Z'/%3E%3C/svg%3E");
}

.pr-mark--img::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='1.9' y='2.9' width='12.2' height='10.2' rx='1.4'/%3E%3Cpath d='M3.6 11.4l3-3.2 2.1 2.1 2.4-2.7 1.9 2.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='1.9' y='2.9' width='12.2' height='10.2' rx='1.4'/%3E%3Cpath d='M3.6 11.4l3-3.2 2.1 2.1 2.4-2.7 1.9 2.2'/%3E%3C/svg%3E");
}

/* 44px touch target: 36px visual height plus 5px each side */
.pr-mark::after {
  content: "";
  position: absolute;
  inset: -5px 0;
  border-radius: 999px;
}

.pr-mark:active {
  translate: 0 1px;
}

/* ---------- zones ------------------------------------------- */

/* The dashed line ties the button to the block it edits. It stays
   quiet so the hierarchy holds: buttons speak, outlines whisper. */
html[data-pr] .pr-zone {
  outline: 1px dashed var(--pr-dash);
  outline-offset: 8px;
}

/* comment-only zones (#43): tappable in the dashboard preview, no
   buttons, no outline while editing is on */
html[data-pr] .pr-zone--note {
  outline: none;
}

/* full-width bands and pictures draw the line inside their own frame */
html[data-pr] .pr-zone--inset {
  outline-offset: -10px;
}

html[data-pr] .pr-zone--open {
  outline-color: var(--pr-color);
  /* the block under edit gets a faint wash of the layer colour, never
     a solid field: the site stays in front (point 13) */
  background-color: rgba(115, 132, 145, 0.08);
}

/* ---------- hover and focus, pointer devices only ----------- */

@media (hover: hover) {
  .pr-mark:hover,
  .pr-btn--solid:hover {
    background: var(--pr-color-press);
  }

  .pr-fab:hover {
    background: var(--pr-color-deep);
  }

  .pr-btn:not(.pr-btn--solid):hover {
    background: var(--pr-color-deep);
    color: var(--pr-bright);
  }

  .pr-zone:hover {
    outline-color: var(--pr-color);
  }

  .palette__btn:hover {
    border-color: var(--pr-color);
  }
}

/* one focus voice for the whole layer: the existing 2px
   :focus-visible outline, recoloured to the layer colour (point 11:
   focus states in the editor share the one UI colour; 3.6:1 against
   the layer paper, enough for a non-text indicator) */
.pr-bar :focus-visible,
.pr-fab:focus-visible,
.pr-box :focus-visible,
.pr-mark:focus-visible,
.pr-panel :focus-visible,
.pr-dialog :focus-visible {
  outline-color: var(--pr-color);
}

/* ---------- editing panel ----------------------------------- */

.pr-panel {
  inline-size: 100%;
  max-inline-size: 32rem;
  margin-block: 0 1.4rem;
  padding: 1rem 1rem 0.9rem;
  background: var(--pr-paper);
  color: var(--pr-ink);
  border-radius: 12px;
  box-shadow: 0 1px 2px var(--pr-shade-strong), 0 10px 28px var(--pr-shade-soft);
  font-family: var(--pr-font);
  grid-column: 1 / -1;
}

.pr-panel__title {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 650;
  max-inline-size: none;
}

.pr-panel__field {
  display: block;
  margin-block-end: 0.75rem;
}

.pr-panel__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-block-end: 0.3rem;
}

/* backstop against a text wall: visible so the sudden stop at the
   ceiling is explained, not just felt */
.pr-panel__count {
  display: block;
  margin-block-start: 0.25rem;
  color: var(--pr-ink);
  font-size: 0.68rem;
  text-align: end;
}

.pr-panel textarea {
  display: block;
  inline-size: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--pr-line);
  border-radius: 8px;
  background: var(--pr-bright);
  color: var(--pr-ink);
  font-family: var(--pr-font);
  /* 16px, not 0.95rem: iOS Safari zooms into a smaller field on focus
     and does not zoom back, which leaves the page scrolling sideways
     (P5) */
  font-size: 1rem;
  line-height: 1.45;
  resize: vertical;
  min-block-size: 2.4rem;
  field-sizing: content;
}

.pr-panel textarea:focus {
  border-color: var(--pr-color);
}

.pr-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.75rem;
  margin-block-start: 0.9rem;
}

.pr-panel__hint {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  max-inline-size: none;
}

/* Without JavaScript the layer can never appear, so it must not reserve
   room either. This costs no layout shift, because data-pr is set by
   the boot script in <head>, before the first paint: with JavaScript
   the rule never matches at all. */
html:not([data-pr]) .pr-mark {
  display: none;
}

/* ---------- empty-field placeholder -------------------------- */

/* An emptied field keeps its place instead of vanishing: italic and
   in the layer colour, so it reads as an open invitation from the
   tool, never as missing or broken site content. Shown in the
   surrounding element's own type, not the tool's system sans, since
   it sits inside running site content. */
.pr-placeholder {
  color: var(--pr-color-deep);
  font-style: italic;
}

/* ---------- "hide marks" state ------------------------------ */

html[data-marks="off"] .pr-panel {
  display: none;
}

/* Out of the flow entirely, not collapsed as on the sister site (P2):
   in the pilot's markup a zero-height button would still be an item of
   the desktop navigation's flex row (width plus a 30px gap), a row of
   every grid it stands in, and a row with height in the stretched grid
   of the start page's hero. Switching off therefore snaps instead of
   folding. display:none also takes the marks out of the tab order and
   the accessible tree. */
html[data-marks="off"] .pr-mark {
  display: none;
}

html[data-marks="off"] .pr-zone {
  outline: none;
}


/* ---------- editing panel, phone width ----------------------- */

@media (max-width: 47.9375em) {
  /* Bottom sheet on the phone-width channel: anchored to the foot of
     the screen, so nothing above it moves and the live edit stays in
     view the whole time. */
  .pr-panel {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 70;
    max-inline-size: none;
    max-block-size: min(70vh, calc(100vh - 4rem));
    overflow-y: auto;
    margin-block-end: 0;
    border-radius: 14px 14px 0 0;
    padding-block-end: calc(0.9rem + env(safe-area-inset-bottom));
    box-shadow: 0 -1px 2px var(--pr-shade-strong), 0 -10px 28px var(--pr-shade-soft);
  }

  /* the sheet repeats "Fertig" as its own primary action, so quick
     contact is not lost while the fixed bar underneath is hidden */
  body.pr-panel-open .mobile-actionbar {
    display: none;
  }
}

/* ---------- reset confirmation dialog ------------------------- */

/* Native <dialog>, not window.confirm(): it inherits the layer's own
   look instead of the browser chrome, and showModal() already gives
   it a focus trap and an Escape-to-cancel for free. */
.pr-dialog {
  max-inline-size: 24rem;
  inline-size: calc(100vw - 2.4rem);
  padding: 1.15rem 1.25rem 1.25rem;
  /* a <dialog> element carries its own UA border by default; without
     an explicit override that default, not the deliberately flat and
     shadowed look, would show through */
  border: none;
  border-radius: 14px;
  background: var(--pr-paper);
  color: var(--pr-ink);
  font-family: var(--pr-font);
  box-shadow: 0 1px 2px var(--pr-shade-strong), 0 14px 34px var(--pr-shade-soft);
}

.pr-dialog::backdrop {
  background: var(--pr-shade-strong);
}

.pr-dialog__title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 650;
}

.pr-dialog__text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
}

.pr-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-block-start: 1.1rem;
}

/* ---------- screen reader live region ----------------------- */

.pr-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* =============================================================
   COUPLING TO THE PILOT SITE
   What the layer needs to sit on Martin's markup without changing how
   it looks (spec F14, F15; inventory section 6). Apart from the status
   line, nothing here shows while editing is off: every rule that
   touches a pilot element is scoped to the editing state.
   ============================================================= */

:root {
  /* the content edge of the pilot's .wrap (max-width 80rem, side
     padding clamp(1.25rem, 5vw, 3.25rem)); in a full-width box the
     marks and panels line up with the text */
  --pr-edge: calc(max(0px, (100% - 80rem) / 2) + clamp(1.25rem, 5vw, 3.25rem));
}

/* The pilot sets its own font with !important on bare elements (body,
   p, a, span, strong, label, textarea, button and more); the layer
   keeps its system sans, with a higher specificity. The status line
   stays in the pilot's type. */
:is(.pr-bar, .pr-fab, .pr-box, .pr-panel, .pr-dialog, .pr-mark),
:is(.pr-bar, .pr-box, .pr-panel, .pr-dialog) * {
  font-family: var(--pr-font) !important;
}

/* The sister site's body sets line-height 1.62, and panel, box and
   dialog inherit it; the pilot's differs. Fixed here, so the layer
   measures the same on both sites. The pilot's own inheritance stops
   at the panel: its navigation sets bold type, its foot a smaller
   size, its eyebrows uppercase and letter-spacing. */
.pr-panel,
.pr-box,
.pr-dialog {
  line-height: 1.62;
}

/* the pilot's body sets letter-spacing -0.006em, the sister site none */
.pr-bar,
.pr-box,
.pr-dialog {
  letter-spacing: normal;
}

.pr-panel {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  white-space: normal;
}

/* The pilot styles every label and textarea of its inquiry form; the
   panel of the form zone keeps the layer's look */
.inquiry-form .pr-panel__field {
  display: block;
  margin: 0 0 0.75rem;
}

.inquiry-form .pr-panel textarea {
  min-block-size: 2.4rem;
  width: 100%;
}

.inquiry-form .pr-panel textarea:focus {
  box-shadow: none;
  outline: 3px solid var(--pr-color);
  outline-offset: 4px;
}

/* The pilot's links carry no underline (a { text-decoration: none });
   the two links of the layer sit in running text of their own colour */
.pr-box a,
.pr-status a {
  text-decoration: underline;
}

/* The status line of every preview (decision 107), in the pilot's own
   small foot type (.footer-bottom), on a line of its own under the
   foot's bottom row */
.pr-status {
  max-inline-size: 56ch;
  margin: 1rem 0 0;
  font-size: 0.82rem;
  opacity: 0.72;
}

.pr-status a:hover {
  opacity: 1;
}

/* The wrapper around the brand link (C2) takes the brand's place in the
   header grid, may shrink like it below 600px, and keeps the link a
   blocked flex item as it was as a grid item before */
.pr-brand {
  grid-area: 1 / 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- only while editing ------------------------------ */

/* Containers of absolute marks become their containing block; only
   while editing, so the preview is untouched */
html[data-pr]:not([data-marks="off"]) :is(.farm-image, .room-detail-image, .excursion-card, .hosts-section,
  .split-heading, .landscape-intro, .travel-location, .balcony-media, .landscape-gallery, .desktop-nav) {
  position: relative;
}

/* Absolute marks: over a picture (hero, page heads, closing bands,
   room pictures, farm picture, excursion cards, location map), in a
   grid whose children a mark in the flow would shift (hosts, split
   heading, landscape intro), on the fixed contact bar, and the
   desktop navigation (see below) */
:is(.home-hero, .page-intro, .closing-cta, .room-image-wrap, .room-detail-image, .farm-image, .excursion-card,
  .travel-location, .hosts-section, .split-heading, .landscape-intro, .mobile-actionbar,
  .balcony-media, .landscape-gallery, .farm-image-pair) > .pr-mark {
  position: absolute;
  z-index: 3;
  margin: 0;
}

/* on the right: the text of these bands starts on the left, and at
   phone width right at the top */
:is(.home-hero, .page-intro, .closing-cta) > .pr-mark {
  inset-block-start: 1.25rem;
  inset-inline-end: var(--pr-edge);
}

:is(.room-image-wrap, .room-detail-image, .farm-image, .excursion-card, .travel-location) > .pr-mark {
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
}

/* At phone width the page heads are 370px high (the pilot's value
   there) and their text fills them; with the text mark on top, the
   block would run up under the header. While editing they grow with
   their content instead. */
@media (max-width: 600px) {
  html[data-pr]:not([data-marks="off"]) .page-intro {
    height: auto;
  }

  /* the text mark then stands level with the photo mark, the eyebrow
     below both */
  html[data-pr]:not([data-marks="off"]) .page-intro-content {
    height: auto;
    min-height: 370px;
    padding-top: 1.25rem;
  }
}

/* several pictures in one container: js/tool.js sets each mark on the
   top left corner of its picture */
.pr-zone--multi > .pr-mark {
  translate: 0.75rem 0.75rem;
}

/* grids with text: the mark stands in the free band above them, in
   the section's own top padding (at least 3.5rem) where the grid is the
   section itself */
:is(.hosts-section, .split-heading, .landscape-intro) > .pr-mark {
  inset-inline-start: clamp(1.25rem, 5vw, 3.25rem);
}

.split-heading > .pr-mark {
  inset-block-end: calc(100% + 0.6rem);
}

:is(.hosts-section, .landscape-intro) > .pr-mark {
  inset-block-start: 0.6rem;
}

/* The facts ribbon is a grid of three: its mark takes a row of its own
   above them (grid-column 1 / -1 from the mark rule) */
.fact-ribbon > .pr-mark {
  margin-block: 0.9rem 0;
}

/* The facts ribbon styles every div child (padding, dividers): its
   panel stands after the ribbon, on the content edge */
.fact-ribbon + .pr-panel {
  margin: 1.4rem var(--pr-edge);
}

/* The start page's title block counts its children for the stagger of
   its entrance animation (:nth-child 2 to 4): its mark is the last
   child and moved to the top by order, never animated; its panel
   follows the mark */
.hero-content > .pr-mark,
.hero-content > .pr-panel {
  order: -1;
  animation: none;
}

/* The hero and the page heads have a fixed height and clip their
   content: while a panel is open in them (from 768px on, below it is a
   sheet), they grow with it */
html[data-pr] :is(.home-hero, .page-intro):has(.pr-panel) {
  height: auto;
}

/* Full-width bands: mark and panel on the content edge */
.hero-lede-band > .pr-mark,
.hero-lede-band > .pr-panel {
  margin-inline-start: var(--pr-edge);
}

.hero-lede-band > .pr-mark {
  margin-block-end: 1.2rem;
}

/* centred link rows */
.center-action > .pr-mark {
  margin-inline: auto;
}

.center-action > .pr-panel {
  margin-inline: auto;
  text-align: start;
}

/* The contact bar is fixed to the foot of the screen and clips its
   children: while editing it lets its mark stand as a tab above it,
   and the second link keeps the bar's rounded corners */
html[data-pr]:not([data-marks="off"]) .mobile-actionbar {
  overflow: visible;
}

html[data-pr]:not([data-marks="off"]) .mobile-actionbar a + a {
  border-radius: 0 8px 8px 0;
}

.mobile-actionbar > .pr-mark {
  inset-block-end: calc(100% + 0.6rem);
  inset-inline-start: 0;
}

/* The desktop navigation sits in the header grid between brand and
   button: anything in its flow would widen it. Its mark stands in the
   free space above the links, its panel drops below the header, over
   the page, at the panel's own width (HSA A5). */
.desktop-nav > .pr-mark {
  position: absolute;
  inset-block-end: calc(100% - 0.2rem);
  inset-inline-start: 0;
  margin: 0;
}

/* The same for the header button: a mark in its flex row widened the
   third column and squeezed the menu labels into ellipses at 1041px */
html[data-pr]:not([data-marks="off"]) .header-contact {
  position: relative;
}

.header-contact > .pr-mark {
  position: absolute;
  inset-block-end: calc(100% + 0.3rem);
  inset-inline-end: 0;
  margin: 0;
}

.header-contact > .pr-panel {
  position: absolute;
  z-index: 1;
  inset-block-start: calc(100% + 0.6rem);
  inset-inline-end: 0;
  inline-size: 32rem;
}

.desktop-nav > .pr-panel {
  position: absolute;
  z-index: 1;
  inset-block-start: calc(100% + 0.6rem);
  inset-inline-start: 0;
  inline-size: 32rem;
}

/* The phone menu between 768 and 1040px (below 768 the panel is a
   sheet on body): its 260px box would squeeze the panel, which drops
   below it at its own width instead */
.mobile-menu nav > .pr-panel {
  position: absolute;
  z-index: 1;
  inset-block-start: calc(100% + 0.6rem);
  inset-inline-end: 0;
  inline-size: min(32rem, calc(100vw - 2rem));
}

/* The foot's bottom row (slogan, legal links): while editing, mark and
   panel take lines of their own above it (HSA A6) */
html[data-pr]:not([data-marks="off"]) .footer-bottom {
  flex-wrap: wrap;
}

html[data-pr]:not([data-marks="off"]) .footer-bottom::before {
  content: "";
  order: -1;
  flex-basis: 100%;
}

.footer-bottom > .pr-mark {
  order: -3;
  margin-inline-end: auto;
}

.footer-bottom > .pr-panel {
  order: -2;
  flex-basis: 100%;
}

/* ---------- ceilings in the header ------------------------------ */

/* The header row holds brand, navigation and button; at 1041px the
   delivered menu labels leave 32px spare. Next to the ceilings in
   js/tool.js (17 characters per label, 30 for the brand), labels and
   brand may shrink and end in an ellipsis instead of pushing the row
   past the screen or over each other (HSA m6, inventory R22). While
   the text fits, as every delivered text does, nothing changes: the
   pilot sets these links and, from 601px, the brand's name on one line
   already. Clipped with a margin, so no antialiased edge is cut. */
.desktop-nav,
.desktop-nav a,
.brand,
.brand > span {
  min-width: 0;
}

.desktop-nav a {
  overflow: clip;
  overflow-clip-margin: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 601px) {
  .brand strong {
    overflow: clip;
    overflow-clip-margin: 2px;
    text-overflow: ellipsis;
  }
}
/* ===== shared editor, generated by tools/tool-sync.sh from shared/tool/editor.css ===== */
/* Pronta tool layer, the direct editor (spec 2026-10-01-editor-direkt-antippen.md).
   Source of truth: websitetemplates/shared/tool/editor.css; tools/tool-sync.sh
   appends it to sites/<site>/css/tool.css (one request). It follows the
   site's own part of tool.css, whose colour tokens (--pr-color, --pr-color-deep,
   --pr-paper, --pr-ink, --pr-bright, --pr-font) it uses: the layer keeps
   its own colour, never the site's accent (Nr. 53). Everything here
   applies only with edit access (html[data-pr]). */

/* the old layer: labelled marks, the "Foto ändern" strip on pictures
   (the camera pen replaces it), round button with its box, the panel,
   dashed frames (Nr. 54 and 55, replaced by Nr. 141) */
html[data-pr] .pr-mark,
html[data-pr] .pr-strip,
.pr-fab,
.pr-box,
.pr-panel {
  display: none !important;
}
html[data-pr] .pr-zone,
html[data-pr] .pr-zone--row,
html[data-pr] .pr-zone--open {
  outline: none !important;
}
/* symbol pictures say so in the one view there is now (Nr. 56); the
   strip that stood in for the chip while editing is gone */
html[data-pr] .pr-symbol .pr-proof {
  display: block !important;
}
/* a block taken away (Martin #110) stays in the page, keys never move */
[data-pr-gone] {
  display: none !important;
}

/* ---------- pens (E2) ---------- */
.pr-pens {
  position: absolute;
  inset: 0 auto auto 0;
  inline-size: 0;
  block-size: 0;
  z-index: 1040;
}
.pr-pen {
  position: absolute;
  z-index: 1040;
  inline-size: 28px;
  block-size: 28px;
  padding: 0;
  border: 2px solid var(--pr-bright);
  border-radius: 50%;
  background: var(--pr-color-deep) no-repeat center / 14px 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round' d='M10.6 2.4l3 3L5.4 13.6 2 14l.4-3.4z'/%3E%3C/svg%3E");
  box-shadow: 0 1px 2px var(--pr-shade-strong), 0 3px 10px var(--pr-shade-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pr-pen--photo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='1.6' stroke-linejoin='round' d='M2 5h3l1.2-1.8h3.6L11 5h3v8H2z'/%3E%3Ccircle cx='8' cy='9' r='2.4' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E");
}
.pr-pen--fixed {
  position: fixed;
}
/* the hit area is 44 by 44 (E11), the circle stays small */
.pr-pen::before {
  content: "";
  position: absolute;
  inset: -10px;
}
.pr-pen:active {
  background-color: var(--pr-color-press, var(--pr-color-deep));
  scale: 0.94;
}
.pr-pen:focus-visible {
  outline: 3px solid var(--pr-ink);
  outline-offset: 2px;
}
/* No pen stands on the page (Martin #106). With a mouse, the element
   under it gets a quiet frame and its pen (tool.js sets pr-hot and
   pr-pen--hot); the keyboard reaches every pen and shows it on focus.
   Touch screens get no pens: the hint in the bar lights everything up. */
@media (hover: hover) and (pointer: fine) {
  .pr-pen {
    opacity: 0;
    pointer-events: none;
  }
  .pr-pen.pr-pen--hot,
  .pr-pen:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .pr-hot {
    outline: 1px solid var(--pr-dash);
    outline-offset: 3px;
    cursor: text;
  }
  img.pr-hot {
    outline-offset: -1px;
    cursor: pointer;
  }
}
@media (hover: none), (pointer: coarse) {
  .pr-pen {
    display: none !important;
  }
}

/* a tap on "Texte und Bilder bearbeiten" lights up every editable spot
   for two seconds (Martin #106, the trouble of #69) */
html.pr-flash .pr-can {
  outline: 2px solid var(--pr-color);
  outline-offset: 3px;
  animation: pr-flash 2s ease-in both;
}
html.pr-flash img.pr-can {
  outline-offset: -2px;
}
@keyframes pr-flash {
  0%, 70% { outline-color: var(--pr-color); }
  100% { outline-color: transparent; }
}

/* ---------- the element being edited (E3) ---------- */
.pr-active {
  outline: 2px solid var(--pr-color) !important;
  outline-offset: 4px;
  border-radius: 2px;
  caret-color: var(--pr-color-deep);
  cursor: text;
}
.pr-active:focus {
  outline: 2px solid var(--pr-color) !important;
}
img.pr-active {
  outline-offset: -2px;
}
.pr-inline {
  position: absolute;
  z-index: 1150;
  box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  border: 2px solid var(--pr-color);
  border-radius: 6px;
  background: var(--pr-bright);
  color: var(--pr-ink);
  font: 400 16px/1.4 var(--pr-font);
  box-shadow: 0 6px 20px var(--pr-shade-soft);
}

/* ---------- shared buttons ---------- */
.pr-toolbar .pr-btn,
.pr-edit .pr-btn,
.pr-hint .pr-btn {
  min-block-size: 44px;
  padding-inline: 1rem;
  font-size: 0.9rem;
  white-space: nowrap;
  justify-content: center;
}
.pr-btn--quiet {
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pr-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---------- toolbar on the keyboard (E5) ---------- */
.pr-toolbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 1200;
  box-sizing: border-box;
  padding: 6px 8px;
  background: var(--pr-paper);
  border-block-start: 2px solid var(--pr-color);
  font-family: var(--pr-font);
  color: var(--pr-ink);
  box-shadow: 0 -4px 16px var(--pr-shade-soft);
}
.pr-toolbar[hidden] {
  display: none;
}
.pr-toolbar__row {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pr-toolbar .pr-btn {
  padding-inline: 0.85rem;
}
.pr-btn--undo {
  inline-size: 44px;
  padding: 0 !important;
}
.pr-btn--undo::before {
  content: "";
  inline-size: 20px;
  block-size: 20px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M7 4 3 8l4 4M3 8h9a5 5 0 0 1 0 10H9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M7 4 3 8l4 4M3 8h9a5 5 0 0 1 0 10H9'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.pr-toolbar__row > :last-child {
  margin-inline-start: auto;
}
.pr-toolbar__count {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pr-toolbar__count:empty {
  display: none;
}
.pr-toolbar__hint {
  margin: 6px 4px 2px;
  font-size: 0.85rem;
}
.pr-toolbar--float {
  position: absolute;
  inset-inline: auto;
  max-inline-size: min(92vw, 40rem);
  border: 1px solid var(--pr-line);
  border-block-start: 2px solid var(--pr-color);
  border-radius: 10px;
  box-shadow: 0 6px 24px var(--pr-shade-strong);
}

/* ---------- bar at the foot (E6) ---------- */
.pr-edit,
.pr-toolbar,
.pr-hint {
  hyphens: manual;
  -webkit-hyphens: manual;
  text-align: start;
}
.pr-hint__title,
.pr-hint__text,
.pr-edit__status {
  letter-spacing: normal;
  text-transform: none;
}
.pr-edit {
  position: fixed;
  inset-inline: 0;
  bottom: var(--pr-lift, 0px);
  z-index: 1050;
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--pr-paper);
  border-block-start: 2px solid var(--pr-color);
  color: var(--pr-ink);
  font-family: var(--pr-font);
  box-shadow: 0 -4px 16px var(--pr-shade-soft);
}
/* part one: what to do, in the layer's colour and larger (Martin #106) */
.pr-edit__show {
  display: block;
  margin: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--pr-color-deep);
  font: 400 1.02rem/1.35 var(--pr-font);
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  cursor: pointer;
}
.pr-edit__show strong {
  font-weight: 700;
}
.pr-edit__show:focus-visible,
.pr-edit__discard:focus-visible {
  outline: 2px solid var(--pr-ink);
  outline-offset: 2px;
}
.pr-edit__status {
  margin: 2px 0 0;
  font-size: 0.82rem;
  line-height: 1.3;
}
.pr-edit__status--error {
  font-weight: 600;
}
/* part two: the colour concepts themselves, no menu */
.pr-edit__colour {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 1.5rem;
  padding-block-start: 8px;
  border-block-start: 1px solid var(--pr-line);
}
.pr-edit__label {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
}
.pr-edit__label strong {
  font-weight: 700;
}
.pr-edit .palette {
  margin: 0;
}
.pr-edit .palette__label {
  display: none;
}
.pr-edit .palette__btn {
  inline-size: 1.75rem;
  block-size: 1.75rem;
}
.pr-edit__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.pr-edit__actions:not(:has(> :not([hidden]))) {
  display: none;
}
.pr-edit__actions [hidden] {
  display: none;
}
.pr-edit__discard {
  margin: 0;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--pr-ink);
  font: 400 0.85rem/1.2 var(--pr-font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pr-edit__actions .pr-btn--solid {
  margin-inline-start: auto;
}
@media (max-width: 47.99em) {
  .pr-edit__actions .pr-btn--solid {
    order: -1;
    flex: 1 0 100%;
  }
}
html.pr-editing .pr-edit {
  display: none;
}
/* desktop: one row, the two parts side by side */
@media (min-width: 48em) {
  .pr-edit {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 24px;
    padding-inline: 20px;
  }
  .pr-edit__colour {
    padding: 0 0 0 24px;
    border-block-start: 0;
    border-inline-start: 1px solid var(--pr-line);
  }
  .pr-edit__show {
    font-size: 1.1rem;
  }
}
/* the page can always be scrolled clear of the bar */
html[data-pr] body::after {
  content: "";
  display: block;
  block-size: var(--pr-edit-h, 90px);
}

/* ---------- first visit (E7) ---------- */
.pr-hint {
  position: fixed;
  inset-inline: 12px;
  bottom: calc(var(--pr-edit-h, 90px) + var(--pr-lift, 0px) + 12px);
  z-index: 1250;
  max-inline-size: 26rem;
  margin-inline: auto;
  padding: 16px 18px;
  background: var(--pr-paper);
  border: 2px solid var(--pr-color);
  border-radius: 12px;
  color: var(--pr-ink);
  font-family: var(--pr-font);
  box-shadow: 0 10px 30px var(--pr-shade-strong);
}
.pr-hint__title {
  margin: 0 0 4px;
  line-height: 1.3;
  font-size: 1rem;
  font-weight: 700;
}
.pr-hint__text {
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .pr-pen:active {
    scale: none;
  }
  /* no fade: the light simply goes after two seconds (tool.js) */
  html.pr-flash .pr-can {
    animation: none;
  }
}