/* ============================================================================
   P4-A: Pinsel + handytaugliches Layout + Werk-Bibliothek-UI (Kolorier-Modus)

   Eigenstaendige Datei (siehe index.html-Kommentar) - alle Selektoren
   bewusst auf "kolorier-"/"#kolorier-"-Namen bzw. bereits bestehende, hier
   NICHT neu definierte Klassen (.btn/.seg/.variant-check/.modal-*, alle aus
   style.css) beschraenkt, damit nichts ausserhalb des Kolorier-Bereichs
   beeinflusst wird. style.css und kolorier_farbwaehler.css bleiben
   unangetastet. Erste Stufe: nur das, was der Pinsel selbst braucht -
   mobiles Layout und Werk-Galerie folgen als eigene Abschnitte unten.
   ============================================================================ */

/* Ohne das wuerde ein Finger auf der Vorschau die Seite scrollen statt zu
   malen (Pointer Events feuern zwar trotzdem, aber der Browser uebernimmt
   parallel die Standard-Touch-Geste). Wirkt sich auf Maus-Bedienung nicht
   aus - betrifft nur Touch-/Stift-Gesten, daher unconditional (nicht nur
   im Mobil-Breakpoint). */
/* NOTFALL-Fix: natives Bild-Drag (Safari/WebKit: -webkit-user-drag) und
   Text-/Element-Auswahl wuerden einen echten Maus-/Stiftzug beim Malen
   unterbrechen, noch bevor unser Pointer-Handler (script.js draggable=false
   + dragstart-Abfang) ueberhaupt zum Zug kommt - siehe dortiger Kommentar
   fuer die volle Begruendung. touch-action:none (schon vorhanden) deckt nur
   die Touch-Geste ab, nicht dieses separate Maus-/Trackpad-Verhalten. */
#img-kolorier-preview {
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
#img-kolorier-preview.kolorier-brush-aktiv {
  cursor: cell;
}

/* Optimistische Pinselspur: exakt ueber der Vorschau positioniert (gleiche
   Technik wie #kolorier-hover-outline in style.css), darf nie Pointer-
   Events abfangen - die laufen auf dem <img> darunter. */
.kolorier-brush-trail {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  /* P6, Auftrag 3: Schwarz bleibt IMMER die oberste, unantastbare Ebene -
     woertlich Floras Regel, auch WAEHREND eines laufenden Zugs, nicht erst
     nach dem Server-Rendering. "multiply" statt normalem Alpha-Blending:
     bei einem schwarzen (oder nahezu schwarzen) Tusche-Pixel darunter ist
     das Ergebnis JEDER Multiplikation mit Schwarz wieder Schwarz, egal
     welche Farbe/Deckkraft der optimistische Trail hat (Compositing-Formel
     fuer opake Unterlage: Co = As*(1-Ab)*Cs + As*Ab*(Cb*Cs) + (1-As)*Ab*Cb;
     mit Cb=0 und Ab=1 bleibt nur As*1*(0*Cs) + (1-As)*1*0 = 0 - die Tusche
     "gewinnt" strukturell, nicht nur zufaellig durch niedrige Deckkraft).
     Auf weissem Papier (Cb=1) bleibt die gewaehlte Farbe dagegen normal
     sichtbar (1*Cs=Cs), das bisherige Verhalten aendert sich dort nicht.
     Voraussetzung: mix-blend-mode wirkt nur INNERHALB desselben Stacking-
     Context wie das <img> darunter - geprueft, dass previewWrap/figure/
     section kein opacity/transform/filter setzen, das einen eigenen
     Context aufspannen und den Blend gegen das Bild "kappen" wuerde
     (Befund siehe Bericht an den PL). */
  mix-blend-mode: multiply;
}

/* P6: Groessen-Bedienelement = Preset-Segment + stufenloser Regler +
   px-Anzeige nebeneinander in einer Zeile (bricht bei Bedarf um, siehe
   flex-wrap - auf schmalen Bildschirmen ohnehin durch die Mobil-Regeln
   unten in eine eigene 44px-Zeile gebracht). */
