/* ══ DAS DRUCKFENSTER ══════════════════════════════════════════════
   Aus dem Prototyp V3 übernommen (Zeilen 3736–4285; js/print/).
   Ruhiger grauer Grund über der ganzen Fläche — vom Kontaktbogen dahinter
   ist nichts mehr zu sehen —, das Blatt in der Mitte, links die
   Bilderspalte, rechts eine schmale weiße Spalte mit den wenigen
   Entscheidungen. Die Spalte spricht die Sprache der Aufklappmenüs: kein
   Kasten um ein Wort, sondern Schrift, die heller steht, solange sie
   nicht gewählt ist. Gewähltes wird schwarz — und sonst nichts. */
#dfenster {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  background: #d4d4d7;
  font-family: var(--sans);
}
#dfenster .df-esc {
  position: fixed;
  left: 14px;
  top: 14px;
  z-index: 5;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--zeichen-hinaus);
  transition: color 0.12s;
}
#dfenster .df-esc:hover {
  color: var(--black, #000);
}

/* ── DIE BILDERSPALTE ───────────────────────────────────────────
   Links, breit genug, dass man die Bilder ERKENNT — hier wird
   ausgewählt. Ihre weiße Fläche reicht bis an die Oberkante, und das
   Kreuz zum Verlassen steht darin. Das Polster oben hält die Bilder
   unter dem Kreuz; gerollt wird darunter hindurch (die Kappe liegt
   davor). Die Leiste des Browsers ist weg — an ihrer Stelle steht eine
   eigene (.df-bib-leiste). */
#dfenster .df-bib {
  width: var(--bibw, 236px);
  flex: none;
  background: var(--white, #fff);
  padding: 62px 14px 24px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#dfenster .df-bib::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
/* Die weiße Kappe über den obersten 62 Punkten der Spalte: ohne sie
   liefen die Bilder beim Rollen hinter dem Kreuz durch. Sie fängt auch
   die Klicks ab — was man nicht sieht, soll man nicht treffen. */
#dfenster .df-bib-kappe {
  position: absolute;
  left: 0;
  top: 0;
  height: 62px;
  width: var(--bibw, 236px);
  background: var(--white, #fff);
  z-index: 4;
}
/* Die eigene Rollleiste: grau in Ruhe, schwarz unter der Hand. Sie liegt
   im rechten Polster der Spalte und beginnt unter der Kopfzeile (top
   setzt print/library.js); rollt nichts, ist sie weg. */
#dfenster .df-bib-leiste {
  position: absolute;
  top: 62px;
  bottom: 8px;
  left: calc(var(--bibw, 236px) - 11px);
  width: 10px;
  z-index: 6;
}
#dfenster .df-bib-leiste.leer {
  display: none;
}
#dfenster .df-bib-leiste i {
  position: absolute;
  right: 3px;
  top: 0;
  width: 3px;
  height: 40px;
  border-radius: 2px;
  background: var(--light, #b0b0b0);
  transition:
    width 0.12s,
    right 0.12s,
    background 0.12s;
}
#dfenster .df-bib-leiste:hover i,
#dfenster .df-bib-leiste.zieht i {
  width: 5px;
  right: 2px;
  background: var(--black, #000);
}
/* Zwischen zwei Tagen eine dünne Linie, mittig in viel Luft — sie gehört
   zum oberen Tag, so beginnt jeder Abschnitt mit seinem ersten Bild. Die
   Luft wächst mit den Karten (--rf). */
#dfenster .df-bib-tag::after {
  content: '';
  display: block;
  height: 1px;
  margin: calc(60px * var(--rf, 1)) 0;
  background: var(--light, #b0b0b0);
  opacity: 0.45;
}
#dfenster .df-bib-tag:last-child::after {
  content: none;
}
/* Der letzte Tag reicht mindestens bis unten — sonst ließe er sich nie
   an die Kopfzeile rollen. */
#dfenster .df-bib-tag:last-child {
  min-height: calc(100% - 28px);
}
/* Ein Tag, von dem die Sterne nichts übrig lassen, bleibt als schmale
   Zeile stehen und sagt, woran es liegt. */
