/* =============================================================
   PRONTA TOOL LAYER
   Everything in this file belongs to pronta, not to the depicted
   firm. It is the proofing layer on top of the sample site: the
   handover bar, the labelled edit buttons, the editing panels and
   the symbol-image treatment. It is deliberately foreign to the
   site beneath it, like a correction pen on a printed layout: its
   own colour (a proofing blue that appears in none of the
   three site schemes and never changes with them), its own type
   (a small system sans, neither Saira nor JetBrains Mono), and
   soft shadows so every control visibly floats above the page.
   The site itself owns none of these devices, which is exactly
   what keeps the two layers apart. Removing this file and
   js/tool.js yields the finished site. Ported from the pilot
   site 23.08.2026; only the scheme swatches, the mobile contact
   element and the register selectors are this site's own.
   ============================================================= */

:root {
  /* Martin's UI blue (28.08.2026), fixed across all three site
     schemes by decision 53. Three steps, not two, because one blue
     cannot serve both jobs: #3B6FE8 carries the icon-only pencil,
     the pulse ring and every hairline, where only the 3:1 non-text
     ratio applies; white on it measures 4.25 and would fail AA on
     the small bold labels the marks and pills carry, so those take
     the darker step (5.79) and press one darker still. */
  --pr-color: #3B6FE8;
  --pr-color-deep: #315FCB;
  --pr-color-press: #27509F;
  --pr-bright: #FFFFFF;
  --pr-ink: oklch(0.32 0.06 265);
  --pr-paper: oklch(0.975 0.008 265);
  --pr-line: oklch(0.87 0.025 265);
  --pr-dash: rgba(59, 111, 232, 0.55);
  --pr-shade-strong: oklch(0.27 0.03 265 / 0.28);
  --pr-shade-soft: oklch(0.27 0.03 265 / 0.14);
  --pr-font: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@supports not (color: oklch(0 0 0)) {
  :root {
    --pr-ink: #26314f;
    --pr-paper: #f6f8fd;
    --pr-line: #ccd4e6;
    --pr-shade-strong: rgba(38, 43, 60, 0.28);
    --pr-shade-soft: rgba(38, 43, 60, 0.14);
  }
}

/* ---------- handover bar ------------------------------------ */

/* Since round 2 (28.08.2026) the bar carries the legally required
   non-binding notice and nothing else: every control moved into the
   box behind the pencil at the foot of the screen, where it stays
   reachable instead of scrolling away with the bar. */
.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;
}

@media (max-width: 62.4375em) {
  .pr-bar__note {
    grid-column: full;
    padding-inline: 1.25rem;
  }
}

/* ---------- 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 site's one to one (operator, 28.08.); only the colour
   differs, Martin's ring tone rgba(59,111,232,0.25).
   z-index 45 puts it above the masthead (10) and above the editing
   sheet at phone width (40), 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: 45;
  inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
  /* phones: above the contact dock (site.css .dock, 4rem tall) */
  --pr-fab-lift: 0px;
  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: 0;
  border-radius: 50%;
  background: var(--pr-color);
  color: var(--pr-bright);
  cursor: pointer;
  box-shadow: 0 2px 4px var(--pr-shade-strong), 0 10px 24px 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;
  border: 3px solid var(--pr-color);
  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;
}

/* ---------- 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(4.9rem + 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.
   The hidden attribute (not display:none alone) also keeps the
   inactive span out of the accessible name. */
.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; bar 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;
}

/* ---------- scheme picker (unchanged mechanics) ------------- */

.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-ink);
}

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

/* the three schemes of this site: paper and accent of each */
.palette__btn--k1 {
  --sw-paper: oklch(0.955 0.008 285);
  --sw-seal: oklch(0.715 0.130 195);
}

.palette__btn--k2 {
  --sw-paper: oklch(0.965 0.005 255);
  --sw-seal: oklch(0.800 0.150 85);
}

.palette__btn--k3 {
  --sw-paper: oklch(0.945 0.006 50);
  --sw-seal: oklch(0.500 0.105 40);
}

