/* Flugsteuerung: schwebender Analog-Stick, erscheint unter Daumen oder Maus; „Weiter“ unten mittig; im Flug ist die Seite eine feste Bühne. */
/* Stick: halbtransparenter Ring am Druckpunkt, der Knopf folgt in alle Richtungen, in Ruhe unsichtbar */
.stick { position: fixed; z-index: 7; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(251 248 241 / .28) 0 58%, rgb(251 248 241 / .12) 70%); border: 2px solid rgb(251 248 241 / .75); box-shadow: 0 0 0 1.5px rgb(42 42 42 / .35), 0 6px 20px rgb(20 24 40 / .18);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transform: scale(.85); transition: opacity .18s ease, transform .18s ease; }
.stick.on { opacity: 1; transform: scale(1); }
.st-knob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 35%, #3d5bb0, #1d2b55 70%); border: 2px solid #0f1a33; box-shadow: 0 4px 10px rgb(15 26 51 / .35); }
/* Hinweis beim ersten Besuch: ein angedeuteter Stick, verschwindet bei der ersten Eingabe oder dem ersten Autopilot-Flug */
.st-hint { position: fixed; z-index: 5; left: 50%; bottom: max(72px, calc(env(safe-area-inset-bottom) + 62px)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; pointer-events: none;
  padding: .45rem .9rem .45rem .5rem; border-radius: 999px; background: rgb(251 248 241 / .9); border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 rgb(42 42 42 / .15); transition: opacity .5s ease; }
.st-hint.gone, .st-hint.off { opacity: 0; }
.st-hint b { font: 600 1.15rem/1.1 var(--hand); color: var(--ink); white-space: nowrap; }
.st-ghost { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgb(42 42 42 / .5); flex: none; }
.st-ghost span { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #1d2b55; animation: st-nudge 4.2s ease-in-out infinite; }
@keyframes st-nudge { 0%, 100% { transform: translate(0, -7px); } 25% { transform: translate(7px, 0); } 50% { transform: translate(0, 7px); } 75% { transform: translate(-7px, 0); } }
.st-mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .st-touch { display: none; } .st-mouse { display: inline; } }
@media (prefers-reduced-motion: reduce) { .st-ghost span { animation: none; } }
.st-take { opacity: 0; padding: .35rem .9rem; }
.st-take.on { opacity: 1; }
@media (max-width: 860px) { .st-hint b { font-size: 1.05rem; } .st-hint { padding: .2rem .8rem .2rem .35rem; } .st-take { padding: .3rem .8rem; } }
/* iOS: auf der Landschaft gehört jede Geste dem Stick, sonst übernimmt Safari die Geste und bricht den Druck ab */
html.has-pad .scene3d canvas { touch-action: none; }

/* „Weiter“: unten mittig, immer an derselben Stelle, das Ortsschild steht darüber oder daneben */
.fly-next { position: fixed; z-index: 6; left: 50%; bottom: max(18px, calc(env(safe-area-inset-bottom) + 8px)); transform: translateX(-50%); min-height: 46px; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 800 .95rem/1.1 var(--head); padding: .7rem 1.25rem; border-radius: 999px; border: 2px solid var(--navy); background: var(--paper); color: var(--navy); cursor: pointer; box-shadow: 2px 2px 0 #9cc3e6; transition: background-color .25s ease, color .25s ease; }
.fly-next.primary { background: var(--navy); color: #f4efe4; box-shadow: 3px 3px 0 var(--red); }
.fly-next:not([aria-disabled="true"]):hover { transform: translate(calc(-50% - 1px), -1px); }
.fly-next[aria-disabled="true"] { cursor: default; color: var(--ink); background: rgb(251 248 241 / .82); border-color: transparent; border-radius: 6px; box-shadow: none; min-height: 0; padding: .4rem .8rem; font-weight: 600; }
.fly-next:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
body.book-open .fly-next, html.wt-open .fly-next { display: none; }
@media (prefers-reduced-motion: reduce) { .fly-next { transition: none; } }

/* Das Ortsschild ist ein Kasten: Name, Untertitel, eine primäre Aktion, darunter „Weiter“ als kleiner Textknopf */
html.has-pad .ln { z-index: 6; }
html.has-pad .ln .ln-row { flex-direction: column; align-items: stretch; gap: .15rem; }
html.has-pad .ln .ln-on { background: #fffdf7; border: 1.5px solid var(--navy); border-radius: 999px; box-shadow: none; padding: .5rem .9rem; min-height: 44px; margin-top: .35rem; font: 700 .84rem/1.1 var(--head); color: var(--navy); text-decoration: none; cursor: pointer; }
html.has-pad .ln .ln-on[hidden] { display: none; }
html.has-pad .ln .ln-on:hover { transform: none; color: var(--blue); }
@media (max-width: 860px) {
  html.has-pad .ln:not([data-mode="landing"]) .ln-row { display: contents; }
  html.has-pad .ln .ln-k { display: none; }
  html.has-pad .ln .ln-go { grid-column: 2; grid-row: 1 / span 2; }
  html.has-pad .ln .ln-open { grid-column: 1 / -1; margin-top: .4rem; }
  html.has-pad .ln .ln-on { grid-column: 1 / -1; min-height: 44px; text-align: center; }
  html.has-pad .ln { bottom: max(12px, calc(env(safe-area-inset-bottom) + 4px)); padding-bottom: .15rem; }
}
/* Hinweis am Ort gut lesbar über der Landschaft */
html.fly-on .orbit-hint { background: rgb(251 248 241 / .96); color: var(--ink); border: 1.5px solid var(--ink); }

/* Feste Bühne: Die Seite scrollt nicht, gezeigt wird nur die Karte des aktuellen Haltepunkts, lange Karten scrollen in sich. fly-on setzt scene.js. */
html.fly-on, html.fly-on body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.fly-on .content { position: fixed; inset: 0; z-index: 2; }
html.fly-on .content > .travel, html.fly-on .content > .stop { display: none; }
html.fly-on .content > .stop.now { display: flex; position: absolute; left: 0; right: 0; top: 66px; bottom: 78px; min-height: 0; padding: 0; align-items: center; pointer-events: none; opacity: 1; transition: opacity .35s ease; }
html.fly-on .content > .stop.now.out { opacity: 0; }
html.fly-on .content > .stop.now.out .card { pointer-events: none; }
html.fly-on .content .card { max-height: 100%; overflow: auto; overscroll-behavior: contain; }
@media (min-width: 861px) { html.fly-on #start .card { margin-left: 44px; } } /* Hinweis und „Weiter“ bleiben frei von der Karte */
html.fly-on #start .cue, html.fly-on footer, html.fly-on .chapter-card { display: none; } /* die Kapitelkarte wiederholte nur den Titel der Etappenkarte und lag über ihr */
/* die Fußzeile der normalen Seite steht im Flug auf der Ende-Karte (Impressum und Datenschutz liegen ohnehin in der Ecke) */
.end-by { display: none; }
html.fly-on .end-by { display: block; font: 500 .8rem/1.4 var(--head); color: var(--soft); margin: .8rem 0 0; }
.end-by a { color: inherit; }
@media (max-width: 860px) {
  html.fly-on .content > .stop.now { top: 72px; bottom: max(76px, calc(env(safe-area-inset-bottom) + 66px)); align-items: flex-end; }
  html.fly-on .content .card { max-height: 38vh; width: calc(100% - 24px); }
  html.fly-on #ende .card { max-height: 62vh; }
  html.fly-on #start .card { max-height: 40vh; } /* darüber bleibt genug Landschaft zum Ziehen */
  html.fly-on body:has(.st-hint:not(.gone):not(.st-take)) #start.stop.now { bottom: max(124px, calc(env(safe-area-inset-bottom) + 114px)); } /* Hinweis und „Weiter“ bilden unten einen Block */
  /* Startkarte: die Heldenwahl steht gleich unter der Frage, die lange Einführung darf nach unten scrollen */
  html.fly-on #start .card { display: flex; flex-direction: column; }
  html.fly-on #start .card > * { flex: none; }
  html.fly-on #start .card > .label, html.fly-on #start .card > h1 { order: -2; }
  html.fly-on #start .pick { order: -1; margin: 0 0 .9rem; flex-wrap: nowrap; gap: .3rem; }
  html.fly-on #start .pick button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: .35rem .2rem; font-size: .78rem; line-height: 1.05; white-space: normal; }
  html.fly-on #start .map-thumb { order: 1; float: none; align-self: flex-start; margin: .2rem 0 .6rem; }
  html.fly-on #start .card.long::after { order: 9; flex: none; }
}
@media (prefers-reduced-motion: reduce) { html.fly-on .content > .stop.now { transition: none; } }