/* Smartmacherei — Referenzen (web/referenzen/*.html): Projektseiten auf dem Ratgeber-Geruest.
   Karten der Uebersicht und Teaser stehen in landing.css (.ref-cards), weil die Landingpages sie auch nutzen. */

/* Hero: echtes Foto statt Grafik, Kurzfakten als Kacheln */
.lp-hero .visual.photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.lp-hero .visual.photo.tall img { aspect-ratio: 4 / 5; max-height: 560px; }
/* Hochformat 9:16 ungeschnitten zeigen (Wandpanel): ganzes Geraet statt Ausschnitt */
.lp-hero .visual.photo.full img { aspect-ratio: 9 / 16; width: auto; max-width: 100%; max-height: 640px; margin-inline: auto; }
.ref-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px; }
.ref-facts div { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 14px; padding: 10px 14px; }
.ref-facts dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); margin: 0 0 3px; }
.ref-facts dd { margin: 0; font-family: var(--font-body); font-size: 15px; color: #fff; line-height: 1.35; }

/* Fotostrecke */
.ref-gallery { display: grid; gap: 18px; margin: 12px 0 28px; }
.ref-gallery figure { margin: 0; }
.ref-gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 16px; border: 1px solid var(--line); background: var(--card-soft); }
/* Hochformat-Fotos (1600er-Variante 900x1600) nicht auf 4:3 beschneiden */
.ref-gallery img[width="900"] { aspect-ratio: 3 / 4; }
.lp-hero .visual .ref-svg { width: 100%; height: auto; display: block; border-radius: 20px; box-shadow: 0 30px 60px rgba(4,40,70,.35); }
.ref-gallery figcaption, .ref-split figcaption { font-family: var(--font-body); font-size: 14px; color: var(--ink-soft); margin-top: 8px; line-height: 1.45; }

/* Text mit Hochformat-Foto daneben (einzelnes Motiv innerhalb der Umsetzung) */
.ref-split { display: grid; gap: 18px; align-items: start; }
.ref-split figure { margin: 0 0 20px; }
.ref-split img { width: 100%; height: auto; display: block; border-radius: 16px; border: 1px solid var(--line); background: var(--card-soft); }

/* Eingesetzte Technik */
.article .ref-tech { list-style: none; padding: 0; margin: 8px 0 24px; display: grid; gap: 8px; }
.article .ref-tech li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin: 0; font-size: 15px; line-height: 1.45; }
.article .ref-tech li.noimg { grid-template-columns: minmax(0, 1fr); }
.ref-tech .pic { width: 64px; height: 64px; border-radius: 12px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.ref-tech .pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ref-tech b { display: block; font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 16px; }

/* Hinweiskasten: "Was noch folgt", "Aus der Praxis", "Mein Tipp" */
.article .ref-box { border: 1px dashed color-mix(in srgb, var(--deep) 45%, transparent); background: color-mix(in srgb, var(--deep) 5%, transparent); border-radius: 16px; padding: 18px 22px; margin: 8px 0 24px; }
.article .ref-box h3 { margin-top: 0; }
.article .ref-box p:last-child, .article .ref-box ul:last-child { margin-bottom: 0; }
.ref-credit { font-size: 12px; color: var(--ink-soft); }

@media (min-width: 720px) {
  .ref-gallery { grid-template-columns: 1fr 1fr; }
  .ref-gallery .wide { grid-column: 1 / -1; }
  .ref-gallery .wide img { aspect-ratio: 16 / 9; }
  .ref-split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 560px) {
  .ref-facts { grid-template-columns: 1fr; }
  .lp-hero .visual.photo.tall img { max-height: 420px; }
}