/* T266 – Hero referenzen.html: dunkler Anthrazit-Verlauf für lesbare weiße Überschrift.
   Wirkt nur über die Klasse .tk266-ref-hero, die ausschließlich in referenzen.html gesetzt ist. */
body.tk2 .tk2-hero.tk266-ref-hero .page-hero-media img { object-position: center 62%; }
body.tk2 .tk2-hero.tk266-ref-hero .page-hero-media::after {
  background:
    linear-gradient(180deg, rgba(var(--tk2-scrim), .2) 0%, rgba(var(--tk2-scrim), .34) 50%, rgba(var(--tk2-scrim), .8) 100%),
    linear-gradient(90deg, rgba(var(--tk2-scrim), .8) 0%, rgba(var(--tk2-scrim), .58) 42%, rgba(var(--tk2-scrim), .12) 76%, rgba(var(--tk2-scrim), 0) 100%);
}
@media (max-width: 800px) {
  body.tk2 .tk2-hero.tk266-ref-hero .page-hero-media::after {
    background:
      linear-gradient(180deg, rgba(var(--tk2-scrim), .38) 0%, rgba(var(--tk2-scrim), .46) 45%, rgba(var(--tk2-scrim), .86) 100%),
      linear-gradient(90deg, rgba(var(--tk2-scrim), .42) 0%, rgba(var(--tk2-scrim), .26) 100%);
  }
}
/* T268 – Hero-Höhe referenzen.html an den Mehrheitswert der Unterseiten angleichen.
   Gemessen (Viewport-Höhe 900): 696 px bei 1920/1440/1280, 616 px bei 1024, 522 px bei 768 (Standardregel
   min(58vh, 560px) aus styles.css), 621 px bei 390. Wirkt nur über .tk266-ref-hero (nur referenzen.html). */
body.tk2 .tk2-hero.tk266-ref-hero { min-height: 696px; }
@media (max-width: 1024px) { body.tk2 .tk2-hero.tk266-ref-hero { min-height: 616.19px; } }
@media (max-width: 800px) { body.tk2 .tk2-hero.tk266-ref-hero { min-height: min(58vh, 560px); } }
@media (max-width: 640px) {
  body.tk2 .tk2-hero.tk266-ref-hero { min-height: 620.89px; }
  /* höherer Ausschnitt: etwas nach rechts, damit Gebäude und Sonnenuntergang sichtbar bleiben */
  body.tk2 .tk2-hero.tk266-ref-hero .page-hero-media img { object-position: 64% 62%; }
}