/* ---------------------------------------------------------------------------
   Kachel-Icons fuer Status (Guideline Abschnitt 5 "Kachel" und 6.0,
   Revision 4, PO-Aussage 07.10.2026). Setzt tokens.css voraus.

   Aufbau:
     <span class="catkin-kachel catkin-kachel--offen" role="img"
           aria-label="Auftrag: Zugewiesen" title="Auftrag: Zugewiesen">
       <svg aria-hidden="true"><use href="kachel-sprite.svg#k-zugewiesen"/></svg>
     </span>

   Kategorie:  --neu | --offen | --in-arbeit | --unterwegs | --erledigt |
               --achtung | --gesperrt | --hinweis
   Form:       (ohne) = gefuellt, wirksam
               --hell     = getoent mit Rand, noch nichts geschehen (Neu)
               --strich   = getoent, gestrichelter Rand, beantragt
   Groesse:    --16 | --20 (Standard) | --24 | --32
   Statusart:  --personal = eine Stufe kleiner als Auftrag (etwa 4:5), damit
               beide nebeneinander unterscheidbar sind (20/16, 24/20, 32/26)

   Pflicht: Jede Kachel ohne sichtbaren Text traegt title (Tooltip) und
   aria-label mit Statusart und Zustand ("Personal: In Ausfuehrung").
   --------------------------------------------------------------------------- */
.catkin-kachel {
  --k-size: 20px;
  --k-icon: var(--catkin-status-neu-icon);
  --k-bg: var(--catkin-status-neu-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: var(--k-size);
  height: var(--k-size);
  border-radius: calc(var(--k-size) * 5 / 24);
  background: var(--k-icon);
  color: var(--catkin-surface);
  vertical-align: middle;
}
.catkin-kachel > svg {
  width: 100%;
  height: 100%;
  display: block;
}

.catkin-kachel--neu       { --k-icon: var(--catkin-status-neu-icon);       --k-bg: var(--catkin-status-neu-bg); }
.catkin-kachel--offen     { --k-icon: var(--catkin-status-offen-icon);     --k-bg: var(--catkin-status-offen-bg); }
.catkin-kachel--in-arbeit { --k-icon: var(--catkin-status-in-arbeit-icon); --k-bg: var(--catkin-status-in-arbeit-bg); }
.catkin-kachel--unterwegs { --k-icon: var(--catkin-status-unterwegs-icon); --k-bg: var(--catkin-status-unterwegs-bg); }
.catkin-kachel--erledigt  { --k-icon: var(--catkin-status-erledigt-icon);  --k-bg: var(--catkin-status-erledigt-bg); }
.catkin-kachel--achtung   { --k-icon: var(--catkin-status-achtung-icon);   --k-bg: var(--catkin-status-achtung-bg); }
.catkin-kachel--gesperrt  { --k-icon: var(--catkin-status-gesperrt-icon);  --k-bg: var(--catkin-status-neu-bg); }
.catkin-kachel--hinweis   { --k-icon: var(--catkin-status-neu-icon);       --k-bg: var(--catkin-status-neu-bg); }

.catkin-kachel--hell,
.catkin-kachel--strich {
  background: var(--k-bg);
  border: 1px solid var(--k-icon);
  color: var(--k-icon);
}
.catkin-kachel--strich { border-style: dashed; }

.catkin-kachel--16 { --k-size: 16px; }
.catkin-kachel--20 { --k-size: 20px; }
.catkin-kachel--24 { --k-size: 24px; }
.catkin-kachel--32 { --k-size: 32px; }
.catkin-kachel--personal.catkin-kachel--20,
.catkin-kachel--personal:not(.catkin-kachel--16):not(.catkin-kachel--24):not(.catkin-kachel--32) { --k-size: 16px; }
.catkin-kachel--personal.catkin-kachel--24 { --k-size: 20px; }
.catkin-kachel--personal.catkin-kachel--32 { --k-size: 26px; }