/* =====================================================================
   FVD EVENT: Seiten Referenzen und Über uns
   Ergänzt style.css um das, was nur diese beiden Seiten brauchen.
   Eingebunden über den Kopfblock von quelle/seiten/referenzen.html
   und quelle/seiten/ueber-uns.html.
   ===================================================================== */

/* Seitenkopf: Ausschnitt so legen, dass das Motiv rechts neben dem Text sichtbar bleibt */
.seite-referenzen .seitenkopf__bild { object-position: 62% 100%; }
.seite-ueber-uns .seitenkopf__bild { object-position: 58% 100%; }

/* ---------- Referenzen ---------- */

/* Einsätze: Zeilen aus Bild und Text, das Bild steht im Wechsel links und rechts */
.ref-zeilen { display: grid; gap: clamp(56px, 8vw, 128px); }
/* Steht das Bild rechts, bleibt es so breit wie in den anderen Zeilen */
.ref-zeile.duo--gedreht { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.ref-zeile h3 { font-size: clamp(1.5rem, 2.7vw, 2.375rem); line-height: 1.06; letter-spacing: -.02em; }
.ref-zeile .lead { max-width: 30em; }
/* Die Begriffe sind kurz (Anlass, Von uns). Deshalb bleiben sie auch auf dem Handy neben der Erklärung stehen. */
.ref-zeile .merkmale > div { grid-template-columns: minmax(5.5em, 24%) minmax(0, 1fr); }
.ref-zeile__weiter { margin-top: clamp(18px, 2vw, 26px); }

/* Galerie: Die Unterschrift liegt über dem Knopf und darf den Klick nicht abfangen */
.seite-referenzen .galerie figcaption { pointer-events: none; }

/* ---------- Beide Seiten: Aufruf auf Gelb ---------- */
/* Links Überschrift, Text und Knopf, rechts eine Liste oder Merkmale */
.ref-aufruf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.ref-aufruf h2 { font-size: clamp(2.125rem, 4.6vw, 4.25rem); line-height: 1; }
.ref-aufruf .lead { margin-top: 20px; max-width: 30em; }
.ref-aufruf .btn { margin-top: 30px; }
.ref-aufruf .merkmale { margin-top: 0; }
.ref-aufruf__punkte { padding-left: clamp(18px, 2.4vw, 32px); border-left: 3px solid var(--blau); font-size: 1.125rem; font-weight: 600; }

/* ---------- Über uns ---------- */

/* Zeitleiste: Jahr links, Titel und Text rechts, getrennt durch feine Linien */
.ueber-zeitleiste { margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--linie); }
.ueber-zeitleiste > li { display: grid; grid-template-columns: clamp(5.4rem, 9vw, 8rem) minmax(0, 1fr); gap: 6px clamp(14px, 2vw, 28px); align-items: start; padding: clamp(16px, 1.8vw, 22px) 0; border-bottom: 1px solid var(--linie); }
.ueber-zeitleiste__jahr { font-size: clamp(1.625rem, 2.4vw, 2.25rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--blau); font-variant-numeric: tabular-nums; }
.ueber-zeitleiste h3 { margin-bottom: 4px; font-size: 1.125rem; line-height: 1.25; }
.ueber-zeitleiste p { color: var(--leise); }
/* Foto zur Geschichte: Das Banner des Vereins hängt am rechten Bildrand */
.ueber-geschichte__bild img { object-position: 100% 50%; }

/* ---------- Kleinere Bildschirme ---------- */
@media (max-width: 820px) {
  .ref-zeile.duo--gedreht, .ref-aufruf { grid-template-columns: minmax(0, 1fr); }
}

/* Künstler, mit denen wir gearbeitet haben (14.10.2026) */
.ref-kuenstler { margin-top: clamp(48px, 6vw, 88px); padding-top: clamp(26px, 3vw, 44px); border-top: 3px solid var(--blau); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 12px clamp(28px, 5vw, 88px); }
.ref-kuenstler h3, .ref-kuenstler > p:first-of-type { grid-column: 1; }
.ref-kuenstler > p:first-of-type { color: var(--leise); }
.ref-kuenstler .punkte { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; font-size: 1.125rem; }
.ref-kuenstler .nur-entwurf { grid-column: 1 / -1; }
@media (max-width: 820px) { .ref-kuenstler { grid-template-columns: minmax(0, 1fr); } .ref-kuenstler .punkte { grid-column: 1; grid-row: auto; } }

/* Anlässe: was meistens dabei ist, als kleine Marken (21.10.2026) */
.anlass-teile { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.anlass-teile li { padding: 4px 10px 4px 22px; position: relative; font-size: .875rem; font-weight: 600; border: 1px solid var(--linie); }
.anlass-teile li::before { content: ""; position: absolute; left: 8px; top: 50%; width: 8px; height: 9.2px; margin-top: -4.6px; background: var(--gelb); clip-path: var(--sechseck); }