/* Kinder-App: Layout und die paar Teile, die nicht im gemeinsamen theme.css liegen. */

html, body { height: 100%; }
[hidden] { display: none !important; }
.kids .screen-body > * { flex-shrink: 0; }
body.kids { overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
.kids .screen { height: 100dvh; min-height: 0; overflow: hidden; }
.kids .screen-body {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding-top: max(1rem, env(safe-area-inset-top));
}
.kids .screen-body.is-wide { max-width: 64rem; }
/* auto margins instead of justify-content, so tall content stays scrollable from the top */
.kids .screen-body.is-centered > :first-child { margin-top: auto; }
.kids .screen-body.is-centered > :last-child { margin-bottom: auto; }
.kids .push-down { margin-top: auto; }

.station-head h2 { margin: 0.4rem 0 0; }
.task-image { display: block; width: 100%; max-height: 40vh; object-fit: contain; border: var(--border); border-radius: var(--radius); background: var(--lightblue); }
.task-text { margin: 0; }
.msg-wrong { margin: 0; font-weight: 700; color: var(--red); }

/* Warten */
.wait-wrap { padding: 0 1.4rem; max-width: 22rem; margin: 0 auto; width: 100%; }
.wait-logo { text-align: center; position: relative; padding: 1.2rem 0.8rem 1rem; }
.wait-logo .stamp { position: absolute; right: -0.6rem; top: -0.9rem; background: var(--cream); }
.wait-logo h1 { margin: 0.3rem 0 0; font-size: 2rem; }
.kids .screen-body.is-bleed { padding-left: 0; padding-right: 0; max-width: none; }
.kids .screen-body.is-bleed > p { padding: 0 1rem; margin: 0; }

/* Code-Eingabe mit eigenem Ziffernblock */
.code-entry { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.digit-field.is-entry { display: inline-flex; align-items: center; justify-content: center; }
.digit-field.is-cursor { outline: 4px solid var(--blue); outline-offset: 2px; }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem 0.7rem; width: 100%; max-width: 17rem; padding-right: 6px; }
.numpad .btn { min-height: 60px; padding-left: 0; padding-right: 0; font-size: 1.5rem; }
.numpad .btn.is-small { font-size: 0.8rem; }

/* iPad quer: Text links, Ziffernblock rechts */
@media (min-width: 900px) and (orientation: landscape) {
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; flex: 1; }
  .kids .screen-body.has-split { max-width: 56rem; }
}

/* Login-Ergebnis */
.kid-card { display: flex; align-items: center; gap: 1rem; }
.kid-card img { width: 5.5rem; height: 5.5rem; object-fit: cover; border: var(--border); border-radius: var(--radius); background: var(--yellow); flex: none; }
.kid-card.is-big { flex-direction: column; text-align: center; }
.kid-card.is-compact { padding: 0.6rem; gap: 0.7rem; line-height: 1.25; }
.kid-card.is-compact img { width: 3.8rem; height: 3.8rem; }
.kid-card.is-big img { width: 11rem; height: 11rem; }

