/* Small targeted overrides to reduce CLS */

/* Global font metrics fallback to reduce swap-jumps */
html { font-size-adjust: from-font; }

/* 1) Material Symbols/Icon placeholders: reserve space to avoid width jumps */
.material-symbols-outlined,
.material-symbols-filled,
.material-icons {
  display: inline-block;
  width: 1.5em; /* reserve width so text doesn't shift when font loads */
  min-width: 1.5em;
  text-align: center;
  line-height: 1;
}

/* Slightly smaller in buttons/feature rows to be consistent */
.feature i,
.btn i,
.accordion-toggle i,
.contact-item i {
  width: 1.5em;
  min-width: 0.7em;
}

/* 2) Prevent initial hero-title/subtitle jump while variable font loads */
/* Gate character animations until fonts are ready */
.fonts-loading .char-animated {
  animation: none !important;
}

/* Keep hero-subtitle height stable before typewriter runs */
.hero-subtitle[data-reserved-height] {
  min-height: var(--reserved-height, 0px);
}

/* Briefly reserve width during character wrapping */
.hero-title[data-reserved-inline] {
  inline-size: var(--reserved-inline-size, auto);
}

/* 3) Avoid nav height shift on mobile when menu toggles/adds items */
.nav-menu {
  contain: layout paint; /* isolate to reduce ripple of layout changes */
}

/* 4) Pictures/videos: rely on container aspect-ratio + width/height attributes added in HTML */

/* 5) Accordion content: start hidden without affecting surrounding layout */
.text-overlay-box.bottom-left:not(.accordion-open) .accordion-content {
  display: block;
}

/* 6) Reserve initial space for dynamic MVP sections to reduce early shift */
#mvp-components-placeholder {
  min-height: 100vh;
}

/* Typing overlay: animates a mask over existing text to avoid reflow/LCP hit */
.hero-subtitle { position: relative; }
.hero-subtitle .typing-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, currentColor 0 0) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* reveal via background-size */
  white-space: pre-wrap;
  will-change: background-size;
}
.hero-subtitle .typing-overlay.typing-run {
  animation: typingMask 2.2s steps(30, end) 0.2s both;
}
@keyframes typingMask {
  from { background-size: 0% 100%; }
  to   { background-size: 100% 100%; }
}


/* Reserve sichtbare Fläche im Hero vor: der Background-Container streckt sich immer auf 100vh. */
.hero {
  contain-intrinsic-size: 100vh;
}

/* Inhalt im Hero isolieren, damit späte Effekte nicht global reflowen */
.hero-content {
  contain: content;
}

/* Sicherstellen, dass der Video-Container fix ist und nicht die Seite verschiebt */
.hero-background {
  contain: layout paint;
}

/* Titel/Subtitle: defensiv etwas Blockreserve, um Font-/Icon-Swap abzufedern */
.hero-title { min-height: 2.8em; }
.hero-subtitle { min-height: 2.6em; }