#dfenster .df-bib-nichts {
  display: block;
  width: 100%;
  padding: 6px 0 2px;
  text-align: left;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--light, #b0b0b0);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.12s;
}
#dfenster .df-bib-nichts:hover {
  color: var(--black, #000);
}
/* ── DIE KOPFZEILE ─────────────────────────────────────────────
   EINE Zeile für die ganze Spalte, unter dem Kreuz: Datum, Sterne,
   Anzahl, Markieren, Holen. Sie klebt (sticky misst vom Inneren des
   Rollkastens: 0, nicht 62) und bricht bei schmaler Spalte um. */
#dfenster .df-bib-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  position: sticky;
  top: 0;
  background: var(--white, #fff);
  padding: 2px 0 10px;
  z-index: 5;
}
#dfenster .df-bib-datum {
  font-size: 11px;
  letter-spacing: 0.13em;
  color: var(--black, #000);
  white-space: nowrap;
}
#dfenster .df-bib-zahl {
  font-size: var(--t-nummer-groesse);
  color: var(--mid, #686868);
  margin-left: auto;
}
#dfenster .df-bib-holen,
#dfenster .df-bib-marke {
  background: none;
  border: none;
  padding: 0;
  line-height: 0;
  cursor: pointer;
  color: var(--mid, #686868);
  transition: color 0.12s;
}
#dfenster .df-bib-holen:hover,
#dfenster .df-bib-marke:hover {
  color: var(--black, #000);
}
#dfenster .df-bib-marke svg {
  width: 16px;
  height: 16px;
  display: block;
}
#dfenster .df-bib-holen svg,
#dfenster .df-bib-marke svg {
  stroke-width: 1.93;
}
#dfenster .df-bib-marke.an {
  color: var(--black, #000);
}
/* Die Sterne des Tages: dieselben drei wie am Tagesfeld, mit demselben
   Stand — grau, schwarz, soweit sie gelten. */
#dfenster .df-bib-sterne {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}
#dfenster .df-bib-sterne button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  background: none;
  line-height: 0;
  cursor: pointer;
  color: var(--light);
  transition: color 0.12s;
}
#dfenster .df-bib-sterne button:hover {
  color: var(--mid, #686868);
}
#dfenster .df-bib-sterne button.an {
  color: var(--black, #000);
}
#dfenster .df-bib-sterne button svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#dfenster .df-bib-leer {
  font-size: 10px;
  color: var(--light, #b0b0b0);
  letter-spacing: 0.1em;
}
/* Die Karte: das Bild, darunter eine Zeile mit Nummer und Sternen
   (--df-fuss). Gewählt trägt sie den gezeichneten roten Rahmen des
   Tagesfelds, 1,8-fach, mit der Karte wachsend. */
#dfenster .df-bild {
  position: relative;
  line-height: 0;
  cursor: pointer;
  margin-bottom: 7px;
  --df-fuss: calc(18px * var(--rf, 1));
  transition: opacity 0.12s;
}
#dfenster .df-bild img {
  width: 100%;
  height: auto;
  display: block;
  outline: 1px solid transparent;
  transition: outline-color 0.12s;
}
#dfenster .df-bild:hover img {
  outline-color: var(--light);
}
#dfenster .df-bild.markiert::after {
  content: '';
  position: absolute;
  inset: 0 0 var(--df-fuss, 0px) 0;
  border-style: solid;
  border-color: var(--red);
  border-top-width: calc(var(--bt, 3px) * 1.8 * var(--rf, 1));
  border-right-width: calc(var(--br, 4px) * 1.8 * var(--rf, 1));
  border-bottom-width: calc(var(--bb, 5px) * 1.8 * var(--rf, 1));
  border-left-width: calc(var(--bl, 2px) * 1.8 * var(--rf, 1));
  z-index: 3;
  pointer-events: none;
}
/* Das Markierzeichen oben rechts: da, sobald der Zeiger auf der Karte
   liegt, rot, wenn gewählt. */
