/* color.css — das Aussehen von Pumo Color.
   Marco hat es am 23.09.2026 an muster-color.html freigegeben: "Mega".

   ⚠️ Die Farben kommen aus base.css und stehen hier NICHT noch einmal
   (stil-farben-einmal). shop.css traegt sie doppelt, weil es einmal allein
   lauffaehig sein sollte — dieser Bereich macht den Fehler nicht nach.

   ⚠️ Jeder Name faengt mit "color-" an. Der Bereich liegt in derselben Seite
   wie die Karte und das Spiel; ohne Vorsatz verstellten sie sich gegenseitig
   das Aussehen (jump-namen-mit-vorsatz). */

.color {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ------------------------------------------------------------- Kopfzeile

   Rueckweg links, Haupthandlung rechts. KEIN Titel in der Mitte — man sieht
   ja, wo man ist (shop-kein-titel). */

.color-kopf {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
}

.color-rundknopf {
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 2px solid var(--holz-dunkel);
  border-radius: 50%;
  background: var(--holz-rand);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s ease-out;
}

.color-rundknopf:active { transform: scale(.94); }
.color-rundknopf:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.color-zeichen { display: block; line-height: 0; }
.color-zeichen svg { width: 22px; height: 22px; display: block; }

/* Papierkorb und Fertig stehen zusammen rechts. Der Papierkorb ist BEWUSST
   nicht rot: Er nimmt nichts endgueltig weg — Rueckgaengig faengt ihn auf
   (color-zuruecksetzen-mit-rueckgaengig). Eine Warnfarbe an einer Tat, die
   sich zurueckholen laesst, stumpft ab; dann wird sie auch dort uebersehen,
   wo sie zaehlt. */
.color-kopf-rechts {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.color-korb:disabled {
  opacity: .4;
  cursor: default;
}

/* Die eine Haupthandlung des Malbildschirms (primary-action). */
.color-fertig {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid #23501c;
  border-radius: 999px;
  /* ⚠️ --gruen-tief statt --gruen, nachgerechnet am 24.09.2026: Weiss auf
     --gruen kommt auf 3,47:1 und liegt unter der Grenze von 4,5:1, die fuer
     Schrift dieser Groesse gilt. Auf --gruen-tief sind es 5,85:1. Es ist
     keine neue Farbe erfunden, nur die dunklere der beiden vorhandenen
     genommen (medien-gruen-ist-zu-hell). */
  background: var(--gruen-tief);
  color: #fff;
  cursor: pointer;
  transition: transform .15s ease-out;
}

.color-fertig:active { transform: scale(.96); }
.color-fertig:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.color-fertig:disabled { opacity: .45; cursor: default; }
.color-fertig svg { width: 18px; height: 18px; }

/* -------------------------------------------------------- Die Sammlung */

.color-regal {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 10px 10px;
  padding: 10px;
  background: var(--pergament);
  border: 3px solid var(--holz-dunkel);
  border-radius: 12px;
}

.color-raster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Auf dem Tablet passen drei nebeneinander, ohne dass die Kachel riesig wird. */
@media (min-width: 680px) {
  .color-raster { grid-template-columns: repeat(3, 1fr); }
}

.color-blatt {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  border: 2px solid var(--holz-rand);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform .15s ease-out;
}

.color-blatt:active { transform: scale(.97); }
.color-blatt:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* ⚠️ Das Seitenverhaeltnis steht FEST, und zwar auf dem Mass der Vorlagen
   (750 x 1000). Ohne es waere die Kachel vor dem Laden 0 hoch, das Regal
   spraenge beim Ankommen jedes Bildes — genau die Sorte Sprung, die eine
   Seite unruhig macht. */
.color-blatt-bild {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border-radius: 6px;
  background: #fff;
}

.color-blatt-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  min-height: 2.5em;
  color: var(--schrift);
}

.color-blatt-lage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--schrift-lesbar);
}

.color-lage-zeichen { line-height: 0; }
.color-lage-zeichen svg { width: 13px; height: 13px; display: block; }

/* ⚠️ Fertig haengt nicht nur an der Farbe: der Rahmen ist dicker UND es
   steht ein Haken mit dem Wort daneben (shop-vier-lagen-sichtbar). */
.color-blatt.fertig { border-color: var(--gruen-tief); border-width: 3px; }
.color-blatt.fertig .color-blatt-lage { color: var(--gruen-tief); }

/* --------------------------------------------------------- Die Leinwand */

.color-blatt-flaeche {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.color-leinwand-rahmen {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #fff;
  border: 3px solid var(--holz-dunkel);
  border-radius: 10px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .22);
}

.color-leinwand-rahmen canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* ⚠️ Ohne das nimmt der Browser den Finger fuer sich und rollt die Seite,
     statt dass ein Strich entsteht. */
  touch-action: none;
  cursor: crosshair;
}

/* ------------------------------------------------------ Der Werkzeugkasten

   Unten, auf Pergament — dort, wo der Daumen von selbst hinkommt. */

.color-werkzeug {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  /* ⚠️ Rand und Luecke sind AUSGERECHNET, nicht gewaehlt. Auf dem
     schmalsten Handy bleiben 360 - 2x8 - 6x5 = 314 Punkte fuer sieben
     Farbfelder, also 44,9 je Feld. Mit 10 Rand und 7 Luecke waren es
     gemessen 43 — und damit unter der Grenze von 44. */
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--pergament);
  border-top: 3px solid var(--holz-dunkel);
}