.kolorier-brush-size-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kolorier-brush-presets button {
  min-width: 32px;
}

.kolorier-brush-range {
  flex: 1 1 120px;
  min-width: 80px;
  accent-color: var(--accent); /* faerbt Thumb/gefuellte Spur passend zur uebrigen UI, ohne Track/Thumb komplett per Pseudoelement neu bauen zu muessen */
  cursor: pointer;
}

.kolorier-brush-radius-label {
  font-variant-numeric: tabular-nums; /* Ziffern wechseln beim Ziehen nicht staendig die Breite */
  color: var(--text-dim);
  font-size: 0.78rem;
  min-width: 3.2em;
}

/* P6, Auftrag 2: Pinselkreis - zeigt den echten Treffer-Radius VOR dem
   Zug. Zwei Ringe uebereinander (weisser Rand + dunkler box-shadow-Rand)
   statt nur einer Farbe, damit der Kreis auf HELLEM Papier UND auf
   dunklen Tuschelinien gleichermassen ablesbar bleibt. Bewusst nur ein
   duenner Umriss mit kaum sichtbarer Fuellung (kein deckendes Fuellen) -
   er soll die Zeichnung darunter nicht verdecken. */
.kolorier-brush-cursor {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(20, 20, 30, 0.75);
  background: rgba(74, 81, 120, 0.05);
  z-index: 6; /* ueber dem Trail-Canvas (z-index:5) - der Kreis darf nie unter frischer Farbe verschwinden */
}

/* Radierer: gestrichelter Kreis statt durchgezogenem. Das Werkzeug in der
   Hand soll am Zeiger selbst ablesbar sein, nicht nur am Knopf weit oben
   in der Leiste - beim Arbeiten liegt der Blick auf dem Bild. */
.kolorier-brush-cursor.radierer {
  border-style: dashed;
  border-width: 2px;
  background: rgba(255, 255, 255, 0.22);
}

/* P11d "Schneiden": Kreuz-Cursor statt Kreis - signalisiert "hier wird eine
   Linie gezogen", nicht "hier wird eine Flaeche getroffen" (der Kreis bleibt
   fuer Pinsel/Radierer/Zusammenfuegen, die tatsaechlich eine Flaechen-
   Trefferzone haben). Die eigentliche gestrichelte Schnittlinie erscheint
   erst WAEHREND des Ziehens auf der Trail-Canvas (kolorier_touch.js::
   zeichneSchnittlinie), dieser Cursor ist nur der Vorschau-Indikator davor. */
/* Messer: echtes Messer-Symbol statt der frueheren gedrehten Raute (Floras
   Wort, 28.08.: "eine Raute geht gar nicht"). Es ist DASSELBE Symbol wie auf
   dem Knopf "Messer" in der Flaechen-Leiste (studio.html) - Werkzeug in der
   Hand und Werkzeug auf dem Knopf sollen sich gleichen, sonst muss man sie
   erst zusammendenken.
   Zweimal gezeichnet: dunkle Kontur unten, weisse Klinge oben - damit die
   Form sowohl auf heller Unterlage als auch auf schwarzer Tusche steht.
   Der Treffpunkt ist die KLINGENSPITZE, nicht die Mitte des Symbols: die
   Spitze liegt im Bildfeld bei (4,20) von 24, daher die Verschiebung um
   -16.7%/-83.3% statt der sonst ueblichen -50%/-50%.
   width/height/background mit !important, weil kolorier_touch.js die Groesse
   des Zeigers als Inline-Stil aus dem Pinselradius setzt (Zeile 1078/1079) -
   ein Messer waechst aber nicht mit der Pinselgroesse, es bleibt gleich
   gross. Inline-Stil schlaegt jede normale Regel, deshalb hier der
   Vorrang. */
