/* =========================================================================
   Seiteneigener Regelsatz /referenzen/ (SC-37)

   Genau ein Bauteil, das es sonst nirgends auf der Website gibt: die
   Falliste. Alles andere auf dieser Seite - Seitenkopf, Logoleiste,
   Punktreihe, Kartenreihe, Beleg, Abschluss - steht vollstaendig im
   gemeinsamen assets/css/site.css und wird hier nicht angefasst.

   Warum eine eigene Liste und keine .deck-Kartenreihe
   ---------------------------------------------------
   Ein Fall traegt Bildmarke, Branche, Behauptung, Zusammenfassung, vier
   Kennzahlen und einen Weg. Das passt nicht in eine Karte der
   Kartenreihe, und eine Kartenreihe mit einer einzigen Karte darin sieht
   aus wie ein Fehler. Die Falliste ist deshalb eine Liste: mit einem
   Eintrag eine ruhige Zeile, mit fuenf Eintraegen ein Register - ohne
   dass sich an der Seite etwas aendert.

   Der Eintrag haengt an 'scriptomat-site' und wird danach ausgeliefert
   (inc/assets.php, scriptomat_page_styles()).
   ========================================================================= */

.cases {
  list-style: none;
  margin: 62px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

/* --- Ein Fall -----------------------------------------------------------
   Zwei Spalten: links die Bildmarke in Originalproportion, rechts der
   Satz. Die Bildmarke bekommt eine feste Spaltenbreite, damit ein
   zweiter Fall mit breiterem Logo die Textkante nicht verschiebt. */
.case {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-block: 48px;
  border-bottom: 1px solid var(--line);
}

.case__brand {
  display: flex;
  align-items: center;
  min-height: 56px;
}

.case__brand img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
}

.case__sector {
  margin: 0;
  font-family: var(--body);
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.case__title {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--ink);
}

/* Der ganze Titel ist der Weg. Er traegt trotzdem keine eigene Farbe:
   die Liste soll gelesen und nicht ueberflogen werden. */
.case__title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.case__title a:hover { border-bottom-color: var(--brand); }
.case__title a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.case__text {
  margin: 14px 0 0;
  font-size: 19px;
  line-height: 1.62;
  color: var(--ink-body);
  max-width: 62ch;
}

/* --- Die Kennzahlen -----------------------------------------------------
   Dieselbe Rolle wie .proof__figures im Beleg: Nachweis, nicht Aussage.
   Deshalb auf einer Haarlinie, in einem Grad unter der Zusammenfassung
   und ohne Hervorhebung einer einzelnen Zahl. */
.case__figures {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 44px;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.case__figures > div { min-width: 0; }

.case__figures dt {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
}

.case__figures dd {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-quiet);
}

.case__go { margin: 24px 0 0; }

/* --- Schmale Flaechen ---------------------------------------------------
   Unter 860 px faellt die Bildmarke ueber den Satz; sie behaelt ihre
   Groesse, damit die Marke lesbar bleibt. Unter 560 px stehen die
   Kennzahlen zu zweit statt in einer Zeile - vier Zahlen nebeneinander
   waeren auf 375 px vier abgeschnittene Zahlen. */
@media (max-width: 860px) {
  .cases { margin-top: 44px; }

  .case {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-block: 38px;
  }

  .case__brand { min-height: 0; }
  .case__title { font-size: 26px; }
  .case__text { font-size: 18px; }
}

@media (max-width: 560px) {
  .case__figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
  }
  .case__figures dt { font-size: 23px; }
}