/* ════════════════════════════════════════════════════════════════
   JUNO · Göttinnen-Rauhnächte 2026 · Salespage
   base.css – Grundlagen für beide Kompositionen

   Zwei Kompositionen, eine Umschaltgrenze (in allen Dateien gleich):
   DESKTOP (V9): Querformat  (orientation: landscape) – auch Smartphones quer
   MOBILE  (V6): Hochformat  (orientation: portrait)  – Smartphones, Tablets hochkant
   Ab 650 px Breite steht die Mobile-Komposition als 430-px-Spalte in der Mitte.

   html.static = statische Fassung (ohne JavaScript oder bei
   „Bewegung reduzieren“). Alle Inhalte bleiben erreichbar.
   ════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-anchor: none; } /* v1.1.1: kein automatisches Nachrücken bei Höhenänderungen der Scroll-Szenen */
body { font-family: Quicksand, Arial, sans-serif; }
img { border: 0; }

/* Sprunglink: nur bei Tastaturbedienung sichtbar */
.skip-link {
  position: absolute; left: 12px; top: 12px; z-index: 2000;
  padding: 10px 16px; border-radius: 40px;
  background: #f6f2ee; color: #1e371a;
  font: 600 13px Quicksand, Arial, sans-serif; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Fokusrahmen nur bei Tastaturbedienung */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid #c6a15b;
  outline-offset: 3px;
}

/* Bildfragmente sind Dekoration: nie markierbar, nie ziehbar */
.frag, .s2-frag, .margin-art, .footer-floral, .hz-art, .oracle-card img {
  user-select: none; -webkit-user-select: none;
}
.art-picture { display: contents; }

/* Sichtbarkeit je Komposition */
@media (orientation: landscape) {
  .mobile-only { display: none !important; }
}
@media (orientation: portrait) {
  .desktop-only { display: none !important; }
}

/* ─── v1.0.14 · Reveals (Steuerung in js/reveals.js) ───────────────
   Nur aktiv mit .rv-ready (JavaScript an, Bewegung nicht reduziert).
   Überschriften zeilenweise, Text als Block; jeweils sanft von unten. */
.rv-ready .rv-h .rv-w {
  display: inline-block; opacity: 0; transform: translate3d(0, .45em, 0);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--rv-d, 0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--rv-d, 0ms);
}
.rv-ready .rv-h.rv-in .rv-w { opacity: 1; transform: none; }
.rv-ready .rv-b {
  opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--rv-d, 0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--rv-d, 0ms);
}
.rv-ready .rv-b.rv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv-ready .rv-h .rv-w, .rv-ready .rv-b { opacity: 1 !important; transform: none !important; transition: none !important; }
}