/* DE: Das Kachelraster der Startseiten — sechs Aufgabenfelder, jedes mit einer Kopfzeile und darunter Zeilen,
       die auf eine Fläche führen. Geteilt zwischen der Redaktions-Startseite und der Lehrkraft-Startseite:
       beide zeigen „hier sind deine Bereiche, das steht jeweils an", nur mit anderem Inhalt.

       Bewusst NICHT hier: die Zwei-Stufen-Farben (entsteht/wird sichtbar) und die KI/Mensch-Marker. Die sind ein
       REDAKTIONS-Konzept — für eine Lehrkraft bedeuten sie nichts — und bleiben deshalb in editorial-home.css.
   EN: The area-card grid shared by the editorial and teacher home pages — six areas, each a header band plus
       rows leading into a surface. Both say „here are your areas, here is what is waiting", with different
       content. Deliberately NOT here: the two-stage colours and the AI/human markers, which are an EDITORIAL
       concept (they mean nothing to a teacher) and stay in editorial-home.css. */

.home__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--sp-md);
}

.home-area {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: grid;
  align-content: start;
}

.home-area__band {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
}


.home-area__num {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
}

.home-area__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
}

.home-area__stage {
  margin-inline-start: auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step--2);
}

.home-area__rows {
  padding: var(--sp-xs) var(--sp-md) var(--sp-sm);
  display: grid;
}

.home-row {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  flex-wrap: wrap;
  padding: var(--sp-sm) var(--sp-2xs);
  border-block-end: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}

.home-row:last-child { border-block-end: none; }
.home-row:hover { background: var(--surface-2); }

.home-row__label { font-size: var(--step-0); }

.home-row__chip {
  font-size: var(--step--2);
  font-weight: 800;
  font-family: var(--font-display);
  padding: 2px var(--sp-sm);
  border-radius: var(--radius-pill);
}

.home-row__chip--count { background: var(--text); color: var(--bg); }

.home-row__arrow { margin-inline-start: auto; color: var(--text-faint); }