/* Flyary start page: one flight from the summit down to the landing meadow, in three versions (boot.js chooses).
   - Plain (no class): needs no script. Each scene stands still as a picture while the next chapter slides over it, its
     upper edge painted as clouds, firs or meadow. For visitors without JavaScript or with reduced motion.
   - Touch (`.touch-on`): the same page, but behind the chapters lies the stage with the far layers of each scene, which
     stage.js moves at different speeds. Text, ground and painted edge stay plain page content, because on a phone the
     browser scrolls on the graphics chip and a script cannot keep up with a fast swipe.
   - Stage (`.stage-on`, mouse and trackpad): everything, including the rising ground, is moved by stage.js. */
.home {
  background: var(--mist);
  /* Width of a scene, size of the name and where its lower edge sits: the same geometry stage.js uses. */
  --cw: max(100vw, 78vh);
  --brand: min(16.5vw, 300px);
  --claim: clamp(18px, 2.7vw, 44px);
  --title-bottom: calc(50vh + var(--brand) / 2);
  --base: min(0px, calc(var(--title-bottom) - var(--cw) * .7305));
}
@supports (height: 100lvh) { .home { --cw: max(100vw, 78lvh); --title-bottom: calc(50lvh + var(--brand) / 2); } }
.home h2 { font-size: clamp(30px, 4vw, 54px); line-height: 1.06; font-weight: 800; }
.home h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }

