/* ============================================================
   Hinweisleiste der Musterseite zum Paket Platin
   (partials/expert-sample-note.php). Sie scrollt mit: Ab 64rem
   steht die ganze Leiste in einer Zeile und bleibt vollständig
   oben. Darunter stehen Text und Knöpfe untereinander; beim Lesen
   bleibt nur die Knopfzeile stehen, der Text scrollt weg.
   js/expert-sample-bar.js misst dafür, wie weit die Leiste über
   den oberen Rand hinausragen darf (--sample-bar-hide), und wie
   hoch der stehende Teil ist (--sample-bar-stuck). Ohne Skript
   bleibt die ganze Leiste stehen.
   ============================================================ */
.sample-bar {
  position: sticky;
  top: calc(-1 * var(--sample-bar-hide, 0px));
  z-index: 40;
  box-shadow: 0 8px 20px -16px oklch(0.30 0.04 197 / 0.55);
}
/* Mit dem Seitenkopf der Gutachter-Gesellschaft steht die Leiste
   unter ihm (Kopf 4.75rem plus Linie). */
body:not(.page-bare) .sample-bar {
  top: calc(4.75rem + 1px - var(--sample-bar-hide, 0px));
}

.sample-bar .sample-bar-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.6rem;
  row-gap: 0.5rem;
  align-items: start;
  padding-block: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.5;
}
.sample-bar .sample-bar-inner > svg { margin-top: 0.15rem; }
.sample-bar .sample-bar-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}
.sample-bar .sample-bar-actions .btn { white-space: nowrap; }

@media (min-width: 64rem) {
  .sample-bar .sample-bar-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 1rem;
    align-items: center;
  }
  .sample-bar .sample-bar-inner > svg { margin-top: 0; }
  .sample-bar .sample-bar-actions { grid-column: 3; flex-wrap: nowrap; }
}

/* Sprungziele und fokussierte Elemente bleiben unter der stehenden
   Leiste sichtbar. */
html:has(body.page-bare .sample-bar) {
  scroll-padding-top: calc(var(--sample-bar-stuck, 6rem) + 1.5rem);
}
html:has(body:not(.page-bare) .sample-bar) {
  scroll-padding-top: calc(5.5rem + var(--sample-bar-stuck, 6rem));
}