/* =============================================================
   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 symbolic-portrait treatment. It is deliberately foreign to
   the site beneath it, like a correction pen on a printed layout:
   its own colour (a proofing magenta that appears in none of the
   three site palettes and never changes with them), its own type
   (a small system sans, never the site's Hanken Grotesk), 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.
   ============================================================= */

:root {
  /* fixed across all three site palettes, by decision 53 */
  --pr-color: oklch(0.46 0.17 340);
  --pr-color-deep: oklch(0.39 0.17 340);
  --pr-bright: oklch(0.975 0.006 340);
  --pr-ink: oklch(0.3 0.05 335);
  --pr-paper: oklch(0.975 0.005 340);
  --pr-line: oklch(0.87 0.02 340);
  --pr-dash: oklch(0.46 0.17 340 / 0.55);
  --pr-shade-strong: oklch(0.27 0.02 330 / 0.28);
  --pr-shade-soft: oklch(0.27 0.02 330 / 0.14);
  --pr-font: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@supports not (color: oklch(0 0 0)) {
  :root {
    --pr-color: #902275;
    --pr-color-deep: #750f5e;
    --pr-bright: #f9f2f6;
    --pr-ink: #3d2438;
    --pr-paper: #faf5f8;
    --pr-line: #decfd8;
    --pr-dash: rgba(144, 34, 117, 0.55);
    --pr-shade-strong: rgba(48, 40, 47, 0.28);
    --pr-shade-soft: rgba(48, 40, 47, 0.14);
  }
}

/* ---------- handover line ------------------------------------

   Since 27.08.2026 the bar carries nothing but the sentence that makes this
   a draft rather than a website. It has to stay (the draft notice is a legal
   requirement of the project, and it belongs at the top where it is read
   first), but it used to carry the controls as well, and those scrolled out
   of sight with it: after the first screen nothing said the page could be
   edited at all (operator). They now live in the pencil button at the foot
   of the screen, which never leaves. Centred to the same measure as every
   section on the site (--pad, --maxw from site.css). */

.pr-bar {
  background: var(--pr-paper);
  color: var(--pr-ink);
  border-block-end: 2px solid var(--pr-color);
  font-family: var(--pr-font);
}

.pr-bar__note {
  max-inline-size: var(--maxw, 76rem);
  margin-inline: auto;
  padding-block: 0.45rem;
  padding-inline: var(--pad, 1.5rem);
  font-size: 0.8rem;
  line-height: 1.4;
  -webkit-hyphens: manual;
  hyphens: manual;
}

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

.pr-bar__note a {
  color: inherit;
  text-decoration-color: var(--pr-color);
  text-underline-offset: 0.2em;
}

/* ---------- the pencil: the way into the tool ----------------

   A round button at the foot of the screen, fixed, so it is on every screen
   of every page and not only on the first. The ring that grows out of it
   every few seconds is the whole of the animation: it says the button is
   live: a sonar ring that expands and fades on the ease-out curve the
   pattern is known by (chat-widget/ping canon), with a rest phase inside
   each cycle so it reads as an invitation, not an alarm. The button itself
   never moves: a tap target that breathes is harder to hit and made
   automated clicks flag it as unstable (27.08.2026). The first cut ran the
   ring at 0.5 opacity and measured a peak frame delta of 13/255, invisible
   in practice (operator report, 27.08.2026); the ring is deliberately
   strong now. It stops while the box is open, on hover and on focus, and
   there is no motion at all for a visitor who asked for less.

   z-index 45 puts it above the site (the masthead sits at 10, the seal on
   the start page at 1) 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));
  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;
}

/* Below 960px the site pins its contact dock to the foot of the screen
   (site.css .dock, 4.2rem plus the safe area); the pencil moves up by that
   much so it never lies on the request button. */
@media (max-width: 59.99em) {
  .pr-fab {
    inset-block-end: calc(1rem + 4.2rem + 1px + env(safe-area-inset-bottom, 0px));
  }
}

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

/* The pencil owns the bottom right corner of the screen, and the seal on the
   start page lies at the bottom right of the stage. On a short screen that is
   the same corner, because the stage still reaches down past the fold, and the
   two met (613x547 and three other sizes, 27.08.2026).

   Vertical clearance cannot settle it: how far down the stage reaches depends
   on the viewport, so there is no distance that always works. Horizontal
   clearance can, because the stage never moves sideways. Scrolling cannot
   bring the two together either, since the stage only ever travels up from
   where it starts: the seal's lowest point on the screen is the one it has on
   arrival.

   So the stage's right gutter is widened to hold the pencil, which moves the
   content edge left and takes the seal with it. Done on the gutter rather than
   on the seal itself, because the title panel measures its own lane against
   that same content edge (site.css): move only the seal and it walks straight
   into the panel instead, one rule fixing one collision by causing another.
   The picture is unaffected, it spans the full bleed and ignores the gutters.

   This lives in the tool layer, not in site.css, because it is the pencil that
   needs the room: without this file the finished site keeps its own geometry. */
html[data-pr] .stage {
  grid-template-columns:
    [full-start] minmax(var(--pad), 1fr)
    [content-start] minmax(0, var(--maxw))
    [content-end] minmax(max(var(--pad), 5.5rem), 1fr)
    [full-end];
}

.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 the button 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 button's label: a plain text node has no state of its own,
   so it read "ausblenden" even when data-marks="off" had already been
   restored synchronously by the boot snippet, for the whole span between
   first paint and tool.js running (critic, acceptance round 3). Two spans
   switched by an attribute selector on <html>, one hidden by default,
   means the label is correct from first paint with no JavaScript in the loop at
   all: applyMarks() in js/tool.js only ever sets/removes data-marks now,
   it no longer touches the button's text. Hiding via the hidden attribute
   (not display:none alone) also keeps the inactive span out of the
   accessible name, the same property that ruled out a CSS content-only
   swap for this button (round 3 note: font-size/color leave text in the
   accessible name, hidden does not). */
.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;
}