/* Verdaechtige waehlen */
.kids .suspect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 6px; }
@media (min-width: 620px) { .kids .suspect-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .kids .suspect-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sticky-action { position: sticky; bottom: -1rem; background: var(--cream); padding: 0.6rem 6px 1rem 0; margin: auto 0 -1rem; border-top: var(--border); display: grid; gap: 0.8rem; }
@media (min-width: 620px) { .sticky-action { grid-template-columns: 1fr 2fr; } .sticky-action > :first-child { order: 2; } }
.kids .suspect-traits { hyphens: auto; overflow-wrap: anywhere; }

/* Timer */
.timer { font-family: var(--font-display); font-size: 5rem; line-height: 1; text-align: center; padding: 0.3em 0 0.1em; font-variant-numeric: tabular-nums; }
.timer.is-over { color: var(--red); }

/* Erfolg */
.success-step { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center; width: 100%; }
.success-step .suspect-card { width: min(100%, 13rem); }
.pop { animation: pop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
@keyframes pop { 0% { transform: scale(0.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.digit-row-lg .digit-field { font-size: 2.6rem; }

/* Abschluss */
.stamp-fit { font-size: min(2rem, 7.4vw); margin-top: 1.2rem; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; width: 100%; }
@media (min-width: 900px) { .team-grid { grid-template-columns: repeat(9, 1fr); } }
.team-grid figure { margin: 0; text-align: center; font-size: 0.7rem; }
.team-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: var(--border); border-radius: var(--radius); background: var(--yellow); }

/* Verbindung */
.conn-lost {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--red); color: var(--cream);
  font-size: 0.7rem; text-align: center; padding: 0.3em 0.5em 0.15em;
  padding-top: max(0.3em, env(safe-area-inset-top));
}
.close-btn { min-height: 52px; font-size: 0.9rem; flex: none; }

@media (prefers-reduced-motion: reduce) { .pop { animation: none; } }

/* Akte gross */
.kids button.suspect-card:disabled { cursor: default; }
.zoom-photo { border: var(--border); border-radius: var(--radius); overflow: auto; max-height: 55dvh; background: var(--lightblue); cursor: zoom-in; }
.zoom-photo img { display: block; width: 100%; max-width: none; }
.zoom-photo.is-zoomed { cursor: zoom-out; }
.zoom-photo.is-zoomed img { width: 250%; }
.zoom-traits { margin: 0; padding-left: 1.2em; }

/* Nachrichten-Verlauf */
.msg-list { display: grid; gap: 0.6rem; margin-top: 0.3rem; }
.msg-item { display: grid; gap: 0.1rem; text-align: left; font: inherit; font-size: 0.8rem; color: inherit; padding: 0.6rem 0.7rem; cursor: pointer; border-left: 10px solid var(--red); }

/* Karte */
.map-box { height: min(62dvh, 34rem); border: var(--border); border-radius: var(--radius); background: var(--lightblue); font-size: 14px; z-index: 0; }
.leaflet-marker-icon.map-station {
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); border-radius: var(--radius);
  font-family: var(--font-display); font-size: 16px; line-height: 1; padding-top: 3px;
  box-shadow: 3px 3px 0 var(--ink);
}
.map-station.is-solved { background: var(--ink); color: var(--cream); padding-top: 0; }
.map-station.is-current { outline: 4px solid var(--blue); outline-offset: 2px; }
.map-me { background: var(--blue); border: 3px solid var(--cream); border-radius: 50%; box-shadow: 0 0 0 3px var(--blue); }
.map-villain { background: var(--red); border: 3px solid var(--ink); border-radius: 50%; }
.map-villain i { position: absolute; inset: -3px; border-radius: 50%; border: 4px solid var(--red); animation: villain-pulse 1.4s ease-out infinite; }
@keyframes villain-pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.2); opacity: 0; } }