@supports not (color: oklch(0 0 0)) {
  .palette__btn--k1 { --sw-paper: #efeff5; --sw-seal: #00bcbc; }
  .palette__btn--k2 { --sw-paper: #f1f4f7; --sw-seal: #eab532; }
  .palette__btn--k3 { --sw-paper: #f0ece9; --sw-seal: #944c32; }
}

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

/* A real button with its own place in the flow, never absolutely
   positioned over the page. In grid containers it takes a full row
   of its own. */
.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;
  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;
  overflow: hidden;
  max-block-size: 3rem;
  transition: background-color 140ms var(--ease-out, ease-out),
    translate 100ms var(--ease-out, ease-out),
    max-block-size 220ms var(--ease-out, ease-out),
    opacity 220ms var(--ease-out, ease-out),
    visibility 220ms var(--ease-out, ease-out),
    margin-block 220ms var(--ease-out, ease-out),
    padding-block 220ms var(--ease-out, ease-out);
  visibility: hidden;
}

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

/* 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: 1.5px 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] .band.pr-zone,
html[data-pr] .band--tint.pr-zone,
html[data-pr] .band--dark.pr-zone,
html[data-pr] .pr-photo.pr-zone {
  outline-offset: -10px;
}

/* folded register rows: inside, so neighbouring lines never meet */
html[data-pr] .pr-zone--row {
  outline-offset: 4px;
}

/* small zones directly under a picture keep their line close */
html[data-pr] .pr-zone--tight {
  outline-offset: 4px;
}

html[data-pr] .pr-zone--open {
  outline-color: var(--pr-color);
}

/* the folded register rows need air for their in-flow buttons */
.pr-zone--row {
  padding-block-start: 0.35rem;
}

.pr-zone--row .pr-mark {
  margin-block: 0.75rem 0.35rem;
}

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

/* one focus voice for the whole layer: the existing 2px
   :focus-visible outline, recoloured to the layer ink */
.pr-bar :focus-visible,
.pr-mark:focus-visible,
.pr-photo__open:focus-visible,
.pr-panel :focus-visible,
.pr-dialog :focus-visible {
  outline-color: var(--pr-ink);
}

/* ---------- 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);
  font-size: 0.95rem;
  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;
}

/* ---------- symbol image ------------------------------------ */

.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 proof band and strip inside are non-interactive labels,
   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;
}

/* Symbol image: the stock picture in its own colours at half opacity
   on the page ground, so it reads as a placeholder without a colour
   cast over faces and skin (Martin, 01.09.2026). The ground follows
   the active palette, so the paleness never picks up a tint. */
/* No ground of its own: the pallor is measured against whatever band
   the picture actually stands in. A fixed paper tone drew a faint
   rectangle wherever the portrait sat on a light surface band (measured
   01.09.: paper #F7F6F2 against surface #FFFFFF; critic round 3, owner
   lens). Transparent fulfils spec A12.2 -- "follows the palette without
   a cast" -- in every band, every palette and on all three sites, with
   one property less. */
.pr-symbol {
  background: transparent;
}

.pr-symbol img {
  display: block;
  inline-size: 100%;
  opacity: 0.5;
}

/* The proof chip: the marking that the picture is a symbol image and
   the request to replace it, in one line. Unlike the strip it belongs
   to the symbol image itself, not to the removable marks: it stays
   when the marks are hidden (the marking is legally motivated) and it
   needs no JavaScript, since the symbol class ships in the static
   HTML. A flat chip in the layer colour along the foot of the picture,
   no shadow, per the layer rule: flat means edge, floating means
   shadow. In edit mode the strip takes the same spot, so the chip
   steps back; it disappears for good once an own photo lands
   (applyPhoto drops the class). */
.pr-proof {
  display: none;
}

.pr-symbol .pr-proof {
  display: block;
  position: absolute;
  z-index: 2;
  /* A chip, not a band: at full picture width the notice covered
     almost the whole frame and read as the template banner Martin took
     away (U12; critic round 3, both lenses). fit-content inside the
     same insets keeps place, colour and wording and gives back the
     picture. Identical on all three sites (spec A12). */
  inset-inline: 0.6rem;
  inset-block-end: 0.6rem;
  inline-size: fit-content;
  max-inline-size: calc(100% - 1.2rem);
  margin-inline: auto;
  padding: 0.5rem 0.7rem;
  border-radius: 3px;
  background: var(--pr-color-deep);
  color: var(--pr-bright);
  font-family: var(--pr-font);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
}

html[data-pr]:not([data-marks="off"]) .pr-symbol .pr-proof {
  display: none;
}

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

/* on the full-bleed place band the strip is a compact label instead
   of a viewport-wide bar, parked in the top right corner so it never
   crosses the title sign that sits in the lower left of the picture;
   the whole band stays the button */
.placeband .pr-strip,
.strip .pr-strip {
  inset-block: 0.75rem auto;
  inset-inline: auto 0.75rem;
  translate: none;
  inline-size: fit-content;
  white-space: nowrap;
  padding-inline: 1.6rem;
}

/* below the desktop switch point the phone tag sits along the right
   edge; the strip steps aside so the two never overlap */
@media (max-width: 62.4375em) {
  .placeband .pr-strip,
  .strip .pr-strip {
    inset-inline-end: 3.9rem;
  }
}

/* ---------- typed text never breaks the layout --------------- */

/* Every field a visitor can type into carries data-edit, so the guard
   sits here once instead of on six element types. A pasted URL or a
   held-down key has no break opportunity, and the widest word sets the
   min-content size of its grid cell: without this the title sign grew
   to 1742px at a 390px viewport. "anywhere" rather than "break-word"
   because only it also shrinks that min-content size. Normal text is
   untouched: this rule applies solely where a word cannot fit, and the
   hyphens rules of site.css keep their precedence over it. */
[data-edit] {
  overflow-wrap: anywhere;
}

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

/* Collapsed, not display:none: removing a dozen marks at once would
   shorten the page by hundreds of pixels in one frame. Animating the
   collapse (globally forced instant under prefers-reduced-motion,
   site.css base rule) turns that into a visible fold instead of a
   snap. visibility, added in round 2, is what takes the collapsed
   buttons out of the accessible tree as well: a zero-height button at
   opacity 0 was still reachable by keyboard and still read out as
   "Text aendern" over a page that shows no such thing. */
html[data-marks="off"] .pr-mark {
  max-block-size: 0;
  margin-block: 0;
  padding-block: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

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

html[data-marks="off"] .pr-zone--row {
  padding-block-start: 0;
}

/* ---------- 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: 40;
    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; the phone
     tag on the right edge would poke through the sheet, so it steps
     back for the editing span */
  body.pr-panel-open .etikett {
    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;
}

@media (width < 62.5em) {
  .pr-fab { --pr-fab-lift: 4rem; }
}
/* ===== 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;
  }
}