/* ---------- bar buttons ------------------------------------- */

.pr-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border: 1.5px solid var(--pr-color);
  border-radius: 999px;
  background: transparent;
  color: var(--pr-color);
  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);
  /* without JavaScript there is nothing to switch; keeping the space
     (not display:none) keeps CLS at zero, same as the palette control */
  visibility: hidden;
}

/* 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);
  color: var(--pr-bright);
}

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

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

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

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

.palette--on {
  visibility: visible;
}

/* In the box the label is a real label, not a screen-reader-only one: there
   is room for it, and three coloured dots on their own say nothing. */
.palette__label {
  flex-basis: 100%;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.palette__btn {
  position: relative;
  /* 24px, matching the layer's own 24px minimum touch-target rule
     (spec 5); WCAG 2.5.8 was already met through the ::after hit area
     alone, but the visible dot should not fall short of the layer's own
     number (critic, acceptance round 2) */
  inline-size: 1.5rem;
  block-size: 1.5rem;
  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; the 18.08. version split the same rectangle in half
   and read as a small national flag (point 6, interaction test) */
.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 0.8rem 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 swatch colours mirror site.css exactly: each button shows the
   concept's own paper anchor as the ring ground and its own accent as the
   dot, so the picker previews the real palette instead of an invented one */
.palette__btn--salbei {
  --sw-paper: oklch(0.978 0.007 168);
  --sw-seal: oklch(0.515 0.132 258);
}

.palette__btn--kreide {
  --sw-paper: oklch(0.978 0.005 95);
  --sw-seal: oklch(0.470 0.105 158);
}

.palette__btn--porzellan {
  --sw-paper: oklch(0.977 0.006 248);
  --sw-seal: oklch(0.455 0.125 322);
}

@supports not (color: oklch(0 0 0)) {
  .palette__btn--salbei { --sw-paper: #f4f9f7; --sw-seal: #3366b2; }
  .palette__btn--kreide { --sw-paper: #f9f8f4; --sw-seal: #0e6c43; }
  .palette__btn--porzellan { --sw-paper: #f4f8fb; --sw-seal: #763b7f; }
}

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

/* The mark sits over its zone, and the zone reserves its place as padding.

   It used to be a real button in the flow, which is what kept it from
   overlapping the page (the 18.08. trouble), but it also made it the first
   in-flow child of a column: a zero-height flex box in the hidden state, whose
   baseline then became the column's baseline. The two columns of a section
   therefore lined up at the top instead of on their first line, and the
   baseline alignment in site.css never got to do anything (endcheck 27.08.,
   seven sections off by up to 67px).

   Out of the flow it cannot supply a baseline at all, so the column's first
   baseline is its first line of text again. The place it used to occupy is now
   padding on the zone, 2.75rem of button plus the 0.9rem it kept below itself,
   and padding animates, so hiding the marks still folds the page up instead of
   snapping it. Zones whose mark lives in a band of its own (the full-bleed
   pictures) are untouched: they have no mark as a direct child. */
/* --zone-pad is the padding a zone owns BY DESIGN, independent of the tool:
   a zone that is itself a padded container (the page heads, the stage panel)
   declares it in site.css. Editing on reserves that value plus the button
   row; editing off returns to the design value, NOT to zero. The first cut
   forced zero and thereby erased the designed head padding of every inner
   page in the delivered view, while the editing view showed 3.65rem - the
   asymmetry Martin reported on 27.08.2026. */
.pr-zone:has(> .pr-mark) {
  position: relative;
  padding-block-start: calc(var(--zone-pad, 0rem) + 3.65rem);
  transition: padding-block-start 220ms var(--ease-out, ease-out);
}

html[data-marks="off"] .pr-zone:has(> .pr-mark) {
  padding-block-start: var(--zone-pad, 0rem);
}

.pr-zone > .pr-mark {
  position: absolute;
  inset-block-start: var(--zone-pad, 0rem);
  inset-inline-start: 0;
  margin-block-end: 0;
}

.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;
  /* 0.9375rem top and bottom brings the button to a 44px block size
     against the 14px icon (spec 5's own 44x44 minimum): the earlier
     0.68rem landed at 36px tall (critic, acceptance round 2). */
  padding-block: 0.9375rem;
  padding-inline: 0.9rem 1.05rem;
  border: 0;
  border-radius: 999px;
  background: var(--pr-color);
  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),
    margin-block 220ms var(--ease-out, ease-out),
    padding-block 220ms var(--ease-out, ease-out),
    visibility 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");
}

/* the button is already 44px tall on its own now; this adds a further
   5px top and bottom so the touch target clears it with room to spare */
.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;
}

/* pictures draw the line inside their own frame */
html[data-pr] .herostrip.pr-zone,
html[data-pr] .strip.pr-zone,
html[data-pr] .pr-photo.pr-zone {
  outline-offset: -10px;
}

/* This site has no .wrap-equivalent utility of its own (site.css centres
   each section through its own full-bleed grid instead), so the mark above
   a full-bleed band photo gets one here, aligned to the same --pad/--maxw
   measure as .pr-bar__row above. Own place in the flow, not layered over
   the picture: same rule as every other mark (spec block 1). */
.pr-band {
  max-inline-size: var(--maxw, 76rem);
  margin-inline: auto;
  padding-inline: var(--pad, 1.5rem);
  padding-block-start: 0.9rem;
}

/* On the start page the band photo became a stage on 25.08.2026: the title
   panel and the seal now lie on it, and the mark lies on it too instead of
   sitting above it on a strip of paper. Its stand-alone geometry (a max width
   plus its own inline padding) would centre it as a grid item and land the
   button a gutter inside the content edge, out of line with the panel right
   below it. Inside the stage it borrows the site's own three tracks and puts
   the button exactly where the panel starts, which also keeps it clear of the
   seal's mark on the opposite edge. */
.stage .pr-band {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--pad), 1fr)
    [content-start] minmax(0, var(--maxw))
    [content-end] minmax(var(--pad), 1fr)
    [full-end];
  inline-size: 100%;
  max-inline-size: none;
  margin-inline: 0;
  padding-inline: 0;
}