#dfenster .df-bild .df-bild-marke {
  position: absolute;
  top: calc(8px * var(--rf, 1));
  right: calc(8px * var(--rf, 1));
  z-index: 4;
  padding: 0;
  line-height: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--white, #fff);
  opacity: 0;
  transition:
    opacity 0.15s,
    color 0.15s;
  filter: var(--griff-saum);
}
#dfenster .df-bild:hover .df-bild-marke {
  opacity: 1;
}
#dfenster .df-bild .df-bild-marke svg {
  display: block;
  width: calc(18px * var(--rf, 1));
  height: calc(18px * var(--rf, 1));
}
#dfenster .df-bild.markiert .df-bild-marke {
  color: var(--red);
  filter: none;
}
#dfenster .df-bild.markiert .df-bild-marke svg {
  stroke-width: 2.4;
}
/* Beim Setzen der Marke blitzt das Bild kurz rot auf — nur von der Hand
   (history/marks.js), nie vom Neubau. */
@keyframes df-blitz {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 0.62;
  }
  100% {
    opacity: 0;
  }
}
#dfenster .df-bild.blitzt::before {
  content: '';
  position: absolute;
  inset: 0 0 var(--df-fuss, 0px) 0;
  background: var(--red);
  z-index: 4;
  pointer-events: none;
  animation: df-blitz 0.5s ease-out forwards;
}
/* Eine bloße Vorschau tritt zurück, und sie atmet, solange geholt wird —
   wie im Kontaktbogen. */
#dfenster .df-bild.vorschau,
#dfenster .df-bild.vorschau:hover {
  opacity: 0.5;
}
#dfenster .df-bild.laedt,
#dfenster .df-bild.laedt:hover {
  animation: cv-atmen 1.6s ease-in-out infinite;
}
/* Die Zeile unter dem Bild: links die Nummer wie auf dem Blatt (die
   Raute mager und grau, die Zahl fett), mittig die Sterne. */
#dfenster .df-bild-fuss {
  position: relative;
  height: var(--df-fuss);
  line-height: 1;
  display: flex;
  align-items: center;
}
#dfenster .df-bild-nr {
  font-size: calc(10px * var(--rf, 1));
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--black, #000);
  white-space: nowrap;
}
#dfenster .df-bild-nr .druck-raute {
  font-weight: 400;
  color: var(--mid, #686868);
}
/* Nur die vergebenen Sterne; die Leiste fängt keinen Zeiger — ein Druck
   auf die Zeile fasst die Karte an wie das Bild. */
#dfenster .df-bild .sterne.st-bib {
  --sz: calc(9px * var(--rf, 1));
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
#dfenster .df-bild .sterne.st-bib .fig {
  color: var(--black, #000);
}
#dfenster .df-bild .sterne.st-bib.notiert .fig {
  color: var(--red);
}

/* Der Griff an der Kante der Spalte: sechs Punkte breit, unsichtbar, bis
   die Hand ihn sucht. Der Doppelpfeil ist gezeichnet (ui/cursors.js
   --df-waag) und gilt, solange gezogen wird, überall. */
#dfenster .df-bib-griff {
  flex: none;
  width: 6px;
  align-self: stretch;
  background: none;
  cursor: var(--df-waag) !important;
  transition: background 0.12s;
}
#dfenster .df-bib-griff:hover,
#dfenster .df-bib-griff.zieht {
  background: var(--light);
}
body.df-breit,
body.df-breit *,
body.df-breit #dfenster .df-blatt,
body.df-breit #dfenster .df-blatt.malt,
body.df-breit #dfenster .df-blatt.malt.radiert,
body.df-breit #dfenster .df-blatt.schreibt {
  cursor: var(--df-waag) !important;
}

/* ── DIE BÜHNE ─────────────────────────────────────────────────── */
#dfenster .df-buehne {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 26px 40px 26px;
}
#dfenster .df-blatt {
  display: block;
  background: var(--white, #fff);
  box-shadow: var(--schatten-schwebt);
  touch-action: none;
}
#dfenster .df-blatt.malt {
  cursor: crosshair;
}
/* Solange kein Blatt gesetzt ist, steht auf der Bühne nichts — liess es
   sich nicht setzen, sagt es die Bühne selbst, mit dem Weg, es noch
   einmal zu versuchen. */
