/* ── 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 rgba(0, 0, 0, 0.92);
  border-radius: 50%;
  box-sizing: border-box;
  will-change: transform;
}
#annot-ring.radiert {
  border-color: var(--red);
}

/* 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 ── */
#annot-toolbar {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 10px;
  z-index: 9;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  border-radius: 22px;
  padding: 7px 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
}
#annot-toolbar.visible {
  display: flex;
}
#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(--light-bg, #f2f2f2);
  color: var(--black);
}
#annot-toolbar button.on {
  background: var(--black);
  color: #fff;
}
#annot-brush-size {
  width: 60px;
  height: 3px;
  cursor: pointer;
  accent-color: var(--black);
}

/* ── ANNOTATION TEXT POPUP ── */
#annot-popup {
  position: fixed;
  z-index: 9999;
  display: none;
  background: rgba(255, 255, 255, 0.97);
  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, #ddd);
  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: #fff;
  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;
}