/* =============================================================
   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
   notice bar, the pencil button, the editing box, 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
   slate grey, #738491, that appears in none of the three site
   palettes and never changes with them: decision 53, colour set by
   Martin in round 3, 01.09.2026, points 8 to 14), its own
   type (a small system sans, not Plex), and soft shadows so
   every control visibly floats above the page. Removing this
   file and js/tool.js yields the finished site. Mechanics
   brought to parity with the sister site 30.08.2026: the bar
   carries only the notice, every control lives in the box
   behind the pencil at the foot of the screen.
   ============================================================= */

:root {
  /* Fixed across all three site palettes (decision 53), never hung on
     data-palette (Martin, point 14). Martin's slate grey with a cool
     cast, points 8 and 9. Two steps, not one, the same pattern as
     elektromeier (decision 78): #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, strip and chip 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;
}

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

/* Since round 2 (30.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;
}

/* ---------- 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 stage, the footer and the anthracite palette
   (point 9). z-index 46 puts it 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: 46;
  inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
  /* above the permanent action bar (site.css .actionbar: 48px tall,
     0.75rem off the edge) with 1rem of air, on every viewport */
  --pr-fab-lift: 3.75rem;
  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 the 56px button lay over the firm's own first screen: at
   320 it covered the values line of the hero, at 390 the h2 under it
   (critic round 3, owner lens). 48px is still a full tap target and
   frees the text column. */
@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(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; 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;
}

/* a switch at the end of its range (no seventh team member, no minus
   first) stays where it is and says so, rather than disappearing */
.pr-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.pr-btn:disabled:active {
  translate: none;
}

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

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

/* the three colour worlds of this site: paper and primary of each,
   Martin's hex values (01.09.2026) */
.palette__btn--blau { --sw-paper: #F7F6F2; --sw-seal: #294E73; }
.palette__btn--anthrazit { --sw-paper: #F6F5F1; --sw-seal: #292B2C; }
.palette__btn--braun { --sw-paper: #F6F1E9; --sw-seal: #694B38; }

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

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

/* the 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-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);
  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. A plain button reset, block-level so it fills the figure;
   the proof chip 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;
}

/* Pale, not tinted (Martin round 3, point 7; Rolf, decision E1): the
   picture in its natural colours at half opacity over the site's own
   paper tone, so no colour ever lies over a face or skin, and the
   pallor follows whichever palette is active. Half opacity is the
   upper, still legible end of the ghost-placeholder range, so it
   reads unmistakably as a stand-in without losing the face. */
/* 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 {
  inline-size: 100%;
  opacity: 0.5;
}

/* The proof chip: the marking that the portrait is a symbolic picture
   and the request to replace it, in one line, as a request (Martin,
   01.09.: people find it hard to say no to "bitte"). It belongs to the
   pale treatment, not to the removable marks: it stays when the marks
   are hidden (the marking is legally motivated, decisions 56 and 63)
   and needs no JavaScript, since the class ships in the static HTML.
   Drawn in the layer's colour because the sentence is pronta's, not
   the firm's (decision 53), on its own opaque field so it stays
   legible over any motif; flat against the picture, so no shadow. It
   disappears together with the pallor 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 94
     percent of the frame, broke over two lines and lay across the
     hands of the person, which is 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. */
  inset-inline: 0.6rem;
  inset-block-end: 0.6rem;
  inline-size: fit-content;
  max-inline-size: calc(100% - 1.2rem);
  margin-inline: auto;
  text-wrap: balance;
  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;
  pointer-events: none;
}

/* The compact team card (Martin U23) is a third of the owner portrait
   wide; at the chip's full size the marking would swallow the face and
   read as the template banner Martin took away. Same wording, same
   colour, same place, one notch smaller. */
.team__card .pr-symbol .pr-proof {
  inset-inline: 0.35rem;
  inset-block-end: 0.35rem;
  max-inline-size: calc(100% - 0.7rem);
  padding: 0.35rem 0.4rem;
  font-size: 0.68rem;
  line-height: 1.3;
}

/* while the marks are shown the strip takes over at the same place */
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;
}

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

/* ---------- pronta note inside the firm's flow ---------------- */

/* A short remark of pronta's standing in the firm's own layout (the
   form preview note, spec A9): the layer's system sans and colour with
   a short rule above, no field, so it reads as a note from the tool
   and never as a sentence of the firm. Without this file it is a
   plain small paragraph and says the same. */
.pr-note {
  font-family: var(--pr-font);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--pr-color-deep);
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* A hairline, not a bar: at 2px over 2rem the tool's own note pulled
   more attention than the firm's privacy line right above it (critic
   round 3, customer lens). Same colour, same place, a third of the
   ink. */
.pr-note::before {
  content: "";
  display: block;
  inline-size: 1.5rem;
  block-size: 1px;
  margin-block-end: 0.5rem;
  background: var(--pr-color);
}

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

/* ---------- blocks the operator can take away ---------------- */

/* One generic mechanic (spec A1): the boot script writes the hidden
   keys onto <html> before first paint, so a removed block never
   occupies a frame and costs no layout shift. While the editing layer
   is shown, a hidden block stays in place at reduced opacity, so the
   switch in the editing panel has something to point at and the
   operator sees what would come back. The keys are written out rather
   than matched generically because CSS cannot compare two attributes,
   and the pre-paint rule is what keeps this free of layout shift. */
html[data-hidden~="hours"] [data-hideable="hours"],
html[data-hidden~="mail"] [data-hideable="mail"] {
  display: none;
}

html[data-hidden~="hours"]:not([data-marks="off"]) [data-hideable="hours"],
html[data-hidden~="mail"]:not([data-marks="off"]) [data-hideable="mail"] {
  display: revert;
  opacity: 0.45;
}

/* ---------- how many people stand in the team ----------------- */

/* Round 8 (Martin, issue 65): how many team cards there are is the
   operator's to say, from nought to six (U20 is the ceiling). The
   number lives in localStorage and the boot snippet writes it onto
   <html> before first paint, exactly like the removals above, so a card
   that was taken away never occupies a frame. Only the counts below the
   two delivered cards need a rule here; more cards are built by
   js/tool.js, which only runs where the layer runs at all, and a reader
   without JavaScript always sees the two delivered ones. At nought the
   whole section goes, and while the editing layer is shown it stays in
   place, faded, so the panel that puts the people back still has
   somewhere to be opened from. This one number replaces the per-card
   and whole-section switches of spec A1: two ways of emptying the same
   section contradicted each other as soon as both were used. */
html[data-team="0"] .section:has(.team) {
  display: none;
}

html[data-team="0"]:not([data-marks="off"]) .section:has(.team) {
  display: revert;
  opacity: 0.45;
}

html[data-team="0"] .team,
html[data-team="1"] .team__card:nth-child(n + 2) {
  display: 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: 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;
  }
}

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