.kolorier-brush-cursor.schneiden {
  width: 26px !important;
  height: 26px !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: translate(-16.7%, -83.3%);
  background: transparent no-repeat center/contain !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cg stroke='%2314141e' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round' opacity='.85'%3E%3Cpath d='M4 20L14 10'/%3E%3Cpath d='M14 10L20 4C21 6.5 20.5 9 18.5 11L13 16.5'/%3E%3Cpath d='M8 16L4 20'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20L14 10'/%3E%3Cpath d='M14 10L20 4C21 6.5 20.5 9 18.5 11L13 16.5'/%3E%3Cpath d='M8 16L4 20'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.kolorier-brush-hint {
  color: var(--text-dim);
  font-size: 0.78rem;
}

.kolorier-werkzeug-wahl {
  flex: 0 0 auto;
}

/* P11e "Zusammenfuegen": eigene kleine Leiste (Verbinden/Auswahl leeren/
   Status) - erscheint NUR im Zusammenfuegen-Werkzeug (siehe kolorier_touch.js
   werkzeugWrap-Klick-Handler). .btn/.hint kommen aus style.css, hier nur das
   Zeilen-Layout. */
.kolorier-merge-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.kolorier-merge-controls .hint {
  font-size: 0.78rem;
}

/* Persistente Auswahl-Flecken (siehe kolorier_touch.js::mergeZeichnePunkt) -
   erbt Position/Groesse/Blend-Mode von .kolorier-brush-trail, hier nur die
   Ergaenzung eines eigenen Klassennamens fuer evtl. kuenftige Feinjustierung. */
.kolorier-merge-canvas {}

/* ---------------------------------------------------------------------
   Werk-Galerie (Auftrag 3): Modal wiederverwendet .modal-overlay/.modal-box
   aus style.css (gleiche Optik wie der bestehende Paletten-Dialog) - hier
   nur die Ergaenzungen, die es dafuer noch nicht gibt.
   --------------------------------------------------------------------- */
.kolorier-galerie-box {
  max-width: 860px;
}

.kolorier-galerie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.kolorier-werk-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kolorier-werk-thumb {
  aspect-ratio: 1 / 1;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.kolorier-werk-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.kolorier-werk-thumb.platzhalter::before {
  content: "Keine Vorschau";
  font-size: 0.72rem;
  color: var(--text-dim);
  text-align: center;
  padding: 0 10px;
}

.kolorier-werk-meta {
  padding: 8px 10px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kolorier-werk-name {
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kolorier-werk-datum {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.kolorier-werk-status {
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text-strong);
}

.kolorier-werk-status.status-fertig {
  background: #dcefe0;
  color: #2f6b3f;
}

.kolorier-werk-actions {
  display: flex;
  gap: 8px;
  padding: 10px;
  margin-top: auto;
}

.kolorier-werk-actions .btn {
  flex: 1;
  padding: 8px 10px;
  font-size: 0.76rem;
  text-align: center;
}

/* =======================================================================
   Handytaugliches Layout (Auftrag 2), ab Schmalformat <= 768px. Auf dem
   Desktop (> 768px) bleibt ALLES wie im Hauptmodul definiert - kein
   Selektor hier greift ausserhalb dieser Media-Query.
   ======================================================================= */
@media (max-width: 768px) {
  /* Vorschau/Original stapeln statt sie auf die Haelfte zu quetschen - die
     Vorschau (zum Malen) zuerst, das Original als Vergleich danach. Beide
     nutzen dadurch die volle Breite (Auftrag: "Vorschau nutzt die volle
     Breite"). */
  .kolorier-preview-pair {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .kolorier-preview-pair figure:nth-of-type(2) {
    order: -1;
  }
  .kolorier-preview-pair img {
    height: min(68vw, 420px);
  }

  /* Farbfelder: gut treffbare Reihe statt Desktop-Chips (Mindest-
     Trefferflaeche 44x44 px laut Auftrag - Grundgroesse 30x30 kommt aus
     style.css/.kolorier-swatch, hier bewusst nur fuer die INTERAKTIVE
     Zuweisungsleiste ueberschrieben, nicht fuer die reinen Vorschau-Chips
     in der Paletten-Leiste oben). */
  #kolorier-assign-swatches .kolorier-swatch {
    width: 44px;
    height: 44px;
  }

  /* Pinselgroesse S/M/L: Grundgroesse (.seg-small button aus style.css)
     kommt nur auf ca. 32x24 px - fuer den Daumen zu klein. */
  .kolorier-brush-presets button {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
  }

  /* Werkzeugwahl Malen/Radieren und der Wiederholen-Knopf: dieselbe
     Daumen-Mindestgroesse wie die uebrigen Bedienelemente der Leiste. */
  .kolorier-werkzeug-wahl button,
  #kolorier-redo {
    min-height: 44px;
    padding: 8px 12px;
  }

  /* Stufenloser Regler: Griff UND Trefferflaeche >= 44px, wie im Auftrag
     gemessen gefordert. Kein herstellerneutraler Standard-Selektor fuer den
     Thumb (das neuere ::slider-thumb ist hier noch nicht verlaesslich
     verfuegbar) - darum beide gaengigen Vorpraefixe. margin-top beim
     WebKit-Thumb zentriert den 44px-Griff auf der duennen 4px-Spur:
     (Spurhoehe - Griffhoehe) / 2 = (4 - 44) / 2 = -20px.
     WICHTIG: der Selektor MUSS das Element mitnennen. style.css stylt
     global input[type="range"] (Spezifitaet 0-0-1-1, Hoehe 2px, 11px-Griff)
     und schlaegt damit eine reine Klassenregel (0-0-1-0) - gemessen kam der
     Regler sonst trotz dieser Zeilen auf 2px Hoehe, also genau die
     Daumen-Untauglichkeit, die hier behoben werden soll. */
  input[type="range"].kolorier-brush-range {
    width: 100%;
    height: 44px;
  }
  input[type="range"].kolorier-brush-range::-webkit-slider-runnable-track {
    height: 4px;
    background: var(--border);
    border-radius: 999px;
  }
  input[type="range"].kolorier-brush-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 44px;
    margin-top: -20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
  }
  input[type="range"].kolorier-brush-range::-moz-range-track {
    height: 4px;
    background: var(--border);
    border-radius: 999px;
  }
  input[type="range"].kolorier-brush-range::-moz-range-thumb {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
  }

  /* Checkbox-Zeilen (Fein/Aehnliche/Markieren/Pinsel-An): Tippflaeche per
     Padding auf 44px anheben, ohne das kleine Haekchen selbst zu
     vergroessern (bleibt Browser-Standardoptik). */
  #kolorier-assign-bar .variant-check {
    min-height: 44px;
    padding: 4px 2px;
    display: inline-flex;
    align-items: center;
  }

  /* Bedienleiste bleibt beim Scrollen erreichbar (Auftrag): Zuweisen/
     Pinsel/Undo oben angeheftet, Export unten - zwei unabhaengige Sticky-
     Leisten an GEGENUEBERLIEGENDEN Kanten ueberlappen sich nie, ganz ohne
     dass eine die feste Hoehe der anderen kennen muesste (was noetig
     waere, wuerden beide an derselben Kante kleben). */
  #kolorier-assign-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--panel);
    box-shadow: 0 2px 10px rgba(56, 62, 99, 0.12);
  }
  #kolorier-workspace .export-row {
    position: sticky;
    bottom: 0;
    z-index: 30;
    background: var(--panel);
    padding: 10px 12px;
    box-shadow: 0 -2px 10px rgba(56, 62, 99, 0.12);
  }
  #kolorier-workspace .export-row .btn,
  #kolorier-assign-bar .btn {
    min-height: 44px;
    padding: 12px 18px;
  }

  .kolorier-galerie-box {
    max-width: 94vw;
  }
  .kolorier-galerie-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  /* Bei zwei Buttons in einer 130px-Karte reicht die Breite fuer "Loeschen"
     einzeilig knapp nicht (Beobachtung im Live-Test) - Umbruch statt
     Abschneiden ohne Ellipse. */
  .kolorier-werk-actions .btn {
    min-height: 40px;
    white-space: normal;
    line-height: 1.15;
  }
}