#dfenster .df-buehne.ohne-blatt .df-blatt,
#dfenster .df-buehne.ohne-blatt .df-edit,
#dfenster .df-buehne.ohne-blatt .df-marke,
#dfenster .df-buehne.ohne-blatt .sterne,
#dfenster .df-buehne.ohne-blatt .df-blaettern {
  visibility: hidden;
}
#dfenster .df-nicht-gesetzt {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}
#dfenster .df-nicht-gesetzt p {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--mid, #686868);
}
#dfenster .df-blaettern {
  position: absolute;
  left: 74px;
  right: 26px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mid, #686868);
}
/* Mit einem Blatt steht keine Leiste da: display:flex stäche sonst das
   hidden des Skripts (in V3 stand sie immer da). */
#dfenster .df-blaettern[hidden] {
  display: none;
}
#dfenster .df-blaettern button {
  font: inherit;
  font-size: 15px;
  line-height: 1;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--light, #b0b0b0);
  cursor: pointer;
  transition: color 0.12s;
}
#dfenster .df-blaettern button:hover:not(:disabled) {
  color: var(--black, #000);
}
#dfenster .df-blaettern button:disabled {
  color: var(--zeichen-gesperrt);
  cursor: default;
}
/* ── DAS DATUM AUF DEM GRAUEN GRUND ──────────────────────────────
   Rollt in der Spalte ein neuer Tag an die Kopfzeile, blitzt sein Datum
   groß auf dem grauen Grund auf und vergeht (print/library.js). Ton in
   Ton: ein Zehntel dunkler als der Grund. Es liegt UNTER allem im Fenster
   und fängt keinen Zeiger. Größe und Ort setzt das Skript. */
#dfenster .df-tagblitz {
  position: absolute;
  left: 26px;
  top: 58px;
  z-index: -1;
  margin: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  white-space: pre;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 120px;
  line-height: 0.9;
  letter-spacing: 0;
  color: #bfbfc2;
  -webkit-text-stroke: 0.035em currentColor;
  opacity: 0;
}
/* Bleibt neben dem Blatt nur ein schmaler Streifen, läuft das Datum
   hochkant an der Spalte entlang — wie ein Buchrücken. */
#dfenster .df-tagblitz.hochkant {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ── DIE SEITENSPALTE ────────────────────────────────────────────── */
#dfenster .df-seite {
  width: var(--sw, 272px);
  flex: none;
  background: var(--white, #fff);
  padding: 62px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow-y: auto;
}
/* Die Überschrift einer Gruppe — wie .sec-label */
#dfenster .df-titel {
  font-size: var(--t-label-groesse);
  font-weight: var(--t-label-gewicht);
  letter-spacing: var(--t-label-sperrung);
  line-height: var(--t-label-zeilenhoehe);
  text-transform: uppercase;
  color: var(--light, #b0b0b0);
  margin-bottom: 9px;
  display: block;
}
/* Die Wählbaren — wie .chip: kein Rahmen, keine Fläche. Gewähltes wird
   schwarz und dick, ohne sich breiter zu machen: ein Strich um die
   Buchstaben statt eines fetteren Schnitts. */
#dfenster .df-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
}
#dfenster .df-chips button {
  font: inherit;
  font-size: var(--t-chip-groesse);
  font-weight: var(--t-chip-gewicht);
  color: var(--light, #b0b0b0);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  white-space: nowrap;
  transition: color 0.12s;
}
#dfenster .df-chips button:hover:not(:disabled):not(.an) {
  color: var(--mid, #686868);
}
#dfenster .df-chips button.an {
  color: var(--black, #000);
  -webkit-text-stroke: 0.4px currentColor;
}
#dfenster .df-chips button:disabled {
  color: var(--zeichen-gesperrt);
  cursor: default;
}
#dfenster .df-chips button.df-zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
}
/* ── DIE WERKZEUGE ──────────────────────────────────────────────
   Zeichnen und Schreiben untereinander und linksbündig, rechts daneben
   ihr Maß; das Zurücknehmen darunter an derselben Kante — eine Handlung,
   keine Wahl, und darum von Anfang an dunkler. */
