/* ── ANNOTATION CANVAS ── */
#annot-canvas {
  position: absolute;
  z-index: 8;
  display: none;
  cursor: crosshair;
  touch-action: none;
}
/* Der Zeiger kommt aus der Zeiger-Kapsel im Kopf (Stift). cursor:none stand
   hier frueher wirkungslos: die globale Regel dort traegt !important.      */
#annot-canvas.active {
  display: block;
}
/* Vorschauring der Stiftgroesse, in Bildschirmpixeln, folgt dem Zeiger */
/* Gepunktet und schwarz: der Ring soll die Zeichnung nicht als geschlossene
   Linie ueberdecken. Unter Umschalt wird er rot wie der Radierstift — beide
   sagen dasselbe, und man sieht es, ohne hinzusehen.                    */
#annot-ring {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 60;
  display: none;
  border: 3px dotted var(--black);
  border-radius: 50%;
  box-sizing: border-box;
  will-change: transform;
}
#annot-ring.radiert {
  border-color: var(--red);
}
/* Im Objekt-Modus steht statt des Rings ein kleiner Kubus über der
   Stiftspitze — er sagt „hier wird ein Ding gewählt“ und zieht dem Zeiger
   mit einem kleinen Nachlauf hinterher (js/ui/working-cube.js). Der
   Drehpunkt liegt etwas unter der Mitte: so kippt und dreht er wie ein
   Körper mit Gewicht. Den Tanz während der Erkennung rechnen Web
   Animations auf dem SVG, nicht auf #annot-kubus selbst — dessen transform
   ist die Lage hinter dem Zeiger. */
#annot-kubus {
  position: fixed;
  left: 0;
  top: 0;
  width: 12px;
  height: 14px;
  pointer-events: none;
  z-index: 61;
  display: none;
  will-change: transform;
}
#annot-kubus.an {
  display: block;
}
#annot-kubus svg {
  display: block;
  transform-origin: 50% 60%;
}
/* Solange die Erkennung rechnet (Klasse arbeitet), ist der Kubus rot —
   dasselbe Rot wie der Stift dann (Zeiger-Kapsel: #annot-canvas.rechnet)
   und wie alles, was in dieser App Arbeit oder Wegnehmen meint. Drei Töne
   für drei Flächen: Deckel hell, links dunkel, rechts der Grundton. */
#annot-kubus svg path {
  transition: fill 0.15s ease;
}
#annot-kubus.arbeitet svg path:nth-of-type(1) {
  fill: var(--rot-hell);
}
#annot-kubus.arbeitet svg path:nth-of-type(2) {
  fill: var(--rot-dunkel);
}
#annot-kubus.arbeitet svg path:nth-of-type(3) {
  fill: var(--red);
}
/* Der große Kubus: während eine Maske aus einem Wort entsteht, tanzt
   derselbe Kubus fünffach vergrößert in der Mitte des Bildes. Es gibt ihn
   nur, solange gerechnet wird — darum ist er immer rot. Er liegt über
   Bild, Lupe, Strichen und Beschriftungen (dieselbe Ebene wie
   #annot-labels, aber später eingehängt), unter dem Feld der Beschriftung,
   und nimmt keinen Zeiger an. Der feine Strich in der Flächenfarbe
   schließt die hellen Haarfugen, die bei dieser Größe zwischen den drei
   Flächen stünden. */
#annot-kubus-gross {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.18s ease,
    visibility 0s linear 0.18s;
}
#annot-kubus-gross.an {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease;
}
#annot-kubus-gross svg {
  display: block;
  transform-origin: 50% 60%;
  overflow: visible;
}
#annot-kubus-gross svg path {
  stroke-width: 0.12;
  stroke-linejoin: round;
}
#annot-kubus-gross svg path:nth-of-type(1) {
  fill: var(--rot-hell);
  stroke: var(--rot-hell);
}
#annot-kubus-gross svg path:nth-of-type(2) {
  fill: var(--rot-dunkel);
  stroke: var(--rot-dunkel);
}
#annot-kubus-gross svg path:nth-of-type(3) {
  fill: var(--red);
  stroke: var(--red);
}
/* Der Kasten der Beschriftungen: genau über dem Bild, schneidet ab, was
   über den Bildrand hinausragte (js/annotation/annotation-labels.js). */
#annot-labels {
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 9998;
}
/* Die Beschriftung selbst: in der Handschrift und im Rot der Striche,
   leicht gedreht (die Drehung setzt der Code); die zum ganzen Bild kursiv
   und als „~ Text ~“. */
.annot-label {
  position: absolute;
  color: var(--rot-stift);
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  transform-origin: left bottom;
}
.annot-label.global {
  font-style: italic;
}
/* Das Gummiband zwischen zwei Eckpunkten: wohin die nächste gerade Linie
   ginge (Lage, Länge und Drehung setzt der Code). */
#annot-gummi {
  position: fixed;
  left: 0;
  top: 0;
  height: 0;
  border-top: 2px dashed rgba(216, 30, 22, 0.85);
  transform-origin: 0 0;
  pointer-events: none;
  z-index: 9997;
  display: none;
}

/* Der Zoom im Anzeichnen-Modus: eine Flaeche genau auf dem Bild, die es
   dreifach zeigt und dem Stift folgt. Sie haengt wie der Ring am body,
   damit kein verschobener Vorfahre sie versetzt, und nimmt keine Zeiger
   an — gezeichnet wird weiter auf der Flaeche darunter. Sie liegt unter
   dem Stiftring, damit der sichtbar bleibt.                         */
