/* ==========================================================================
   Inside360Grad – zusätzliches Seiten-CSS (ergänzt css/styles.css / Design-System)
   ========================================================================== */

/* — Reveal-on-Scroll Animation (auf mehreren Seiten verwendet) — */
[data-rvl] { opacity: 0; }
[data-rvl].in { animation: rvl .85s cubic-bezier(.16,1,.3,1) both; }
@keyframes rvl {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-rvl] { opacity: 1; animation: none; }
  [data-hero-pano] { animation: none !important; }
}

/* — Startseiten-Animationen (Hero-Panorama, Blink, Hotspot-Ring) — */
@keyframes hpan { from { background-position-x: 0px; } to { background-position-x: -2704px; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes ring { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.4); opacity: 0; } }

/* — Kategorie-Leiste (horizontal scrollbar) — */
[data-cat]::-webkit-scrollbar { height: 2px; }
[data-cat]::-webkit-scrollbar-thumb { background: var(--color-divider); }

/* — Bild-Platzhalter (ersetzt die interaktiven <image-slot>-Elemente) — */
.img-slot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.img-slot-fig { position: relative; width: 100%; height: 100%; display: block; }

/* — einfacher Hover-Fallback für Textlinks ohne eigene Klasse — */
a:hover { color: var(--color-accent); }
footer a:hover, .on-dark a:hover { color: var(--color-accent-400) !important; }
.btn:hover { text-decoration: none; }

/* — Mobile Navigation (nur Startseite) — */
[data-navlinks] { display: none; }
[data-menubtn] { display: inline-flex; }
[data-header-cta] { display: none; }
@media (min-width: 900px) {
  [data-navlinks] { display: flex !important; }
  [data-menubtn] { display: none !important; }
  [data-mobile-menu] { display: none !important; }
  [data-header-cta] { display: inline-flex !important; }
}
[data-mobile-menu] { display: none; }
[data-mobile-menu].open { display: flex; }
[data-menubtn]:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

/* — Header darf bei wenig Platz umbrechen statt überzulaufen (alle Unterseiten) — */
header > div:first-child { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 480px) {
  header > div:first-child { gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  header > div:first-child > a.btn { font-size: 13px; padding: 9px 14px; }
}

/* — 360°-Demo-Viewer — */
[data-viewer] { touch-action: pan-y; }
[data-hs] { visibility: hidden; }
@media (max-width: 560px) {
  [data-drag-hint] { display: none !important; }
}