#dfenster .df-werkzeuge {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 3px 10px;
  align-items: center;
  justify-items: start;
}
#dfenster .df-werkzeuge .df-zurueck {
  grid-column: 1;
  justify-self: start;
  margin-top: 2px;
}
#dfenster .df-werkzeuge .df-zurueck {
  color: var(--mid, #686868);
}
#dfenster .df-werkzeuge .df-zurueck svg {
  stroke: currentColor;
  stroke-width: 1.81;
  transition: stroke-width 0.13s;
}
#dfenster .df-werkzeuge .df-zurueck:hover:not(:disabled) {
  color: var(--black, #000);
}
#dfenster .df-werkzeuge .df-zurueck:hover:not(:disabled) svg {
  stroke-width: 2.64;
}
/* Der Schieber des Maßes — gebaut wie die Stiftgröße beim Anzeichnen:
   schmale Bahn, runder Griff, links vom Griff schwarz (--p). */
#dfenster .df-mass {
  -webkit-appearance: none;
  appearance: none;
  width: 60px;
  height: 14px;
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  --p: 25%;
}
#dfenster .df-mass::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--black, #000) 0 var(--p), var(--spur) var(--p) 100%);
}
#dfenster .df-mass::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--black, #000);
  border: none;
  box-shadow: none;
  margin-top: -4px;
}
#dfenster .df-mass::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: #d4d4d4;
}
#dfenster .df-mass::-moz-range-progress {
  height: 3px;
  border-radius: 2px;
  background: var(--black, #000);
}
#dfenster .df-mass::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--black, #000);
  border: none;
}
#dfenster .df-mass:focus {
  outline: none;
}
#dfenster .df-rad {
  position: relative;
  width: 100%;
  height: 46px;
}
/* Unten der Knopf, der die Sache tut — derselbe wie „generieren" —, und
   darunter die Zeile, die sagt, was geschieht. Ihr Platz ist FEST
   vergeben: zwei Zeilen Meldung passen hinein, mehr wird abgeschnitten,
   und der Knopf liegt immer an derselben Stelle. Eine Mindestbreite hält
   ihn still, wenn „sichern" zu „drucken" wird (V3 hat beide gemessen). */
#dfenster .df-fuss {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#dfenster .df-tun,
#dfenster .df-nicht-gesetzt button {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--white, #fff);
  background: var(--black, #000);
  border: none;
  cursor: pointer;
  padding: 0 26px;
  height: 32px;
  min-width: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: opacity 0.15s;
}
#dfenster .df-tun:hover,
#dfenster .df-nicht-gesetzt button:hover {
  opacity: 0.75;
}
#dfenster .df-tun:disabled {
  opacity: 0.4;
  cursor: default;
}
#dfenster .df-stand {
  margin-top: 10px;
  font-size: 11px;
  color: var(--light, #b0b0b0);
  height: 34px;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Solange der Editor arbeitet, tritt das Fenster zur Seite: es liegt auf
   z-index 1200 und deckte ihn sonst zu. Es wird nur versteckt, nicht
   geräumt. */
#dfenster.df-weg {
  display: none;
}

/* ── DIE KARTE IN DER HAND ───────────────────────────────────────
   Die kleine Vorschau selbst, mit Schatten; bewegt ausschließlich über
   transform (die Schleife in print/drag.js). Sie nimmt keine Zeiger an —
   sonst fände elementFromPoint immer nur sie. Der Platz, von dem sie
   kam, bleibt blass zu sehen. */
#dfenster .df-schleppe {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1400;
  width: 118px;
  height: auto;
  pointer-events: none;
  opacity: 0.94;
  border-radius: 1px;
  box-shadow: var(--schatten-traegt);
}
#dfenster .df-bild.abgehoben {
  opacity: 0.3;
  transition: opacity 0.16s ease;
}

/* ── DIE KACHELN BEIM UMORDNEN ──────────────────────────────────
   Jeder Platz des Blattes liegt während des Umordnens als Kachel über der
   Leinwand. Die ruhenden rutschen mit einem Übergang auf ihre neuen
   Plätze, die getragene bewegt die Schleife. */
