/* Baustein kachel: Kachel (Bedienkonzept, Pilot Maschinen, Bauplan 1.3).
   Besitzer: WP12b. Leer angelegt von WP0a. Die Grundvorlage bindet die
   Datei nach dem globalen Stylesheet ein. Nur Regeln fuer eigene, neue
   Klassen; Farben als Token mit Rueckfall; eine Regel fuer die
   Telefonbreite (560px).

   Die Kachel aus dem Register (R4) steht im Raster .kacheln neben den
   alten Kacheln und sieht aus wie sie, ist aber selbst KEIN Link: jede
   Zeile fuehrt woandershin (Filter der Liste, bei einem Treffer die
   Akte). Deshalb kein Anheben beim Darueberfahren an der Karte, nur an
   der Zeile. Die Farben der Zeilen sind die der Zustandspillen
   (pillen.css, WP1): kein Ocker, Gelb mit dunkler Schrift, die Sperre
   kraeftig rot mit weisser Schrift. Arbeitsvorrat (neutral, Ausrollen
   Abschnitt A, A1k) ohne Warnfarbe: navy umrandet, wie die Kachel ueber
   der Liste (liste.css). */

.kachel-karte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--border, #e2e7ee);
  border-radius: var(--radius, 12px);
  background: var(--surface, #ffffff);
  color: var(--text, #1c2733);
  box-shadow: var(--shadow, 0 1px 3px rgba(20, 40, 70, 0.07));
}

.kachel-karte-titel {
  font-weight: 700;
  color: var(--navy, #1F4570);
  text-decoration: none;
}

a.kachel-karte-titel:hover {
  text-decoration: underline;
}

.kachel-zeilen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kachel-zeile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.kachel-zeile:hover {
  text-decoration: underline;
}

.kachel-zeile .symbol {
  width: 15px;
  height: 15px;
  stroke-width: 2.25;
}

.kachel-zeile-zahl {
  font-variant-numeric: tabular-nums;
}

.kachel-zeile-wort {
  min-width: 0;
}

/* Sperre: schlaegt jede Frist und hebt sich von der hellroten Frist ab. */
.kachel-zeile-sperre {
  background: var(--rot, #b3261e);
  color: #ffffff;
  border-color: var(--rot, #b3261e);
}

.kachel-zeile-sperre:hover {
  color: #ffffff;
}

.kachel-zeile-rot {
  background: #fdecea;
  color: #8a1c15;
  border-color: #efb7b2;
}

.kachel-zeile-gelb {
  background: #fff4d6;
  color: #4a3800;
  border-color: #e3c56b;
}

.kachel-zeile-grau {
  background: #eef1f6;
  color: #4b5b6b;
  border-color: #d3dae3;
}

.kachel-zeile-neutral {
  background: var(--surface, #ffffff);
  color: var(--navy, #1F4570);
  border-color: var(--navy-mid, #305186);
}

@media (max-width: 560px) {
  .kachel-karte {
    padding: 12px 14px;
  }

  .kachel-zeile {
    white-space: normal;
  }
}