.stage .pr-band > .pr-mark {
  grid-column: content-start / content-end;
  justify-self: start;
}

/* The band is a positioning device, nothing else: it spans the full width of
   the stage so its button can sit exactly on the content edge. Until
   25.08.2026 it also swallowed every click in that strip, the seal's button
   on the opposite edge included, because it lies above it (elementFromPoint
   returned pr-band at every width from 320 to 1280). The container itself
   now takes no pointer events; only its button does, and only while the
   editing layer is showing, so with the layer hidden the strip is as
   transparent to the mouse as it looks. Keyboard focus never depended on
   this and is untouched. */
.stage .pr-band {
  pointer-events: none;
}

html[data-pr]:not([data-marks="off"]) .stage .pr-band > .pr-mark {
  pointer-events: auto;
}

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

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

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

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

  .pr-btn:not(.pr-btn--solid):hover {
    background: var(--pr-color);
    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 (point 2): 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;
}

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

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

/* The whole picture is the control, not just the strip along its foot
   (point 1, heaviest interaction-test finding: only the thin magenta
   bar answered a tap). A plain button reset, block-level so it fills
   the figure; the proof band and strip inside are non-interactive labels,
   positioned exactly as before against this element's ancestor
   .pr-photo (position: relative). */
.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);
  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;
}

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

