/* ==========================================================================
   HOME — seitenspezifische Komposition + Motion
   Motion-Werte exakt nach Spezifikation Abschnitt 07
   ========================================================================== */

/* --- Hero-Komposition --------------------------------------------------- */

.hero__eyebrows {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Die Spaltenbreite begrenzt die Zeile bereits — eine zusätzliche
   ch-Grenze würde das längste Wort unnötig umbrechen. */
.hero__copy .display-xl { max-width: none; margin: var(--space-8) 0 var(--space-5); }
.hero__copy .lead { color: rgba(17, 19, 21, .72); max-width: 34ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-8);
}

/* Fakten-Leiste, überlappt den Hero (Desktop) */
.hero__facts {
  position: absolute;
  inset-inline: 48px;
  bottom: 82px;   /* schiebt die Leiste 46 px in die Bildfläche hinein (Spezifikation 04.1) */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--color-line);
  box-shadow: var(--shadow-float);
}

.hero__fact {
  display: grid;
  gap: 4px;
  padding: 20px 24px;
  background: var(--color-paper);
}
.hero__fact dt {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.hero__fact dd {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* Portrait im Hero: freigestellt, sitzt unten auf der Aqua-Fläche */
.hero__portrait {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: end;
  justify-items: center;
}
/* Auf Desktop endet das Portrait über der Faktenleiste, damit die Leiste
   nicht in den Anzug schneidet. */
@media (min-width: 1024px) {
  .hero__portrait { padding-bottom: 34px; }
}

.hero__portrait img {
  width: auto;
  max-width: 92%;
  height: 96%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 24px 48px rgba(15, 38, 44, .22));
}

@media (max-width: 1023px) {
  .hero__facts {
    position: static;
    inset: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
  }
  .hero__copy .display-xl { margin-top: var(--space-6); }
  .hero__actions { margin-top: var(--space-6); }
}

@media (max-width: 767px) {
  /* Zwei Spalten sind hier zu eng: „Deutsch · English · العربية" bricht sonst
     unschön um oder drückt die Spalte auf. */
  .hero__facts { grid-template-columns: minmax(0, 1fr); }
  .hero__fact { padding: 16px 20px; }
}

@media (max-width: 479px) {
  .hero__actions .button { width: 100%; }
}

/* --- Mission-Statement -------------------------------------------------- */

.mission {
  position: relative;
  text-align: center;
  padding-block: clamp(80px, 9vw, 120px) clamp(64px, 7vw, 96px);
}

.mission__title {
  max-width: 15ch;
  margin-inline: auto;
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 500;
}
.mission__title em { font-style: normal; color: var(--color-coral); }

.mission .lead {
  max-width: 520px;
  margin: var(--space-5) auto 0;
}

/* Vier Bildmedaillons, asymmetrisch, nie über Textzeilen */
.mission__medallions {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mission__medallion {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-paper);
  box-shadow: var(--shadow-soft);
}
.mission__medallion:nth-child(1) { top: 14%;  left: 7%;  width: 56px; height: 56px; }
.mission__medallion:nth-child(2) { top: 62%;  left: 15%; }
.mission__medallion:nth-child(3) { top: 20%;  right: 9%; }
.mission__medallion:nth-child(4) { top: 68%;  right: 16%; width: 48px; height: 48px; }
.mission__medallion img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1023px) {
  .mission__medallions {
    position: static;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: var(--space-6);
  }
  .mission__medallion {
    position: static;
    width: 48px !important;
    height: 48px !important;
  }
}

/* --- Sprach-Band -------------------------------------------------------- */

.lang-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.lang-band__item {
  padding: 28px;
  border-radius: var(--radius-card);
  background: var(--color-cloud);
}
.lang-band__item:nth-child(2) { background: var(--color-ice); }
.lang-band__item:nth-child(3) { background: var(--color-lime); }
.lang-band__native {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -.03em;
  font-weight: 500;
  margin-bottom: 8px;
}
.lang-band__item:nth-child(3) .lang-band__native { font-family: var(--font-ar); letter-spacing: 0; }

@media (max-width: 767px) { .lang-band { grid-template-columns: 1fr; } }

/* --- Notfall-Streifen --------------------------------------------------- */

.urgent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: clamp(28px, 3.4vw, 44px);
  border-radius: var(--radius-card);
  background: var(--color-coral);
  /* Tinte statt Weiß: Weiß auf Coral erreicht nur 3,1 : 1. */
  color: var(--color-ink);
}
.urgent h3 { max-width: 20ch; }
.urgent p { max-width: 46ch; margin-top: 10px; color: rgba(17, 19, 21, .82); font-size: 15px; line-height: 24px; }
.urgent__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- Scroll-Reveals (Spezifikation 07) ---------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Mask-Reveal für große Bildflächen */
[data-reveal="mask"] {
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path var(--dur-mask) var(--ease-out),
    opacity var(--dur-mask) var(--ease-out);
}
[data-reveal="mask"].is-revealed { clip-path: inset(0); }

/* Hero-Eintritt: 80 ms Staffelung, 720 ms Gesamtdauer, Bild 1.04 → 1.00 */
.hero__copy > * {
  opacity: 0;
  transform: translateY(20px);
  animation: heroIn 720ms var(--ease-out) forwards;
}
.hero__copy > *:nth-child(1) { animation-delay: 120ms; }
.hero__copy > *:nth-child(2) { animation-delay: 200ms; }
.hero__copy > *:nth-child(3) { animation-delay: 280ms; }
.hero__copy > *:nth-child(4) { animation-delay: 360ms; }

.hero__media { animation: heroMedia 900ms var(--ease-out) 280ms both; }
.hero__facts { animation: heroIn 720ms var(--ease-out) 520ms both; }

@keyframes heroIn {
  to { opacity: 1; transform: none; }
}
@keyframes heroMedia {
  from { opacity: 0; scale: 1.04; }
  to   { opacity: 1; scale: 1; }
}

/* --- Reduced Motion (Spezifikation 07) ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .hero__copy > *, .hero__media, .hero__facts { opacity: 1; transform: none; scale: 1; }
  [data-autoplay] { --autoplay: paused; }
}