/* =============================================================
   PRONTA TOOL LAYER, Coiffeur 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 treuhand-moser (css/tool.css,
   stamp 20260924b) and adapted to Martin's pilot site, whose own
   stylesheet (css/site.css) stays byte for byte as he delivered it
   (spec 2026-09-24-haarschmink-pilot-pronta-port.md, K1). No team
   counter, no removable blocks (K10). Unlike the pilot customer's site
   this template has the colour choice of the other templates (spec
   2026-09-24-coiffeurmeier-neutral-template.md, C9; the palettes
   themselves are css/palettes.css). 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-cta, 66px, only up to 760px) */
  --pr-fab-lift: 0px;
}

@media (max-width: 760px) {
  :root {
    --pr-fab-lift: calc(66px + 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;
  }
}

/* ---------- 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;
}

/* ---------- 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: paper and accent of each */
.palette__btn--terrakotta { --sw-paper: #fff8f3; --sw-seal: #c66f5d; }
.palette__btn--salbei { --sw-paper: #fafaf3; --sw-seal: #456f4d; }
.palette__btn--pflaume { --sw-paper: #fef8f8; --sw-seal: #94496d; }

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

/* A real button with its own place in the flow; in grid containers it
   takes a full row of its own. Three stand 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] .landscape-hero.pr-zone,
html[data-pr] .location-visual.pr-zone,
html[data-pr] .topline.pr-zone,
html[data-pr] .hero-strip.pr-zone,
html[data-pr] .mobile-cta.pr-zone,
html[data-pr] .pr-photo.pr-zone {
  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);
  }

  /* the strip is a label inside the photo button; the whole picture
     answers to hover, not just its own thin sliver */
  .pr-photo__open:hover .pr-strip {
    background: var(--pr-color-press);
  }

  .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-photo__open: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;
}

/* ---------- symbolic portrait ------------------------------- */

.pr-photo {
  position: relative;
  overflow: hidden;
}

/* The whole picture is the control, not just the strip along its
   foot. A plain button reset, block-level so it fills the figure;
   the strip inside is a non-interactive label, positioned against
   this element's ancestor .pr-photo. */
.pr-photo__open {
  display: block;
  inline-size: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* The pilot labels its portrait "Symbolbild" in its own caption and
   keeps its natural look: no pallor and no proof chip here (K8).
   .pr-symbol only tells js/tool.js that the strip should read "Foto
   ändern" once an own photo is in. */

.pr-strip {
  position: absolute;
  z-index: 2;
  inset-block-end: 0;
  inset-inline: 0;
  min-block-size: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: 0;
  background: var(--pr-color-deep);
  color: var(--pr-bright);
  font-family: var(--pr-font);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  transition: background-color 140ms var(--ease-out, ease-out);
  visibility: hidden;
}

html[data-pr] .pr-strip {
  visibility: visible;
}

/* 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,
html:not([data-pr]) .pr-strip {
  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,
html[data-marks="off"] .pr-strip {
  display: none;
}

/* the whole picture is an open button (see .pr-photo__open above);
   with marks hidden it must neither react to a click nor sit in the
   tab order, the same as .pr-mark below */
html[data-marks="off"] .pr-photo__open {
  pointer-events: 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-cta {
    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 3.5 to 3.7). Apart from the status line, nothing here
   shows while editing is off.
   ============================================================= */

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

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

/* The pilot styles every textarea of its form, focus ring included;
   the panel's field in the form zone keeps the layer's look */
.request-form .pr-panel textarea:focus {
  box-shadow: none;
  outline: 3px solid var(--pr-color);
  outline-offset: 4px;
}

/* 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 (P15). Underlined, since it has the colour of the
   sentence around it. */
.pr-status {
  max-inline-size: 56ch;
  margin: 0;
  padding-block-end: 26px;
  color: #ffffff8a;
  font-size: 12px;
}

.pr-status a {
  text-decoration: underline;
}

.pr-status a:hover {
  color: var(--white);
}

/* At the end of the page the pencil stands above the contact bar;
   the reserve keeps it off the sentence and its link */
@media (max-width: 760px) {
  .pr-status {
    padding-block-end: calc(26px + 4rem);
  }
}

/* The wrapper around the brand link (C3, C8) keeps the link a blocked
   flex item of its own width, as it was as a grid item before */
.pr-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* .hero__place span colours the dot between trade and place; the two
   field spans beside it keep the line's own colour and spacing */
.hero__place > [data-edit] {
  color: inherit;
  margin-inline: 0;
}

/* The portrait on Über mich fills its figure with height: 100%, which
   needs a definite height on the button that now holds it */
.profile-hero .pr-photo__open {
  height: 100%;
}

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

/* Full-bleed zones: mark and panel stand on the content edge of the
   pilot's .shell, as on the sister site inside its .wrap */
.topline > .pr-mark,
.topline > .pr-panel,
.hero-strip > .pr-mark,
.hero-strip > .pr-panel {
  margin-inline-start: max(24px, (100% - 1080px) / 2);
}

.topline > .pr-mark,
.hero-strip > .pr-mark {
  margin-block-start: 0.6rem;
}

/* Three marks stand absolutely (P7, and the desktop navigation). The
   picture of the start page's hero is a layer behind the card, and a
   mark in the flow of its stretched grid would move the card: it sits
   on the content edge over the picture. The contact bar is fixed to
   the foot of the screen: its mark is a tab above it. The desktop
   navigation is the header grid's auto column: anything in its flow
   widens that column and squeezes the two buttons beside it to a
   sliver (measured: 308 to 111px), so its mark sits in the free space
   above the links and its panel drops below the header, over the page,
   at the panel's own width. */
.landscape-hero > .pr-mark {
  position: absolute;
  z-index: 1;
  inset-block-start: 1.25rem;
  inset-inline-start: max(24px, (100% - 1080px) / 2);
  margin: 0;
}

html[data-pr]:not([data-marks="off"]) .desktop-nav {
  position: relative;
}

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

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

.mobile-cta > .pr-mark {
  position: absolute;
  inset-block-end: calc(100% + 0.6rem);
  inset-inline-start: 18px;
  margin: 0;
}

@media (max-width: 760px) {
  .topline > .pr-mark,
  .topline > .pr-panel,
  .hero-strip > .pr-mark,
  .hero-strip > .pr-panel {
    margin-inline-start: 18px;
  }

  .landscape-hero > .pr-mark {
    inset-inline-start: 18px;
  }
}

@media (max-width: 390px) {
  .topline > .pr-mark,
  .topline > .pr-panel,
  .hero-strip > .pr-mark,
  .hero-strip > .pr-panel {
    margin-inline-start: 14px;
  }

  .landscape-hero > .pr-mark,
  .mobile-cta > .pr-mark {
    inset-inline-start: 14px;
  }
}

/* inside framed boxes the mark keeps off the frame */
.header-actions > .pr-mark,
.location-visual > .pr-mark {
  margin: 0.6rem 0.6rem 0.9rem;
}

/* The two flex rows of the foot (its navigation and its bottom row):
   while editing, mark and panel take lines of their own above the
   links, which stay side by side (spec 3.6 rule 6). A zero-height
   break item after them does the wrapping, so the mark keeps its pill
   width. */
html[data-pr]:not([data-marks="off"]) .footer__top > nav,
html[data-pr]:not([data-marks="off"]) .footer__bottom {
  flex-wrap: wrap;
}

html[data-pr]:not([data-marks="off"]) .footer__top > nav::before,
html[data-pr]:not([data-marks="off"]) .footer__bottom::before {
  content: "";
  order: -1;
  flex-basis: 100%;
}

.footer__top > nav > .pr-mark,
.footer__bottom > .pr-mark {
  order: -3;
  margin-inline-end: auto;
}

.footer__top > nav > .pr-panel,
.footer__bottom > .pr-panel {
  order: -2;
  flex-basis: 100%;
}

/* The desktop navigation is the auto column of the pilot's header grid:
   every character typed into a menu label narrows the two buttons
   beside it. Next to the ceiling of 16 characters (js/tool.js), a label
   stops at 8.5em (the longest delivered one, "Angebot & Preise", is
   8.33em) and ends in an ellipsis: with four labels of 16 wide letters
   the buttons keep 124px and wrap instead of collapsing to 2px
   (measured at 1161, 1280 and 1440). Clipped with a margin, not
   hidden: overflow: hidden cut the antialiased ends of the pilot's
   underline under the current page's link (4px against the pilot). */
.desktop-nav a {
  max-inline-size: 8.5em;
  overflow: clip;
  overflow-clip-margin: 2px;
  text-overflow: ellipsis;
}

/* In the phone menu between 768 and 1160px the panel stays in the
   flow (below 768 it is a sheet on body); the menu's 540px ceiling
   would cut it off */
.mobile-nav--open:has(.pr-panel) {
  max-height: none;
}

/* the strip follows the rounded corners of the start page's portrait */
.owner-visual .pr-strip {
  border-radius: 0 0 16px 16px;
}
/* ===== 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;
  }
}