/* ==========================================================================
   Baustein: Prinzipien-Raster (Problem-Sektion)
   Datei: css/bausteine/prinzipien-raster.css
   Gebraucht auf: work-zone.html (Sektion 2, Problem); vorgesehen für index.html,
   Sektion 3 Kundenprobleme (ausgeblendet, noch Stub)
   Bauvorschrift: DESIGN.md, Baustein "Problem-Sektion"
   Regeln: docs/entwicklung.md. Klassen-Präfix dieser Datei siehe unten,
   Tokens und Rollen kommen aus css/style.css und werden hier nicht neu definiert.

   Stand 2026-09-29, gebaut für work-zone.html nach docs/site-architecture.md: "Vorlage ist
   der Stub der Kundenprobleme auf der Startseite (Split-Kopf plus Prinzipien-Raster)". Der
   Kopf teilt die Maße des Split-Kopfs aus css/style.css (1.35fr / .65fr, --gap-col, unten
   ausgerichtet), trägt rechts aber das Bild statt eines Absatzes, deshalb eine eigene
   Klasse. Darunter das Raster aus der Vorlage in DESIGN v1.6 (Haarlinie oben, Trennlinien
   rechts), hier mit drei Sätzen im Kunden-O-Ton und ohne Ziffern: Die drei Sätze sind keine
   Abfolge, eine Nummerierung würde eine behaupten.
   ========================================================================== */

/* Präfix: .principle-* */

/* --------------------------------------------------------------------------
   1. Kopf: Aussage links, Bild rechts
   -------------------------------------------------------------------------- */
.principle-head {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: var(--gap-col);
  align-items: end;
}
/* Umbruch der H2: in der linken Spalte stand sonst "zehn." allein in der letzten Zeile.
   Eigene Klasse wie .kpi-title in den Kennzahlen, keine Regel auf .display-2. */
.principle-titel { text-wrap: balance; }
/* Bildrahmen: 4:3, --r-xl wie Kacheln und Prozesskarten, Grund --paper, damit auch ein
   Foto mit hellem Grund sich von der weißen Fläche abhebt. Das Raster streckt den
   Platzhalter aus css/bausteine/_stub.css auf die volle Fläche, ein Bild füllt sie per
   object-fit. Dekor, deshalb im Markup aria-hidden und alt="". */
.principle-bild {
  margin: 0;
  display: grid;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  background: var(--paper);
  overflow: hidden; /* Fallback */
  overflow: clip;   /* beschneidet das Bild an der Rundung, kein Scroll-Container (DESIGN.md, Regel 9) */
}
.principle-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   2. Raster: drei Sätze nebeneinander
   -------------------------------------------------------------------------- */
.principle-grid {
  list-style: none;
  margin: 72px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.principle-item {
  padding: 26px 28px 8px 0;
  border-right: 1px solid var(--line);
}
.principle-item + .principle-item { padding-left: 28px; }
.principle-item:last-child { border-right: 0; }
/* Der Satz trägt heading-s im Markup, hier nur die Breite: bei 1920 px liefe er sonst über
   rund 60 Zeichen je Zeile. */
.principle-text { max-width: 26em; }

/* --------------------------------------------------------------------------
   3. Breakpoint 980 px: alles untereinander
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .principle-head { grid-template-columns: 1fr; gap: 42px; }
  .principle-bild { max-width: 560px; }
  .principle-grid { grid-template-columns: 1fr; margin-top: 56px; }
  .principle-item,
  .principle-item + .principle-item {
    padding: 22px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .principle-item:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   4. Breakpoint 640 px
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .principle-head { gap: 32px; }
  .principle-grid { margin-top: 48px; }
}