#dfenster .df-kachel {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
#dfenster .df-kachel.hebt {
  transition: none;
  z-index: 7;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.18);
}
#dfenster .df-kachel.legt {
  z-index: 7;
  transition:
    transform 0.32s cubic-bezier(0.3, 0.9, 0.5, 1),
    box-shadow 0.32s ease;
}
#dfenster .df-buehne.ordnet .df-edit {
  opacity: 0;
  transition: opacity 0.14s ease;
}
#dfenster .df-buehne.ordnet .df-marke {
  opacity: 0;
  transition: opacity 0.14s ease;
}
#dfenster .df-kachel.geht {
  transition:
    transform 0.3s cubic-bezier(0.32, 0.94, 0.6, 1),
    opacity 0.3s ease;
  opacity: 0;
  z-index: 7;
}

/* ── DIE ZEICHEN AUF DEM BILD ───────────────────────────────────
   Marke und Stift oben rechts im Bild, schwarz und blank, auf dunklem
   Grund weiß — welches, sagt die gemessene Helligkeit darunter. Größe und
   Abstand kommen aus dem Bild. Liegt ein Werkzeug in der Hand, fangen sie
   keinen Klick (stumm). */
#dfenster .df-marke {
  position: absolute;
  z-index: 4;
  padding: 0;
  line-height: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--black, #000);
  opacity: 0.92;
  transition:
    opacity 0.15s,
    color 0.15s;
}
#dfenster .df-marke:hover {
  opacity: 1;
}
#dfenster .df-marke svg {
  display: block;
}
#dfenster .df-marke.an {
  color: var(--red);
}
#dfenster .df-marke.hell:not(.an) {
  color: var(--white, #fff);
}
#dfenster .df-marke.stumm {
  pointer-events: none;
}
#dfenster .df-buehne.ordnet .df-marke {
  opacity: 0;
}
/* Die Sterne unter dem Bild, mittig in der Zeile der Nummer und so klein
   wie sie; nur neben einer langen Nummer beginnen sie an deren Ende. */
#dfenster .sterne.st-blatt {
  --sz: 12px;
  z-index: 4;
  transform: translateX(-50%);
  opacity: 0.92;
  transition: opacity 0.15s;
}
#dfenster .sterne.st-blatt.links {
  transform: none;
}
#dfenster .sterne.st-blatt .fig {
  color: var(--black, #000);
}
#dfenster .sterne.st-blatt.hell .fig {
  color: var(--white, #fff);
  filter: var(--griff-saum);
}
#dfenster .sterne.st-blatt.stumm {
  pointer-events: none;
}
#dfenster .df-buehne.ordnet .sterne.st-blatt {
  opacity: 0;
}
#dfenster .df-edit {
  position: absolute;
  z-index: 4;
  padding: 0;
  line-height: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--black, #000);
  opacity: 0.92;
  transition: opacity 0.15s;
}
#dfenster .df-edit:hover {
  opacity: 1;
}
#dfenster .df-edit svg {
  display: block;
  transition: stroke-width 0.13s ease;
}
#dfenster .df-edit:hover svg {
  stroke-width: var(--z-hand, 1.75);
}
#dfenster .df-edit.hell {
  color: var(--white, #fff);
}
#dfenster .df-edit.stumm {
  pointer-events: none;
}

/* ── VON HAND ────────────────────────────────────────────────────
   Geschrieben wird DIREKT auf dem Blatt: das Feld ist unsichtbar, zu
   sehen ist nur die Schrift. Die Hülle trägt Ort, Schrift und Neigung;
   der Schreibstrich ist ein eigener, so stark wie die Schrift. */