#annot-lupe {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 59;
  background: var(--white);
  opacity: 0;
  transition: opacity 0.1s ease;
  will-change: transform;
}
#annot-lupe.an {
  opacity: 1;
}

/* ── ANNOTATION TOOLBAR ── */
/* Die Stiftleiste steht ganz oben am Bild — dort, wo sonst die Bildreihe
   herunterfährt; beim Anzeichnen kommt die obere Leiste gar nicht. Sie
   kommt nicht mit einem Schlag: sie blendet kurz auf und ebenso wieder
   weg und liegt in Ruhe etwas zurückgenommen da — erst unter der Maus
   steht sie voll. Ausgeblendet bleibt sie mit visibility weg: so nimmt
   sie weder Klick noch Tabulator. */
#annot-toolbar {
  position: absolute;
  top: 10px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 22px;
  padding: 7px 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-3px);
  transition:
    opacity 0.34s ease,
    transform 0.34s ease,
    visibility 0s linear 0.34s;
}
#annot-toolbar.visible {
  opacity: 0.82;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity 0.34s ease,
    transform 0.34s ease;
}
#annot-toolbar.visible:hover {
  opacity: 1;
}
#annot-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 12px;
  font-family: var(--sans);
  letter-spacing: 0.06em;
  color: var(--mid);
  border-radius: 10px;
  transition:
    background 0.12s,
    color 0.12s;
}
#annot-toolbar button:hover {
  background: var(--grau-100);
  color: var(--black);
}
#annot-toolbar button.on {
  background: var(--black);
  color: var(--white);
}
/* Das Wortfeld steht links vom Objekt-Knopf und spricht dieselbe Schrift
   wie er — nur kursiv und etwas heller; das genügt, damit es sich als Feld
   zu erkennen gibt. Beim Schreiben wird es eine Spur dunkler. Die Breite
   folgt dem Wort (object-select.js). Abstände: beide Knöpfe tragen acht
   Punkte eigenes Polster, dazu die zehn der Leiste — 26 Punkte von Schrift
   zu Schrift; das Feld hat kein Polster und holt sich die Differenz als
   Rand: links 16, rechts 8. */
#annot-wort {
  flex: none;
  background: none;
  border: none;
  outline: none;
  padding: 4px 0;
  font-size: 12px;
  font-family: var(--sans);
  letter-spacing: 0.06em;
  font-style: italic;
  color: var(--light, #b0b0b0);
  transition: color 0.12s;
  width: 60px;
  margin-left: 16px;
  margin-right: 8px;
}
#annot-wort::placeholder {
  color: var(--light, #b0b0b0);
  font-style: italic;
  letter-spacing: 0.06em;
}
#annot-wort:focus {
  color: var(--mid, #686868);
}
/* Solange gerechnet wird, tritt es zurück — wie der Schieber. */
#annot-wort:disabled {
  opacity: 0.35;
}
/* Der Schieber der Stiftgröße, selbst gezeichnet: der Griff einfach
   schwarz, ohne den Hof, den der Browser beim Überfahren um seinen Griff
   legt; die Bahn links vom Griff schwarz, rechts hell — den Anteil setzt
   --p (annotation-canvas.js, showBrushSize). */
#annot-brush-size {
  -webkit-appearance: none;
  appearance: none;
  width: 60px;
  height: 14px;
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  --p: 25%;
}
#annot-brush-size::-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%);
}
#annot-brush-size::-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;
}
#annot-brush-size::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: #d4d4d4;
}
#annot-brush-size::-moz-range-progress {
  height: 3px;
  border-radius: 2px;
  background: var(--black, #000);
}
#annot-brush-size::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--black, #000);
  border: none;
}
#annot-brush-size:focus {
  outline: none;
}
/* Solange ein Objekt gewählt wird, hat die Stiftgröße nichts zu sagen: der
   Schieber tritt zurück, und das Mausrad rührt ihn nicht. */
#annot-toolbar.objekt #annot-brush-size {
  opacity: 0.3;
  pointer-events: none;
}

/* ── ANNOTATION TEXT POPUP ── */
#annot-popup {
  position: fixed;
  z-index: 9999;
  display: none;
  background: var(--schleier-dicht);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
  padding: 9px 11px 10px;
  max-width: 240px;
  pointer-events: auto;
  font-family: var(--sans);
}
/* Die drei Arten der Aenderung. Der Text waehlt vor, ein Klick entscheidet. */
#annot-pop-modi {
  display: flex;
  gap: 4px;
  margin-top: 7px;
}
#annot-pop-modi button {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.05em;
  border: 1px solid var(--light);
  background: transparent;
  color: var(--mid);
  padding: 3px 9px;
  cursor: pointer;
  line-height: 1.4;
}
#annot-pop-modi button:hover {
  border-color: var(--mid);
  color: var(--black);
}
#annot-pop-modi button.on {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
#annot-popup.global #annot-pop-modi {
  display: none;
}
#annot-pop-input {
  border: none;
  outline: none;
  font-size: 12px;
  font-family: var(--sans);
  width: 200px;
  background: transparent;
  padding: 0;
  color: var(--black);
}
/* Das Beispiel steht kursiv im Feld und ersetzt die fruehere Frage darueber. */
#annot-pop-input::placeholder {
  font-family: var(--sans);
  font-style: italic;
  font-size: 12px;
  color: var(--light);
  opacity: 1;
}