/*! Safari Compatibility Pack — global, future-proof helpers
   Load this file LAST after your main theme CSS.
   It adds robust viewport, backdrop, sticky, safe-area, and utility classes.
*/

/* ========== 0) Root tokens & safe-area ========== */
:root{
  --vh: 1vh; /* via JS korrigierte Viewport-Höhe */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --glass-blur: 14px;
  --glass-blur-strong: 22px;
  --glass-bg: rgba(12,14,18,.45);
  --glass-border: rgba(255,255,255,.14);
}

/* iOS/WebKit: fill-available & softer blur (Performance) */
@supports (-webkit-touch-callout: none) {
  html, body { height: -webkit-fill-available; }
  :root{ --glass-blur: 8px; --glass-blur-strong: 14px; }
}

/* Transparenz reduzieren respektieren */
@media (prefers-reduced-transparency: reduce) {
  :root{ --glass-blur: 0px; --glass-blur-strong: 0px; }
}

/* ========== 1) Viewport-Utilities (statt 100vh) ========== */
.vh-100      { height: 100dvh; height: 100svh; height: calc(var(--vh) * 100); }
.min-vh-100  { min-height: 100dvh; min-height: 100svh; min-height: calc(var(--vh) * 100); }
.max-vh-100  { max-height: 100dvh; max-height: 100svh; max-height: calc(var(--vh) * 100); }
.viewport-full { min-height: 100dvh; min-height: 100svh; min-height: calc(var(--vh) * 100); }

/* ========== 2) Safe-Area ========== */
.pad-safe        { padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }
.pad-safe-top    { padding-top: var(--safe-top); }
.pad-safe-bottom { padding-bottom: var(--safe-bottom); }
.mar-safe-bottom { margin-bottom: var(--safe-bottom); }

/* ========== 3) Glass / Backdrop ========== */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
}
.glass-strong {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  backdrop-filter: blur(var(--glass-blur-strong));
  border: 1px solid var(--glass-border);
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass-strong { -webkit-backdrop-filter:none; backdrop-filter:none; background: rgba(12,14,18,.85); }
}

/* ========== 4) Sticky (Safari-sicher) ========== */
.sticky-top { position: sticky; top: 0; z-index: 1000; }
.sticky-bottom { position: sticky; bottom: 0; z-index: 1000; }
/* Eltern von sticky-Kindern sollten overflow:visible haben */
.sticky-container-safe { overflow: visible !important; }

/* ========== 5) Scrollbar (Best-Effort) ========== */
@supports selector(::-webkit-scrollbar) {
  *::-webkit-scrollbar { width: 8px; height: 8px; }
  *::-webkit-scrollbar-thumb { border-radius: 8px; }
}

/* ========== 6) Motion-Safety ========== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ========== 7) Media Helpers ========== */
.media-cover  { width: 100%; height: 100%; object-fit: cover; }
.media-contain{ width: 100%; height: 100%; object-fit: contain; }

/* ========== 8) Stabiler Vollscreen-Container ========== */
.viewport-stable {
  height: 100dvh; height: 100svh; height: calc(var(--vh) * 100);
  overflow: hidden;
}