/* Kopfzeile lesbar vor hellem Himmel, Menü-Knopf mit drei Strichen (Schritt 32, 24.10.2026).
   Nicolas: «aus den zwei Strichen drei Striche … einen ganz leichten schwarzen Verlauf bei der Navbar, dass man das
   besser sieht». Ergänzt rp-menue.css; Selektoren mit .rp-kopf davor, damit sie die Grundregeln sicher schlagen. */

/* ---------- Drei Striche: 26 / 26 / 18 px, Abstand 7 px; Hover alle 26 px; offen ein X ---------- */
.rp-kopf .rp-burger span { width: 26px; transform: translate(-50%, -50%) translateY(-7px); }
.rp-kopf .rp-burger span:nth-child(2) { width: 26px; transform: translate(-50%, -50%); }
.rp-kopf .rp-burger span:nth-child(3) { width: 18px; transform: translate(-50%, -50%) translateY(7px); }
.rp-kopf .rp-burger:hover span:nth-child(3) { width: 26px; }
.rp-kopf .rp-burger[aria-expanded="true"] span:nth-child(1) { width: 26px; transform: translate(-50%, -50%) rotate(45deg); }
.rp-kopf .rp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translate(-50%, -50%) scaleX(.2); }
.rp-kopf .rp-burger[aria-expanded="true"] span:nth-child(3) { width: 26px; transform: translate(-50%, -50%) rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) {
  .rp-kopf .rp-burger span { transition: transform .5s var(--rp-ease), width .4s var(--rp-ease), opacity .3s var(--rp-ease-soft), background .4s; }
}
@media (forced-colors: active) { .rp-kopf .rp-burger span { background: ButtonText; } }

/* ---------- Ganz leichter dunkler Verlauf hinter der weissen Kopfzeile über dem Titelbild ---------- */
.rp-kopf::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: calc(100% + 64px);
  background: linear-gradient(180deg, rgba(0, 0, 0, .44) 0%, rgba(0, 0, 0, .26) 48%, rgba(0, 0, 0, .09) 76%, rgba(0, 0, 0, 0) 100%);
  /* gemessen 24.10.2026 /ueberuns 1440 px, hellste 5 % des Himmels hinter «Über uns»: ohne 1.19:1, mit .36 2.72:1 */
  opacity: 0; pointer-events: none;
}
.rp-kopf.ist-hell:not(.gescrollt):not(.menue-offen)::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .rp-kopf::before { transition: opacity .45s var(--rp-ease-soft); }
}
@media print { .rp-kopf::before { display: none; } }