/* QR */
.qr-frame { border: var(--border); border-radius: var(--radius); background: var(--ink); aspect-ratio: 1; overflow: hidden; margin-bottom: 0.8rem; }
.qr-video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Konfetti */
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.confetti i { position: absolute; top: -40px; animation: confetti-fall linear 4 both; }
@keyframes confetti-fall { to { transform: translateY(115vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } .map-villain i { animation: none; } }

/* Handy hochkant: Login mit Scan-Button und Ziffernblock soll ohne Scrollen passen */
@media (max-width: 600px) {
  .code-entry { gap: 0.6rem; }
  .code-entry .digit-field { font-size: 1.5rem; }
  .numpad { gap: 0.45rem 0.6rem; }
  .numpad .btn { min-height: 52px; font-size: 1.35rem; }
  .numpad .btn.is-small { font-size: 0.75rem; }
}

/* Karte: Umschalter Satellit */
.map-toggle {
  position: absolute; top: 10px; right: 10px; z-index: 800;
  min-height: 44px; padding: 6px 14px 3px;
  font-family: var(--font-display); font-size: 16px; color: var(--ink);
  background: var(--yellow); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer; touch-action: manipulation;
}
/* on the dark satellite image the route needs a light colour */
.map-box.is-satellite path.leaflet-interactive { stroke: #FFD23F; }

/* Nachrichten: Symbol in der Leiste und eigene Liste */
.bottom-bar > .msg-btn { flex: 0 0 4.6rem; display: flex; align-items: center; justify-content: center; padding: 0; }
.bottom-bar > .msg-btn svg { width: 1.7rem; height: auto; display: block; }
.bottom-bar > .msg-btn .badge { position: absolute; top: 6px; right: 8px; margin: 0; min-width: 1.6em; text-align: center; border: 2px solid var(--ink); }
.bottom-bar > .msg-btn.has-unread { background: var(--yellow); color: var(--red); }
.bottom-bar > .msg-btn.has-unread svg { animation: ring 0.7s 4; }
.msg-item-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.msg-time { margin-left: auto; opacity: 0.6; font-size: 0.7rem; }
.msg-new { background: var(--red); color: var(--cream); font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3em 0.5em 0.1em; border-radius: var(--radius); }
.msg-item { border-left-color: rgba(26, 26, 26, 0.3); }
.msg-item.is-unread { border-left-color: var(--red); background: var(--yellow); }
@media (prefers-reduced-motion: reduce) { .bottom-bar > .msg-btn.has-unread svg { animation: none; } }

.kids .overlay-head > h2 { font-size: min(1.6rem, 5.6vw); min-width: 0; }
.close-btn { padding-left: 0.7em; padding-right: 0.7em; }

/* Karte: kleine Knoepfe in der Karte (Mein Standort, Ganze Strecke, Satellit) */
.map-actions { position: absolute; left: 8px; bottom: 8px; z-index: 800; display: flex; gap: 6px; }
.map-btn, .map-toggle {
  min-height: 36px; padding: 5px 9px 2px;
  font-family: var(--font-display); font-size: 13px; line-height: 1; color: var(--ink);
  background: var(--cream); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer; touch-action: manipulation;
}
.map-toggle { top: 8px; right: 8px; background: var(--yellow); }
.map-btn:active, .map-toggle:active { transform: translate(2px, 2px); box-shadow: none; }
/* keep the attribution clear of the buttons */
.map-box .leaflet-bottom.leaflet-right { font-size: 10px; }
.map-box { height: min(68dvh, 36rem); }

/* Overlay-Kopf: X zum Schliessen, bei der Karte die Legende in derselben Zeile */
.close-x { flex: none; width: 52px; min-height: 52px; padding: 0; margin-left: auto; }
.close-x svg { width: 20px; height: 20px; display: block; }
.kids .overlay-head { gap: 0.7rem; margin-bottom: 0.6rem; }
.map-legend { display: flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; line-height: 1.15; min-width: 0; }
.dot { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
.dot-red { background: var(--red); }
.dot-blue { background: var(--blue); margin-left: 0.5rem; }
.map-box { height: min(76dvh, 42rem); }
.kids #overlay[data-name="karte"] { padding: 0.5rem 0.4rem; }
.kids #overlay[data-name="karte"] .overlay-panel { padding: 0.6rem 0.6rem 0.7rem; }

/* Foto des fuehrenden Detektivs neben dem Stationsnamen */
.station-head.has-kid { display: flex; align-items: center; gap: 0.8rem; }
.station-head.has-kid > div { min-width: 0; }
.station-kid { width: 4.2rem; height: 4.2rem; flex: none; object-fit: cover; border: var(--border); border-radius: var(--radius); background: var(--yellow); box-shadow: var(--shadow-sm); }

.kid-name { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1; }

/* Handy: Login mit Namenskarte kompakt halten, damit der Ziffernblock ohne Scrollen passt */
@media (max-width: 600px) {
  .has-split .station-head h2 { font-size: 1.2rem; margin-top: 0.25rem; }
  .has-split .kid-card.is-compact { padding: 0.4rem 0.5rem; }
  .has-split .kid-card.is-compact img { width: 3rem; height: 3rem; }
  .has-split .kid-name { font-size: 1.1rem; }
  .has-split .btn-block { min-height: 56px; }
  .numpad .btn { min-height: 48px; }
  .code-entry .digit-field { font-size: 1.35rem; }
}

/* Akten: alles auf einer Seite. Handy: Zeilen mit kleinem Foto. Breit: fuenf Karten mit flacherem Foto. */
.akten-code { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.8rem; }
.akten-code .digit-field { font-size: 1.2rem; }
.kids #overlay[data-name="akten"] { padding: 0.5rem 0.4rem; }
.kids #overlay[data-name="akten"] .overlay-panel { padding: 0.6rem 0.7rem 0.7rem; }
.akten-grid .suspect-photo { aspect-ratio: 1; }
@media (max-width: 619px) {
  .kids .akten-grid { grid-template-columns: 1fr; gap: 0.45rem; }
  .akten-grid .suspect-card { flex-direction: row; align-items: stretch; box-shadow: var(--shadow-sm); }
  .akten-grid .suspect-photo { width: 4.1rem; flex: none; aspect-ratio: auto; min-height: 4.1rem; border-bottom: 0; border-right: var(--border); }
  .akten-grid .suspect-time { font-size: 0.55rem; }
  .akten-grid .suspect-info { padding: 0.3rem 0.5rem 0.2rem; min-width: 0; }
  .akten-grid .suspect-name { font-size: 0.95rem; }
  .akten-grid .suspect-traits { font-size: 0.58rem; line-height: 1.25; margin-top: 0.1rem; }
  .akten-grid .suspect-traits li { display: inline; padding: 0; text-indent: 0; }
  .akten-grid .suspect-traits li::before { content: ""; }
  .akten-grid .suspect-traits li + li::before { content: " \00B7  "; color: var(--blue); font-weight: 700; }
  .akten-grid .suspect-card .stamp { top: 0.3rem; right: 0.3rem; font-size: 0.55rem; }
}
/* iPad (hoch und quer): alle fuenf Akten in einer Reihe, damit nichts gescrollt werden muss */
@media (min-width: 620px) {
  .kids .akten-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; padding-right: 6px; }
  .akten-grid .suspect-photo { aspect-ratio: 1; }
  .akten-grid .suspect-info { padding: 0.4rem 0.45rem 0.35rem; }
  .akten-grid .suspect-name { font-size: 0.9rem; }
  .akten-grid .suspect-traits { font-size: 0.55rem; }
}
@media (max-width: 619px) {
  /* the photo must not dictate the row height */
  .akten-grid .suspect-photo > img { position: absolute; inset: 0; }
  .akten-grid .suspect-info { padding-right: 0.4rem; }
  .akten-grid .suspect-card.is-eliminated .suspect-name { padding-right: 5.2rem; }
}

/* Akten auf dem iPad: Foto links, Text rechts. Quer drei Spalten (zwei Reihen), hoch zwei Spalten. */
@media (min-width: 620px) {
  .kids #overlay[data-name="akten"] { padding: 0.3rem; }
  .kids #overlay[data-name="akten"] .overlay-panel { padding: 0.5rem 0.6rem 0.6rem; max-width: none; }
  .kids #overlay[data-name="akten"] .overlay-head { margin-bottom: 0.4rem; }
  .kids .akten-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.6rem; padding-right: 4px; }
  .akten-grid .suspect-card { flex-direction: row; align-items: stretch; box-shadow: var(--shadow-sm); }
  .akten-grid .suspect-photo { width: 5.2rem; min-height: 5.2rem; flex: none; aspect-ratio: auto; border-bottom: 0; border-right: var(--border); }
  .akten-grid .suspect-photo > img { position: absolute; inset: 0; }
  .akten-grid .suspect-info { padding: 0.35rem 0.5rem 0.3rem; min-width: 0; }
  .akten-grid .suspect-name { font-size: 1rem; }
  .akten-grid .suspect-traits { font-size: 0.6rem; line-height: 1.3; }
  .akten-grid .suspect-card .stamp { top: 0.3rem; right: 0.3rem; font-size: 0.55rem; }
  .akten-grid .suspect-card.is-eliminated .suspect-name { padding-right: 5.4rem; }
  .akten-code { margin-top: 0.5rem; }
}
@media (min-width: 1000px) {
  .kids .akten-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Akten: Stempel unten rechts in der Karte, damit er den Namen nicht verdeckt */
.akten-grid .suspect-card .stamp { top: auto; bottom: 0.4rem; right: 0.4rem; }
.akten-grid .suspect-card.is-eliminated .suspect-name { padding-right: 0; }
.akten-grid .suspect-card.is-eliminated .suspect-info { padding-bottom: 1.1rem; }
@media (min-width: 620px) and (max-height: 700px) {
  .akten-grid .suspect-traits { font-size: 0.54rem; line-height: 1.25; }
  .akten-grid .suspect-name { font-size: 0.92rem; }
  .kids #overlay[data-name="akten"] .overlay-head > h2 { font-size: 1.2rem; }
  .kids #overlay[data-name="akten"] .close-x { width: 44px; min-height: 44px; }
}

/* Akte gross: breit = Foto links, Text rechts, alles ohne Scrollen. Schmal = untereinander. */
.kids #zoom { padding: 0.3rem; }
.zoom-panel { padding: 0.5rem 0.7rem 0.7rem; max-width: 60rem; }
.zoom-panel .overlay-head { margin-bottom: 0.5rem; }
.zoom-body { display: flex; flex-direction: column; gap: 0.8rem; }
.zoom-info { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.zoom-photo { max-height: 46dvh; }
.zoom-photo img { height: 46dvh; width: 100%; object-fit: contain; }
.zoom-photo.is-zoomed img { height: auto; width: 250%; }
.zoom-traits { line-height: 1.5; }
@media (min-width: 620px) {
  .zoom-body { flex-direction: row; align-items: flex-start; gap: 1.2rem; }
  .zoom-photo { flex: 0 0 auto; width: min(50%, 68dvh); height: calc(100dvh - 8.5rem); max-height: 34rem; }
  .zoom-photo img { height: 100%; }
  .zoom-info { flex: 1; padding-top: 0.2rem; }
}

/* Aufgabe: Anhoeren als kleiner Knopf rechts neben der Ueberschrift */
.task-head { display: flex; align-items: flex-start; gap: 0.6rem; }
.task-head .station-head { flex: 1; min-width: 0; }
.play-btn.is-compact { flex: none; width: 64px; min-height: 64px; padding: 0 0 8px; display: flex; align-items: center; justify-content: center; margin-right: 6px; }
.play-btn.is-compact .play-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Erfolg "X war es nicht": Karte quer (Foto links, Text rechts), damit nichts gescrollt werden muss */
.success-step .suspect-card.is-row { flex-direction: row; align-items: stretch; width: min(100%, 27rem); text-align: left; }
.suspect-card.is-row .suspect-photo { width: 7rem; min-height: 7rem; flex: none; aspect-ratio: auto; border-bottom: 0; border-right: var(--border); }
.suspect-card.is-row .suspect-photo > img { position: absolute; inset: 0; }
.suspect-card.is-row .suspect-info { padding: 0.6rem 0.7rem; align-self: center; min-width: 0; }
.suspect-card.is-row .suspect-name { font-size: 1.3rem; }
.suspect-card.is-row .suspect-traits { font-size: 0.7rem; margin-top: 0.3rem; }
.suspect-card.is-row .stamp { top: auto; bottom: 0.5rem; right: 0.5rem; }
@media (max-height: 700px) { .success-step { gap: 0.9rem; } }

/* ---- Nichts soll auf dem iPad scrollen ---- */
.split-left { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.only-wide { display: none; }
@media (min-width: 900px) and (orientation: landscape) {
  .only-wide { display: block; }
  .only-narrow { display: none; }
}
/* selectable suspect rows: keep the pressed and selected look in the compact layout */
.akten-grid .suspect-card.is-selected { outline-offset: 1px; }
/* final screen: five per row on iPad portrait */
@media (min-width: 620px) and (max-width: 899px) { .team-grid { grid-template-columns: repeat(5, 1fr); } }
/* short screens (iPad landscape with browser bars): smaller number pad, timer and gaps */
@media (min-width: 620px) and (max-height: 760px) {
  .kids .screen-body { gap: 0.7rem; padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .numpad { gap: 0.4rem 0.6rem; }
  .numpad .btn { min-height: 50px; font-size: 1.3rem; }
  .code-entry { gap: 0.6rem; }
  .code-entry .digit-field { font-size: 1.4rem; }
  .timer { font-size: 3.4rem; padding: 0.1em 0 0; }
  .sticky-action { padding-top: 0.4rem; }
  .sticky-action .btn { min-height: 56px; }
}
/* phone: a little tighter still */
@media (max-width: 600px) {
  .numpad { gap: 0.35rem 0.6rem; }
  .numpad .btn { min-height: 44px; }
  .has-split .split > div:first-child { margin-bottom: 0.3rem !important; }
  .team-grid { gap: 0.4rem; }
  .team-grid figure { font-size: 0.6rem; }
}

/* Verdaechtige waehlen: Knoepfe breit neben der Ueberschrift, schmal unten angeheftet */
.suspect-top { display: flex; align-items: center; gap: 1rem; }
.suspect-top .station-head { flex: 1; min-width: 0; }
.suspect-top .sticky-action { position: static; flex: none; width: min(24rem, 50%); margin: 0; padding: 0 6px 6px 0; border: 0; background: none; grid-template-columns: 1fr 1.3fr; }
.suspect-top .sticky-action .btn { font-size: 0.8rem; padding-left: 0.3em; padding-right: 0.3em; min-height: 56px; }
/* short iPad screens: smaller detective photo, traits in one flowing line */
@media (min-width: 620px) and (max-height: 760px) {
  .station-kid { width: 3.4rem; height: 3.4rem; }
  .akten-grid .suspect-photo { width: 4.4rem; min-height: 4.4rem; }
  .akten-grid .suspect-traits { font-size: 0.56rem; line-height: 1.3; }
  .akten-grid .suspect-traits li { display: inline; padding: 0; text-indent: 0; }
  .akten-grid .suspect-traits li::before { content: ""; }
  .akten-grid .suspect-traits li + li::before { content: " \00B7  "; color: var(--blue); font-weight: 700; }
}

/* Intro */
.intro-text { font-size: 1.1rem; line-height: 1.45; }
.intro-text + .intro-text { margin-top: .6rem; }
.intro-page { display: flex; flex-direction: column; flex: 1; }
.intro-page[hidden] { display: none; }
@media (max-height: 690px) { .intro-text { font-size: .95rem; line-height: 1.3; } .intro-text + .intro-text { margin-top: .35rem; } }

/* Wegweiser */
.way-image { flex: 1 1 6rem; min-height: 6rem; max-height: 60vh; margin-bottom: .7rem; }

/* QR scan: the square camera preview must fit the screen height (wide tablets). */
.qr-frame { width: min(100%, 58vh, 26rem); margin-left: auto; margin-right: auto; }