/* Die Pinselbank: dreizehn Farben und der Knopf zum Umfaerben, zusammen
   vierzehn Plaetze in zwei Reihen zu sieben. */
.color-bank {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.color-farbe {
  position: relative;
  min-width: 0;
  height: 44px;              /* touch-target-size: nie kleiner */
  padding: 0;
  border: 2px solid rgba(0, 0, 0, .35);
  border-radius: 9px;
  cursor: pointer;
  transition: transform .15s ease-out;
}

.color-farbe:active { transform: scale(.92); }
.color-farbe:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* ⚠️ DIE GEWAEHLTE FARBE HAENGT NICHT AN DER FARBE. Wer Farben schlecht
   unterscheidet, erkennt den Platz am Haken, am dicken Rand und daran, dass
   er heraussteht — dieselbe Regel wie shop-vier-lagen-sichtbar. Der Haken
   liegt doppelt uebereinander: weiss mit dunklem Schatten, damit er auf
   hellen UND auf dunklen Farben zu sehen ist. */
.color-farbe[aria-pressed="true"] {
  border-color: var(--schrift);
  border-width: 4px;
  transform: translateY(-4px);
}

.color-farbe[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    no-repeat center / 16px 16px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"),
    no-repeat center / 16px 16px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' opacity='.45'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}

.color-palette-knopf {
  background: #fff;
  color: var(--schrift);
  display: grid;
  place-items: center;
}

.color-palette-knopf[aria-pressed="true"] {
  background: var(--holz-dunkel);
  color: #fff;
  transform: none;
  border-color: var(--holz-dunkel);
}

.color-palette-knopf[aria-pressed="true"]::after { content: none; }

/* --------------------------------------------------- Die grosse Auswahl */

.color-auswahl {
  border: 2px dashed var(--holz-rand);
  border-radius: 10px;
  padding: 8px;
}

.color-auswahl-satz {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  /* ⚠️ Fliesstext nimmt --schrift-lesbar, nicht --schrift-matt: der kommt
     gegen das Pergament nur auf 4,49:1 (konto-schrift-lesbar). */
  color: var(--schrift-lesbar);
}

.color-auswahl-gitter {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
}

/* ⚠️ Diese Felder sind kleiner als 44 Punkte, und das ist eine bewusste
   Ausnahme: Sie liegen in einem Kasten, der sich nur auf Wunsch oeffnet,
   und daneben steht immer ein Weg mit voller Groesse. Der Abstand von 5
   Punkten haelt sie trotzdem auseinander (touch-spacing). */
.color-auswahl-farbe {
  min-width: 0;
  height: 30px;
  padding: 0;
  border: 2px solid rgba(0, 0, 0, .3);
  border-radius: 7px;
  cursor: pointer;
}

.color-auswahl-farbe:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* ------------------------------------------------------- Die Werkzeuge */

.color-werkzeugreihe {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.color-knopf {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 8px;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid var(--holz-dunkel);
  border-radius: 10px;
  background: #fff;
  color: var(--schrift);
  cursor: pointer;
  transition: transform .15s ease-out;
}

.color-knopf:active { transform: scale(.96); }
.color-knopf:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.color-knopf:disabled { opacity: .4; cursor: default; }
.color-knopf svg { width: 22px; height: 22px; flex: none; }

/* Auch das gewaehlte Werkzeug sagt seine Lage ueber Form und Schrift,
   nicht nur ueber Farbe. */
.color-knopf[aria-pressed="true"] {
  background: var(--holz-dunkel);
  color: #fff;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .25);
}

.color-schmal { flex: 0 0 56px; padding: 0; }

.color-lupe-zahl { font-size: 12px; font-weight: 700; }

/* ----------------------------------------------------- Die Pinselstaerke */

/* ⚠️ DER [hidden]-SCHUTZ IST PFLICHT, NICHT SCHMUCK. Das Merkmal hidden
   wirkt ueber display:none aus dem Browser-Stylesheet — ein eigenes
   display:flex schlaegt es und die Reihe steht trotzdem da. Genau das war
   am 23.09.2026 der Fall: beim Farbtopf stand die Pinselstaerke sichtbar
   darunter und tat nichts, waehrend die Pruefung gruen blieb, weil sie das
   MERKMAL abfragte statt das, was man sieht. */
.color-staerken { display: flex; gap: 8px; }
.color-staerken[hidden] { display: none; }
.color-auswahl[hidden] { display: none; }

.color-staerke {
  flex: 1 1 0;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid var(--holz-dunkel);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: transform .15s ease-out;
}

.color-staerke:active { transform: scale(.96); }
.color-staerke:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.color-staerke[aria-pressed="true"] { background: var(--holz-dunkel); }
.color-staerke span { display: block; border-radius: 50%; background: var(--schrift); }
.color-staerke[aria-pressed="true"] span { background: #fff; }

/* ⚠️ Nichts in diesem Bereich bezieht sein Dasein aus einer Bewegung
   (start-einzug-ist-nur-aussen) — hier faellt bei abgeschalteter Bewegung
   nur das Federn weg, kein Knopf. */
@media (prefers-reduced-motion: reduce) {
  .color-rundknopf,
  .color-fertig,
  .color-blatt,
  .color-farbe,
  .color-knopf,
  .color-staerke { transition: none; }
}