#dfenster .df-schreibt {
  position: fixed;
  z-index: 8;
  color: var(--rot-stift);
  line-height: normal;
  white-space: nowrap;
  transform-origin: left bottom;
}
#dfenster .df-feld {
  display: inline-block;
  min-width: 4px;
  white-space: pre;
  caret-color: transparent;
  background: none;
  border: none;
  outline: none;
  padding: 0;
}
#dfenster .df-strich {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--rot-stift);
  pointer-events: none;
  animation: df-blinkt 1.06s infinite;
}
@keyframes df-blinkt {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
/* Der Ring zeigt die Stärke des Stiftes: gepunktet, schwarz. */
#dfenster .df-ring {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 9;
  display: none;
  border: 3px dotted var(--black);
  border-radius: 50%;
  box-sizing: border-box;
  will-change: transform;
}
#dfenster .df-ring.radiert {
  border-color: var(--red, #e8391c);
}
/* Der Zeiger zum Anmerken: der Schriftbalken, oben rechts daran das T aus
   Caveat-700 — so groß, wie geschrieben wird. Hier der Rückfall für 20
   Punkte Schrift; die gebaute Fassung in jeder Größe hängt
   print/hand.js als konstruiertes Stylesheet ein. */
#dfenster .df-blatt.schreibt {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23d81e16' d='M8.08 7Q7.93 7.01 7.83 6.86Q7.73 6.71 7.74 6.61Q7.75 6.48 7.81 6.23Q7.88 5.98 7.96 5.73Q8.04 5.47 8.11 5.33Q8.14 5.19 8.17 5.09Q8.2 4.99 8.21 4.95Q8.23 4.92 8.29 4.78Q8.34 4.64 8.37 4.51Q8.39 4.44 8.44 4.26Q8.5 4.07 8.58 3.82Q8.65 3.58 8.73 3.34Q8.81 3.1 8.87 2.92Q8.93 2.73 8.94 2.68Q9.01 2.58 9.04 2.49Q9.08 2.4 9.08 2.36Q9.13 2.33 9.14 2.28Q9.15 2.22 9.15 2.19Q9.15 2.15 9.18 2.12Q9.21 2.1 9.21 2.07Q9.24 2.04 9.25 2.06Q9.26 2.08 9.3 2.03L9.34 1.75L10.07 1.75Q10.06 1.84 10.02 1.99Q9.99 2.13 9.87 2.37Q9.83 2.54 9.77 2.67Q9.72 2.8 9.73 2.84Q9.71 2.86 9.66 3.01Q9.6 3.16 9.53 3.37Q9.46 3.58 9.39 3.8Q9.32 4.01 9.27 4.17Q9.22 4.34 9.2 4.38Q9.13 4.51 9.05 4.76Q8.97 5.02 8.8 5.46Q8.74 5.59 8.64 5.85Q8.55 6.12 8.49 6.33Q8.4 6.65 8.33 6.79Q8.26 6.93 8.2 6.96Q8.14 6.99 8.08 7ZM8.15 2.15Q7.81 2.18 7.69 2.07Q7.57 1.95 7.61 1.82Q7.63 1.72 7.73 1.65Q7.82 1.58 8.08 1.53Q8.17 1.51 8.31 1.49Q8.46 1.46 8.59 1.44Q8.86 1.41 9.04 1.38Q9.22 1.36 9.41 1.34Q9.6 1.32 9.88 1.31Q10.12 1.29 10.29 1.28Q10.46 1.27 10.46 1.27Q10.49 1.27 10.63 1.28Q10.78 1.3 10.96 1.32Q11.13 1.35 11.21 1.38Q11.4 1.42 11.52 1.53Q11.63 1.64 11.67 1.78Q11.69 1.88 11.67 1.93Q11.64 1.98 11.57 2.02Q11.39 2.08 11.27 2.11Q11.15 2.15 11.03 2.11Q10.99 2.07 10.94 2.03Q10.88 2 10.75 1.98Q10.63 1.96 10.35 1.94Q10.12 1.97 9.95 1.97Q9.78 1.97 9.78 2.01L9.29 2.03L8.89 2.08Q8.8 2.08 8.65 2.1Q8.51 2.11 8.37 2.12Q8.23 2.13 8.15 2.15Z'/%3E%3Cg fill='none' stroke='%23d81e16' stroke-width='1.27' stroke-linecap='round'%3E%3Cpath d='M5 4.4v8.93M3.53 4.4h2.93M3.53 13.33h2.93'/%3E%3C/g%3E%3C/svg%3E")
      5 9,
    text !important;
}