/* ==========================================================================
   Seite: Demonstrationsprojekte (/beispielprojekte)
   Ergänzt site.css um seitenspezifische Feinheiten. Tokens und Bausteine
   kommen aus site.css; hier wird nichts davon überschrieben, nur ergänzt.
   ========================================================================== */

/* Datenblatt innerhalb eines Panels: Panelkopf liefert die obere Linie bereits */
.beispielprojekte .kopf-datenblatt .datenblatt { border-top: 0; }
.beispielprojekte .kopf-datenblatt .datenblatt > div:last-child { border-bottom: 0; padding-bottom: 0; }

/* Erste Fallstudie folgt direkt auf die Sektionskopfzeile – keine doppelte Linie */
.beispielprojekte .fallstudie:first-of-type { border-top: 0; padding-top: 0; }

/* Vier Titel auf einer Seite: eine Stufe kleiner als die Sektions-H2 */
.beispielprojekte .fallstudie header { display: grid; align-content: start; }
.beispielprojekte .fallstudie header h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.beispielprojekte .fallstudie header p { max-width: 44ch; }
.beispielprojekte .fallstudie-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: var(--s-5) 0 0; padding: 0; list-style: none; font-family: var(--schrift-protokoll); font-size: .75rem; letter-spacing: .04em; color: var(--graphit); }
.beispielprojekte .fallstudie-meta strong { color: var(--tinte); font-weight: 500; }

/* Fußzeile der Fallstudie: Hinweis links, Link rechts */
.beispielprojekte .fallstudie footer { padding-top: var(--s-4); border-top: 1px solid var(--linie); }

@media (max-width: 899px) {
  /* Unter 900 px steht das Bildschirmfoto über dem Text */
  .beispielprojekte .fallstudie .systemkarte { order: -1; }
}