/* An emptied field keeps its place instead of vanishing (point 2):
   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 in js/tool.js);
   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 (point 8, interaction test): removing
   roughly a dozen marks at once used to shorten the page by ~700px 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, not opacity alone: a transparent button is still a button to a
   screen reader, and thirteen of them read out "Text aendern" over a page that
   shows no such thing (endcheck 27.08.). visibility takes it out of the
   accessible tree and out of the tab order at once, and because it is animated
   it only flips once the fold has finished, so the collapse still shows. */
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;
}

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

@media (max-width: 47.9375em) {
  /* Bottom sheet on the phone-width channel: the panel used to push the
     zone's own content down by its own height, which could shove the
     just-edited text below the fold before the visitor ever saw it
     change (point 5, interaction test). Anchored to the foot of the
     screen instead, 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, so quick
     contact is not lost while the fixed bar underneath is hidden */
  body.pr-panel-open .actionbar {
    display: none;
  }
}

/* ---------- editing panel, desktop width ---------------------- */

@media (min-width: 48em) {
  /* At 48em and up the panel stayed a plain in-flow block with no height
     limit of its own: a zone with many fields (the FAQ list, the seven
     services) could open a panel over 2000px tall, and the zone's actual
     content sat below that whole height, past the fold, so the person
     typing the sixth answer never saw it change (critic's Auflage,
     acceptance round 2: 12 of 25 zones showed zero target fields at
     1440x960). Capping the panel's own height and giving it its own
     scrollbar is the same fix the phone width already applies through
     its fixed sheet, just without the fixed position: the panel now
     never pushes the zone's content more than 60vh away, so the live
     edit stays reachable within a scroll or two instead of a scroll
     past the whole panel. js/tool.js scrolls the zone (and so the mark
     that opened it) to the top of the viewport on open, so that budget
     starts from the top of the screen rather than wherever the mark
     happened to sit. */
  .pr-panel {
    max-block-size: 60vh;
    overflow-y: auto;
  }
}

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

/* Native <dialog>, not window.confirm() (point 7): 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 (unlike the
     .pr-panel div above); without an explicit override that default,
     not the deliberately flat/shadow 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;
}
/* ===== 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;
  }
}