/* ## DATEI css/seite-arbeiten.css | Zusatz fuer die Uebersicht /arbeiten/. Ein Fall pro Zeile:
   Bild im Browser-Rahmen (Rahmen und Karte aus style.css ## ARBEITEN), daneben drei beschriftete
   Zeilen. Laedt NACH style.css, nutzt nur dessen Tokens, bringt keine Farbe und keine Schrift mit.
   ## KARTE FALL - RESPONSIVE
   ## FINDEN grep -rn "## FALL" 05_website/site/vorschau/arbeiten 05_website/site/vorschau/css
   ## ZWILLING arbeiten/index.html ## FALL */

/* ## FALL | Raster 7/5, Bild links, Text rechts. Die Variante "gespiegelt" dreht das fuer den
   zweiten Fall. Die drei Zeilen sind eine Definitionsliste, Mono-Label ueber dem Text, Hairline
   dazwischen. | HTML arbeiten/index.html ## FALL */
.fall { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-block: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line); }
.fall:first-of-type { border-top: 0; padding-top: 0; }
.fall--gespiegelt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fall--gespiegelt .fall__bild { order: 2; }
.fall__text .hinweis { margin-bottom: 20px; }
.fall__text h2 { font-size: var(--step-2); margin-bottom: 20px; }
.fall__zeilen { margin: 0; }
.fall__zeilen > div { padding: 14px 0; border-top: 1px solid var(--line); }
.fall__zeilen > div:last-child { border-bottom: 1px solid var(--line); }
.fall__zeilen dt { color: var(--grey); margin-bottom: 6px; }
.fall__zeilen dd { margin: 0; color: var(--ink-soft); }
.fall__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 24px; }
.fall__note { margin-top: clamp(32px, 4vw, 48px); max-width: 60ch; }

/* ## RESPONSIVE | Unter 900px eine Spalte, Bild immer zuerst, auch beim gespiegelten Fall. */
@media (max-width: 900px) {
  .fall, .fall--gespiegelt { grid-template-columns: 1fr; gap: 28px; }
  .fall--gespiegelt .fall__bild { order: 0; }
}