/* ---------- Header: clear over the hero, away while reading down, back when scrolling up ---------- */
.home .header { position: fixed; inset: 0 0 auto; transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s; }
.home .header:not(.is-scrolled) { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.home .header.is-away { transform: translateY(-110%); }

/* ---------- Hero: the name stands between the far range and the snow ridge, the claim below it in front of the snow ---------- */
/* The hero is as tall as the painting down to the foot of its clouds, so the first chapter's cloud edge starts where the
   clouds are painted and does not cover the ridge on wide screens. */
.hero { position: sticky; top: 0; z-index: 0; height: max(100vh, calc(var(--base) + var(--cw) * 1.4453)); height: max(100lvh, calc(var(--base) + var(--cw) * 1.4453)); overflow: hidden; color: #fff; text-align: center; background: var(--dawn); }
.hero-back, .hero-front { position: absolute; left: calc(50% - var(--cw) / 2); width: var(--cw); background: center top / 100% auto no-repeat; }
.hero-back { top: var(--base); height: calc(var(--cw) * 1.5); background-image: url("/assets/landscape/gipfel-hinten-1024.webp"); }
.hero-front { top: calc(var(--base) + var(--cw) * .3711); height: calc(var(--cw) * 1.1289); background-image: url("/assets/landscape/gipfel-vorn-1024.webp"); }
.hero h1 { position: absolute; left: 0; right: 0; top: calc(var(--base) + var(--cw) * .7305 - var(--brand)); display: flex; flex-direction: column; align-items: center; letter-spacing: -.055em; text-shadow: 0 2px 30px rgba(60, 70, 120, .35); }
.hero-brand, .stage-title b { font-size: var(--brand); line-height: 1; font-weight: 800; }
/* The claim lies on the sunlit snow, so it is dark with a light halo. .0879 of the scene width below the name = row 838 of the painting. */
.hero-claim, .stage-claim { font-size: var(--claim); line-height: 1.5; font-weight: 700; letter-spacing: -.02em; color: var(--ink); text-shadow: 0 0 3px rgba(255, 255, 255, .9), 0 0 16px rgba(255, 255, 255, .95), 0 0 34px rgba(255, 255, 255, .7); }
.hero-claim { position: relative; z-index: 1; margin-top: calc(var(--cw) * .0879 - var(--claim) * .75); }
.hero-front { z-index: 0; }
.final-link { color: var(--ink); font-weight: 700; font-size: 16px; text-decoration: underline; text-underline-offset: 5px; }

/* ---------- Chapters ---------- */
.stage, .glider { display: none; }
.chapter { position: relative; z-index: 1; overflow-x: clip; padding-block: clamp(40px, 7vw, 110px) clamp(64px, 9vw, 120px); }
/* The painted upper edge of a chapter: the nearest layer of the scene it slides over. */
.chapter::before { content: ""; position: absolute; left: calc(50% - var(--cw) / 2); bottom: calc(100% - 1px); width: var(--cw); background: center bottom / 100% auto no-repeat; pointer-events: none; }
.chapter-mist { background: var(--mist); }
.chapter-mist::before { height: calc(var(--cw) * .3223); background-image: url("/assets/landscape/kante-nebel-1024.webp"); }
.chapter-forest { background: var(--forest); color: #e9f1ec; --focus: #fff; }
.chapter-forest::before { height: calc(var(--cw) * .3809); background-image: url("/assets/landscape/kante-wald-1024.webp"); }
.chapter-meadow { background: var(--meadow); color: #f1f6ec; --focus: #fff; }
.chapter-meadow::before { height: calc(var(--cw) * .537); background-image: url("/assets/landscape/kante-wiese-1024.webp"); }
.chapter-valley { --focus: var(--ink); min-height: 100vh; min-height: 100lvh; padding-top: clamp(110px, 20vh, 190px); text-align: center; background: linear-gradient(var(--meadow), rgba(44, 74, 53, 0) 12%), var(--valley) url("/assets/landscape/tal-hoch-1024.webp") center bottom / cover no-repeat; }
/* Between two chapters the next scene stands still while the chapter after it rises over it. */
.gap { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100lvh; background: center / cover no-repeat; }
.gap::before { content: ""; position: absolute; inset: 0 0 auto; height: 26%; background: linear-gradient(var(--from), transparent); }
.gap-forest { --from: var(--mist); background-image: url("/assets/landscape/wald-hinten-1024.webp"); }
.gap-hills { --from: var(--forest); background-image: url("/assets/landscape/huegel-hinten-1024.webp"); }
.gap-valley { display: none; }
@media (min-width: 1100px) {
  html:not(.stage-on) .hero-back { background-image: url("/assets/landscape/gipfel-hinten-2048.webp"); }
  html:not(.stage-on) .hero-front { background-image: url("/assets/landscape/gipfel-vorn-2048.webp"); }
  html:not(.stage-on) .chapter-mist::before { background-image: url("/assets/landscape/kante-nebel-2048.webp"); }
  html:not(.stage-on) .chapter-forest::before { background-image: url("/assets/landscape/kante-wald-2048.webp"); }
  html:not(.stage-on) .chapter-meadow::before { background-image: url("/assets/landscape/kante-wiese-2048.webp"); }
  html:not(.stage-on) .gap-forest { background-image: url("/assets/landscape/wald-hinten-2048.webp"); }
  html:not(.stage-on) .gap-hills { background-image: url("/assets/landscape/huegel-hinten-2048.webp"); }
  html:not(.stage-on) .chapter-valley { background-image: linear-gradient(var(--meadow), rgba(44, 74, 53, 0) 12%), url("/assets/landscape/tal-hoch-2048.webp"); }
}
.chapter-intro { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 56ch; }
.chapter-forest .chapter-intro, .chapter-forest .school-steps p, .chapter-forest .chapter-note { color: #b9cbc3; }
.chapter-note { font-size: 15px; }
.phone { width: min(270px, 62vw); padding: 6px; border-radius: 34px; background: var(--ink); box-shadow: 0 34px 50px -34px rgba(20, 33, 58, .55); }
.phone-screen { border-radius: 28px; overflow: hidden; background: #fff; }
.phone-screen img { width: 100%; }
.chapter-forest .phone { background: #0a1517; }

/* App: one phone, four views */
.explorer { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.explorer-copy { display: grid; gap: 22px; }
.explorer-stage { justify-self: center; }
.preview-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.preview-tab { display: grid; gap: 2px; padding: 14px 18px; border-radius: 16px; border: 1.5px solid rgba(20, 33, 58, .14); background: rgba(255, 255, 255, .45); transition: background .2s, border-color .2s; }
.preview-tab b { font-size: 17px; font-weight: 800; }
.preview-tab span { font-size: 14px; color: var(--muted); }
.preview-tab:hover { background: rgba(255, 255, 255, .8); }
.preview-tab[aria-selected="true"] { background: #fff; border-color: var(--ink); }
.preview-panel { display: grid; gap: 12px; align-content: start; }
.preview-panel + .preview-panel { margin-top: 36px; }
.enhanced .preview-panel { min-height: 170px; }
.enhanced .preview-panel + .preview-panel { margin-top: 0; }
.preview-panel p { color: var(--muted); line-height: 1.6; }
.panel-points { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-weight: 600; font-size: 15px; }
.panel-points li { display: flex; align-items: center; gap: 8px; }
.panel-points li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.fallback-screen { width: min(240px, 100%); margin-top: 8px; border: 6px solid var(--ink); border-radius: 30px; }
.enhanced .fallback-screen { display: none; }
#app:not(.enhanced) .explorer { grid-template-columns: 1fr; }
#app:not(.enhanced) .explorer-stage { display: none; }
#preview-image { transition: opacity .25s var(--ease); }
#preview-image.is-swapping { opacity: 0; }

/* Schools: the three steps are a real sequence, so they are numbered */
.school { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 7vw, 100px); align-items: center; }
.school-visual { justify-self: center; }
.school-copy { display: grid; gap: 20px; max-width: 520px; }
.school-copy .button { justify-self: start; }
.school-steps { list-style: none; padding: 0; display: grid; gap: 16px; counter-reset: step; }
.school-steps li { counter-increment: step; display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; }
.school-steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #7fb59b; color: #bfe3d0; font-weight: 800; font-size: 16px; }
.school-steps h3 { font-size: 20px; align-self: center; }
.school-steps p { grid-column: 2; font-size: 16px; line-height: 1.55; }

/* Film and questions */
.more { display: grid; gap: clamp(48px, 7vw, 90px); justify-items: center; }
.about, .faq { width: min(880px, 100%); }
.about { text-align: center; }
.about, .faq { display: grid; gap: 22px; min-width: 0; }
.video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #0b1623; box-shadow: 0 30px 50px -36px rgba(0, 0, 0, .8); }
.video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.video-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: var(--accent); transition: transform .3s var(--ease); }
.video-play .icon { width: 30px; height: 30px; margin-left: 4px; }
.video-play:hover, .video-play:focus-visible { transform: scale(1.08); }
.faq-list details { border-bottom: 1.5px solid rgba(255, 255, 255, .26); }
.faq-list details:first-child { border-top: 1.5px solid rgba(255, 255, 255, .26); }
.faq-list summary { cursor: pointer; padding: 15px 0; font-weight: 700; font-size: 18px; line-height: 1.3; }
.faq-list details p { padding-bottom: 18px; color: #d7e3d2; font-size: 16px; line-height: 1.6; }
.chapter-link { justify-self: start; font-weight: 700; font-size: 16px; text-decoration: underline; text-underline-offset: 5px; }

/* Landing */
.final { display: grid; gap: 18px; justify-items: center; }
.final h2 { font-size: clamp(32px, 4.8vw, 66px); max-width: 16ch; }
.final p { font-weight: 500; color: #1f3558; }
.final-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; margin-top: 4px; }

/* The footer lies in front of the stage */
.home .footer { position: relative; z-index: 2; }

/* ---------- The moving version ---------- */
html.stage-on .home, html.touch-on .home { background: var(--dawn); }
/* Text dissolves along the top edge of the window, so a link reached by keyboard must come to rest below it. */
html.stage-on { scroll-padding-top: 14vh; }
html.stage-on .stage, html.touch-on .stage { display: block; position: fixed; left: 0; right: 0; top: 0; z-index: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--dawn); }
html.stage-on .stage, html.stage-on .glider, html.touch-on .stage, html.touch-on .glider { opacity: 0; transition: opacity .5s; }
html.stage-ready .stage, html.stage-ready .glider { opacity: 1; }
.scene { position: absolute; left: 0; right: 0; top: 0; height: 100%; will-change: transform; }
/* A scene that will slide away is taller than the window and fades out along its lower edge. At rest that edge lies
   below the window; the mask never changes, the scene is only moved. */
.scene:not([data-scene="3"]) { height: 150%; -webkit-mask-image: linear-gradient(#000 70%, transparent 97%); mask-image: linear-gradient(#000 70%, transparent 97%); }
.ly { position: absolute; left: 0; top: 0; max-width: none; height: auto; will-change: transform; }
.groundfill { position: absolute; left: 0; right: 0; top: 0; height: 600vh; }
.stage-title { position: absolute; left: 0; right: 0; top: 0; height: 0; color: #fff; text-align: center; letter-spacing: -.055em; text-shadow: 0 2px 30px rgba(60, 70, 120, .35); }
.stage-title div { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; }
.stage-claim { position: absolute; left: 0; right: 0; top: 0; margin-top: calc(var(--claim) * -.75); padding-inline: 16px; text-align: center; will-change: transform; }
html.stage-on .glider, html.touch-on .glider { display: block; position: fixed; left: 0; top: 0; z-index: 3; max-width: none; height: auto; pointer-events: none; will-change: transform; }
html.stage-on [data-fade] { will-change: opacity; }
html.stage-on .hero, html.stage-on .chapter, html.stage-on .gap { z-index: 1; }
html.stage-on .hero { position: relative; overflow: visible; height: 112vh; height: 112lvh; background: none; }
html.stage-on .hero-back, html.stage-on .hero-front, html.stage-on .chapter::before, html.stage-on .gap::before { display: none; }
/* The name is painted into the stage; the heading stays for screen readers and search engines. */
html.stage-on .hero h1, html.touch-on .hero h1 { top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.stage-on .gap { display: block; position: relative; height: 140vh; height: 140lvh; background: none; }
/* Touch: the stage shows through the hero, the gaps and the last chapter; its nearest layers are the chapters' own edges. */
html.touch-on .scene:not([data-scene="3"]) { height: 100%; -webkit-mask-image: none; mask-image: none; }
html.touch-on .scene:not([data-scene="3"]) .ly[data-f="1"], html.touch-on .groundfill, html.touch-on .hero-back, html.touch-on .hero-front { display: none; }
html.touch-on .hero { background: none; }
html.touch-on .gap { background-image: none; }
html.touch-on .chapter-valley { background: linear-gradient(var(--meadow), rgba(44, 74, 53, 0) 12%); }
html.stage-on .chapter { display: grid; align-items: center; min-height: 100vh; min-height: 100lvh; padding-block: 24vh 8vh; background: none; }
html.stage-on .chapter-valley { align-items: start; min-height: 140vh; min-height: 140lvh; padding-block: 15vh 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .explorer, .school { grid-template-columns: 1fr; }
  .school-visual { order: 2; }
}
@media (max-width: 640px) {
  .home { --brand: 27vw; }
  /* On phones the claim stands in the sky above the name: white, with a dark shadow. */
  .hero-claim, .stage-claim { color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(20, 33, 58, .6), 0 2px 14px rgba(20, 33, 58, .6), 0 0 34px rgba(20, 33, 58, .35); }
  .hero h1 { flex-direction: column-reverse; top: calc(var(--base) + var(--cw) * .7305 - var(--brand) - var(--claim) * 1.5); }
  .hero-claim { margin-top: 0; }
  .final-actions .button { width: 100%; }
  .preview-tab { padding: 12px 14px; }
  .preview-tab span { display: none; }
  .phone { width: min(270px, 52vw); }
  html.stage-on .chapter { padding-block: 22vh 8vh; }
}
.sound-toggle {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100vw - 32px);
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 28px;
  background: #14262a;
  color: #fff;
  box-shadow: 0 3px 16px rgba(0, 0, 0, .15);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.sound-toggle svg { width: 20px; height: 20px; flex: 0 0 auto; }
.sound-toggle { width: 44px; padding: 10px; justify-content: center; }
.sound-toggle span { display: none; }
.sound-toggle[aria-pressed="false"] .sound-waves { opacity: .35; }
.sound-toggle:hover { background: #234248; }
.sound-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }