@font-face {
  font-family: Syne;
  src: url('assets/syne-800-latin.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --flight-paper: #dce6ed;
  --flight-ink: #202a35;
  --flight-blue: #344c9c;
}
.flight-world { background: var(--flight-paper); color: var(--flight-ink); overflow: hidden; isolation: isolate; color-scheme: light; }
.flight-hero { position: relative; min-height: 680px; height: 100svh; max-height: 1240px; isolation: isolate; }
.flight-header { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 36px 4.8%; }
.flight-wordmark { font-family: Syne, sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -.055em; line-height: .95; text-decoration: none; }
.flight-wordmark span { display: block; }
.flight-nav { display: flex; gap: clamp(28px, 3.5vw, 65px); font-size: 13px; font-weight: 450; }
.flight-nav a { padding-block: 14px; text-decoration: none; text-underline-offset: 6px; }
.flight-nav a:hover { text-decoration: underline; }
.flight-hero a:focus-visible, .flight-trigger:focus-visible { outline: 2px solid var(--flight-blue); outline-offset: 8px; }
.flight-eyebrow { position: absolute; left: 5%; top: 20%; margin: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; }
.flight-title { margin: 0; font-family: Syne, sans-serif; font-weight: 800; letter-spacing: -.065em; line-height: .88; }
.flight-title-first { position: absolute; left: 4.6%; top: 26%; font-size: clamp(76px, min(6.6vw, 12svh), 136px); z-index: 3; }
.flight-title-first > span { display: block; font-size: .78em; margin-bottom: .04em; }
.flight-title-second { position: absolute; right: 4.8%; top: 69%; font-size: clamp(76px, min(7.5vw, 12svh), 156px); z-index: 3; color: var(--flight-blue); white-space: nowrap; }
.flight-art { position: absolute; right: 2.5%; top: 12%; width: min(54%, 84svh); aspect-ratio: 3/2; z-index: 2; transform: rotate(-13deg); }
.butterfly { position: relative; width: 100%; height: 100%; perspective: 1400px; }
.butterfly-still { display: block; width: 100%; height: 100%; object-fit: contain; }
.butterfly-parts { position: absolute; inset: 0; visibility: hidden; }
.butterfly-wing, .butterfly-body { position: absolute; inset: 0; background: url('assets/pfauenauge-brown-1536.webp') center / 100% 100% no-repeat; }
.wing-left { clip-path: polygon(0 0, 50% 0, 46% 43%, 48% 84%, 50% 100%, 0 100%); transform-origin: 50% 50%; }
.wing-right { clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%, 52% 84%, 54% 43%); transform-origin: 50% 50%; }
.butterfly-body { clip-path: polygon(50% 0, 54% 43%, 52% 84%, 50% 100%, 48% 84%, 46% 43%); }
.flight-trigger { position: absolute; inset: 8% 8% 7%; border: 0; border-radius: 48%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.flight-trigger[hidden] { display: none; }
.flight-description { position: absolute; bottom: 7%; left: 5%; max-width: 365px; z-index: 3; }
.flight-description p { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.6; text-wrap: pretty; }
.flight-cta { position: absolute; bottom: 8%; right: 5%; z-index: 3; display: inline-flex; align-items: center; justify-content: space-between; gap: 44px; padding: 19px 25px; min-height: 60px; min-width: 216px; border: 1px solid var(--flight-ink); border-radius: 2px; text-decoration: none; font-size: 13px; font-weight: 550; transition: background-color 180ms ease, color 180ms ease; }
.flight-cta:hover { background: var(--flight-ink); color: var(--flight-paper); }
.flight-atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: url('assets/air-silk.svg') center / 100% 100% no-repeat; }
.flight-waves { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.flight-waves i { position: absolute; left: 50%; top: 50%; width: 37%; aspect-ratio: 1.2; border: 1px solid #697f8d; opacity: 0; border-radius: 46% 54% 65% 35% / 53% 44% 56% 47%; transform: translate(-50%, -50%) scale(.6); }
.flight-hero.is-fluttering .butterfly-still { visibility: hidden; }
.flight-hero.is-fluttering .butterfly-parts { visibility: visible; }
.flight-hero.is-fluttering .wing-left { animation: wing-left 1.25s cubic-bezier(.35, 0, .3, 1); }
.flight-hero.is-fluttering .wing-right { animation: wing-right 1.25s cubic-bezier(.35, 0, .3, 1); }
.flight-hero.is-fluttering .flight-waves i { animation: air-wave 3.6s cubic-bezier(.18,.42,.3,1) forwards; }
.flight-hero.is-fluttering .flight-waves i:nth-child(2) { animation-delay: .2s; }
.flight-hero.is-fluttering .flight-waves i:nth-child(3) { animation-delay: .4s; }
.flight-hero.is-fluttering .flight-waves i:nth-child(4) { animation-delay: .6s; }
@keyframes wing-left { 0%, 100% { transform: rotateY(0); } 30% { transform: rotateY(-28deg); } 65% { transform: rotateY(-5deg); } 80% { transform: rotateY(-11deg); } }
@keyframes wing-right { 0%, 100% { transform: rotateY(0); } 30% { transform: rotateY(28deg); } 65% { transform: rotateY(5deg); } 80% { transform: rotateY(11deg); } }
@keyframes air-wave { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(0); } 12% { opacity: .48; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(6) rotate(18deg); } }
@media (min-width: 1900px) { .flight-description { max-width: 450px; }.flight-description p { font-size: 19px; }.flight-nav { font-size: 15px; } }
@media (min-width: 901px) and (max-width: 1150px) {
  .flight-hero { min-height: 760px; }
  .flight-title-first { font-size: 6.6vw; }
  .flight-title-second { font-size: 7.5vw; }
  .flight-title-first { top: 28%; }
  .flight-art { width: 53%; right: 2%; top: 22%; }
  .flight-title-second { top: 66%; }
  .flight-description { max-width: 320px; }
}
@media (max-width: 900px) {
  .flight-hero { height: 100svh; min-height: 810px; max-height: 1100px; }
  .flight-header { padding: 25px 6%; }
  .flight-wordmark { font-size: 15px; }
  .flight-nav { gap: 21px; font-size: 11px; }
  .flight-eyebrow { top: 14.5%; left: 6%; font-size: 9px; letter-spacing: .18em; }
  .flight-title-first { top: 19%; left: 5.3%; font-size: 12.5vw; line-height: .91; }
  .flight-title-first > span { display: inline; font-size: 1em; margin: 0; }
  .flight-title-second { top: 61.5%; right: 5.5%; font-size: 11.6vw; line-height: 1; white-space: normal; width: 90%; text-align: right; }
  .flight-art { top: 34%; left: 6%; right: auto; width: 88%; transform: rotate(-10deg); }
  .flight-description { bottom: 14%; left: 6%; right: 6%; max-width: 340px; }
  .flight-description p { font-size: 14px; line-height: 1.55; }
  .flight-cta { bottom: 3.5%; left: 6%; right: auto; min-height: 52px; padding: 14px 20px; font-size: 12px; gap: 56px; min-width: 210px; }
  .flight-atmosphere { background-size: auto 100%; background-position: 57% top; }
  .butterfly-wing, .butterfly-body { background-image: url('assets/pfauenauge-brown-768.webp'); }
}
@media (min-width: 481px) and (max-width: 900px) {
  .flight-hero { min-height: 1000px; }
  .flight-title-first { font-size: 8vw; }
  .flight-art { width: 76%; left: 18%; top: 29%; }
  .flight-title-second { top: 70%; font-size: 7.5vw; }
}
@media (max-width: 360px) {
  .flight-nav { gap: 14px; font-size: 10px; }
  .flight-hero { min-height: 745px; }
  .flight-title-second { top: 57%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flight-cta { transition: none; }
  .flight-hero.is-fluttering .butterfly-still { visibility: visible; }
  .flight-hero.is-fluttering .butterfly-parts { visibility: hidden; }
  .flight-hero.is-fluttering .flight-waves i, .flight-hero.is-fluttering .butterfly-wing { animation: none; }
}