/* Journey of Money · Für Schulen
   Nur was die Schulseite zusätzlich zur Testwochenende-Grundlage (stil.css) braucht. */

/* ───────── Selbst spielen ───────── */
.selbst .spielzug__frage { margin-bottom: 1.2rem; }
.selbst__text { color: var(--text-leise); max-width: 640px; margin: 0 auto 1.6rem; }
.selbst__rollen { list-style: none; padding: 0; margin: 0 auto 2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 720px; }
.selbst__rollen li {
  display: grid; gap: .35rem; justify-items: center; padding: 1rem .6rem; border-radius: 18px;
  border: 1px solid rgba(247,241,230,.18); background: rgba(247,241,230,.04);
  font: 600 1rem/1.2 var(--schrift-titel);
}
.selbst__rollen span { font-size: 1.6rem; line-height: 1; }
.selbst__klein { margin: 1rem auto 0; font-size: .88rem; color: var(--text-leise); }
.selbst .spielzug__schluss { margin-top: 2rem; text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .selbst__rollen { grid-template-columns: repeat(2, 1fr); } }

/* ───────── Welten: Spiele je Welt ───────── */
.welt__spiele { margin: .9rem 0 0; font: 500 .8rem/1.5 var(--schrift-zahl); color: var(--gold-hell); letter-spacing: .02em; }

/* ───────── Ablauf eines Schultags ───────── */
.ablauf { list-style: none; counter-reset: s; padding: 0; margin: 0 0 4rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.ablauf li { counter-increment: s; color: var(--text-leise); padding-top: 1.2rem; border-top: 1px solid var(--linie); }
.ablauf li::before {
  content: counter(s); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-bottom: .9rem;
  border-radius: 50%; background: var(--gold); color: var(--navy-tief); font: 700 1rem/1 var(--schrift-titel);
}
.ablauf b { display: block; color: var(--text); font: 600 1.1rem/1.35 var(--schrift-titel); margin-bottom: .4rem; }
@media (max-width: 860px) { .ablauf { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ablauf { grid-template-columns: 1fr; } }

/* ───────── Sicher und neutral ───────── */
.sicher { padding-top: 0; }
.versprechen--vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .versprechen--vier { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .versprechen--vier { grid-template-columns: 1fr; } }

/* ───────── Formate ───────── */
.formate { padding-top: 0; }
.formate__reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.format {
  padding: 1.8rem 1.6rem; border-radius: 22px; border: 1px solid var(--linie);
  background: rgba(12,26,44,.82); backdrop-filter: blur(6px);
}
.format h3 { font: 700 1.5rem/1.15 var(--schrift-titel); margin: .3rem 0 .7rem; }
.format p { color: var(--text-leise); margin: 0; }
.format .format__dauer { font: 500 .8rem/1.2 var(--schrift-zahl); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.format--hervor {
  border-color: var(--gold);
  background: radial-gradient(ellipse at 50% 0%, rgba(198,161,91,.22), transparent 70%), rgba(12,26,44,.9);
  box-shadow: 0 0 0 1px var(--gold), 0 30px 60px -30px rgba(198,161,91,.6);
}
.formate__hinweis { margin: 2rem 0 0; color: var(--text-leise); max-width: 760px; }
@media (max-width: 860px) { .formate__reihe { grid-template-columns: 1fr; } }

/* ───────── Kontakt ───────── */
.kontakt__wege { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 2rem; }
.kontakt__daten { display: grid; grid-template-columns: repeat(3, auto); gap: 1.2rem 2rem; margin: 0; padding: 1.4rem 0 0; border-top: 1px solid var(--linie); }
.kontakt__daten dt { font: 500 .72rem/1.2 var(--schrift-titel); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: .35rem; }
.kontakt__daten dd { margin: 0; }
.kontakt__klein { margin: 1.4rem 0 0; font-size: .85rem; color: var(--text-leise); }
@media (max-width: 700px) { .kontakt__daten { grid-template-columns: 1fr; } }


/* ───────── Der Film ───────── */
.buehne__film { display: inline-flex; gap: .5rem; align-items: center; margin-top: 1.2rem; color: var(--gold-hell); text-decoration: none; font-size: .95rem; }
.buehne__film:hover { text-decoration: underline; }
.film { padding: clamp(80px, 12vh, 140px) var(--rand) 0; max-width: 1100px; margin: 0 auto; text-align: center; }
.film__titel { font: 700 clamp(1.6rem, 1.1rem + 2vw, 2.6rem)/1.15 var(--schrift-titel); letter-spacing: -.01em; margin: .6rem 0 2rem; }
.film__rahmen { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; border: 1px solid var(--linie); background: #000; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9); }
.film__rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film__start { position: absolute; inset: 0; padding: 0; border: 0; cursor: pointer; background: #000; color: var(--text); font: inherit; }
.film__start img { width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .4s, transform .8s var(--weich); }
.film__start:hover img { opacity: .7; transform: scale(1.02); }
.film__knopf { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 10px rgba(198,161,91,.25), 0 20px 50px -10px rgba(0,0,0,.8); transition: transform .3s var(--weich); }
.film__knopf::after { content: ""; position: absolute; left: 38px; top: 28px; border-style: solid; border-width: 20px 0 20px 32px; border-color: transparent transparent transparent var(--navy-tief); }
.film__start:hover .film__knopf { transform: scale(1.08); }
.film__hinweis { position: absolute; left: 0; right: 0; bottom: 1.4rem; font: 600 1rem/1 var(--schrift-titel); letter-spacing: .04em; }
.film__klein { margin: .9rem 0 0; font-size: .82rem; color: var(--text-leise); }
@media (max-width: 640px) { .film__knopf { width: 72px; height: 72px; margin: -36px 0 0 -36px; } .film__knopf::after { left: 28px; top: 21px; border-width: 15px 0 15px 24px; } }

/* ───────── Theatervorhang ─────────
   Zwei Samtbahnen in Navy (Markenfarbe) mit Falten, goldenem Saum und Fransen, oben ein Querbehang.
   Beim Öffnen raffen sich die Bahnen zur Seite (Ursprung am äußeren Rand)
   und gleiten dann aus dem Bild. Text steht vor dem Samt und blendet zuerst aus. */
.vorhang { background: var(--navy-tief); transition: visibility 0s 3.4s; }
.vorhang__balken { display: none; }
.vorhang__tuch {
  position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 70%, rgba(0,0,0,.6) 100%),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.55) 0, rgba(0,0,0,.15) 1.6%, rgba(170,200,255,.09) 3.4%,
      rgba(226,200,143,.14) 4.2%, rgba(0,0,0,.05) 5.6%, rgba(0,0,0,.55) 7.4%),
    linear-gradient(180deg, #1c3a5e 0%, #12263f 55%, #0a1626 100%);
  transition: transform 2.6s cubic-bezier(.65, 0, .25, 1) .45s;
  will-change: transform;
}
.vorhang__tuch--links { left: 0; transform-origin: left center; box-shadow: inset -14px 0 30px rgba(0,0,0,.55); }
.vorhang__tuch--rechts { right: 0; transform-origin: right center; box-shadow: inset 14px 0 30px rgba(0,0,0,.55); }
/* goldene Kante, an der sich die Bahnen treffen */
.vorhang__tuch--links::before, .vorhang__tuch--rechts::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, #8a6a2c, #e2c88f 30%, #b08a45 60%, #8a6a2c);
}
.vorhang__tuch--links::before { right: 0; }
.vorhang__tuch--rechts::before { left: 0; }
/* Fransen am Saum */
.vorhang__tuch::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  background:
    repeating-linear-gradient(90deg, #c6a15b 0 2px, #8a6a2c 2px 3px, transparent 3px 5px),
    linear-gradient(180deg, #e2c88f 0 5px, transparent 5px);
  -webkit-mask: linear-gradient(180deg, #000 60%, transparent); mask: linear-gradient(180deg, #000 60%, transparent);
}
.vorhang__volant {
  position: absolute; left: 0; right: 0; top: 0; height: 13vh; min-height: 84px; z-index: 2;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0, rgba(226,200,143,.10) 2.5%, rgba(0,0,0,.35) 5%),
    linear-gradient(180deg, #0a1626, #183354);
  -webkit-mask: radial-gradient(60px 26px at 60px 100%, transparent 98%, #000) 0 0 / 120px 100%;
          mask: radial-gradient(60px 26px at 60px 100%, transparent 98%, #000) 0 0 / 120px 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  transition: transform 1.8s cubic-bezier(.65, 0, .25, 1) 1.6s;
}
.vorhang__volant::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 26px; height: 3px;
  background: linear-gradient(90deg, #8a6a2c, #e2c88f, #8a6a2c);
}
/* Lichtkegel auf dem geschlossenen Vorhang */
.vorhang__spot {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 42% 55% at 50% 52%, rgba(255,214,150,.20), rgba(255,214,150,.06) 45%, transparent 70%);
  transition: opacity .8s;
}
.vorhang__inhalt { text-shadow: 0 2px 18px rgba(0,0,0,.65); }
.vorhang__vorzeile, .vorhang__hinweis, .vorhang__leise { color: rgba(247,241,230,.8); }

body.ist-offen .vorhang { opacity: 1; background: transparent; transition: visibility 0s 3.4s, background .01s .5s; }
body.ist-offen .vorhang__inhalt { transform: scale(.96); opacity: 0; transition: transform .6s, opacity .5s; }
body.ist-offen .vorhang__spot { opacity: 0; }
body.ist-offen .vorhang__tuch--links { transform: translateX(-100%) scaleX(.22); }
body.ist-offen .vorhang__tuch--rechts { transform: translateX(100%) scaleX(.22); }
body.ist-offen .vorhang__volant { transform: translateY(-110%); }
/* Direkt verlinkt oder weniger Bewegung gewünscht: kein Theater, sofort offen. */
body.vorhang-sofort .vorhang, body.vorhang-sofort .vorhang * { transition: none !important; }
body.vorhang-sofort.ist-offen .vorhang { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .vorhang__tuch, .vorhang__volant { transition: none; }
  body.ist-offen .vorhang { visibility: hidden; transition: none; }
}
.zahlen--drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .zahlen--drei { grid-template-columns: 1fr; } }

/* Neues Bild für die erste Seite (2103 x 748): Ausschnitt nach links, damit das Logo rechts frei neben dem Text steht. */
.buehne__bild img { object-position: 8% 50%; }
@media (max-width: 700px) and (orientation: portrait) { .buehne__bild img { object-position: 50% 50%; } }

/* ───────── Kamerafahrt auf dem Startbild ─────────
   Wie eine langsame Kinokamera: sanft heran, leicht zur Seite, wieder zurück.
   Liegt auf <picture>, damit sie sich nicht mit dem Heranfahren beim Öffnen
   (transform auf dem <img>) in die Quere kommt. Nur transform: läuft auf der
   Grafikkarte und kostet kaum Rechenzeit. */
.buehne { overflow: hidden; }
.buehne__bild picture { animation: kamerafahrt 44s ease-in-out infinite alternate; transform-origin: 60% 45%; will-change: transform; }
@keyframes kamerafahrt {
  0%   { transform: scale(1)    translate(0, 0); }
  35%  { transform: scale(1.06) translate(-1.4%, -0.8%); }
  70%  { transform: scale(1.09) translate(0.6%, -1.2%); }
  100% { transform: scale(1.04) translate(1.2%, 0.6%); }
}
@media (prefers-reduced-motion: reduce) { .buehne__bild picture { animation: none; } }

/* ───────── Mira stupst an ───────── */
.selbst__blase {
  position: absolute; top: -52px; right: clamp(150px, 18vw, 190px); max-width: 330px; margin: 0; z-index: 2;
  padding: .8rem 1rem; text-align: left; font-size: .92rem; line-height: 1.45; color: var(--navy-tief);
  background: var(--creme); border-radius: 16px 16px 4px 16px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.8);
}
.selbst__blase .mira__name { display: block; font: 600 .7rem/1 var(--schrift-titel); letter-spacing: .18em; text-transform: uppercase; color: #8a6a2c; margin-bottom: .3rem; }
.selbst .spielzug__karte { margin-top: 40px; }
@media (max-width: 760px) {
  .selbst__blase { position: static; max-width: none; margin: 0 0 1.4rem; border-radius: 16px; }
  .selbst .spielzug__karte { margin-top: 0; }
}

/* Mira fliegt herein, die Blase kommt nach der Landung. */
#selbst-mira { opacity: 0; }
#selbst-mira.kommt { animation: einfliegen 1.5s cubic-bezier(.2, .8, .2, 1) forwards; }
#selbst-mira.da { opacity: 1; }
@keyframes einfliegen {
  0%   { opacity: 0; transform: translate(60vw, -35vh) rotate(28deg) scale(.45); }
  15%  { opacity: 1; }
  62%  { transform: translate(-14px, 8px) rotate(-9deg) scale(1.06); }
  80%  { transform: translate(5px, -4px) rotate(4deg) scale(.98); }
  100% { opacity: 1; transform: none; }
}
.selbst__blase { opacity: 0; transform: translateY(10px) scale(.85); transform-origin: 100% 100%; transition: opacity .5s, transform .6s cubic-bezier(.3, 1.5, .5, 1); }
.selbst__blase.da { opacity: 1; transform: none; transition-delay: .15s; }
@media (prefers-reduced-motion: reduce) { #selbst-mira { opacity: 1; } .selbst__blase { opacity: 1; transform: none; } }

/* Udo: die goldenen Fransen unten am Vorhang stören den Eindruck. */
.vorhang__tuch::after { display: none; }

/* ───────── Zweite Person, gespiegelt ───────── */
.person--gespiegelt { padding-top: 0; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 860px) { .person--gespiegelt { grid-template-columns: 1fr; } }
.person--gespiegelt .person__bild { order: 2; }
.person__zitat--klein { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); }
@media (max-width: 860px) { .person--gespiegelt .person__bild { order: 0; } }

/* Mira bei „Selbst spielen“: Blase mit ×, klappt nach ein paar Sekunden weg, Klick auf die Eule holt sie zurück */
#selbst-mira { cursor: pointer; }
#selbst-mira:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 50%; }
.selbst__blase { padding-right: 2.4rem; }
.selbst__blase .mira__zu { position: absolute; top: .35rem; right: .45rem; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(12,26,44,.12); color: var(--navy); font: 600 1.15rem/1 var(--schrift-text); cursor: pointer; }
.selbst__blase:not(.da) { pointer-events: none; }
@media (max-width: 760px) {
  /* Im Fluss: beim Zuklappen auch die Höhe einziehen, damit kein Loch bleibt */
  .selbst__blase { position: relative; top: auto; right: auto; max-height: 22rem; overflow: hidden; transition: opacity .5s, transform .6s cubic-bezier(.3, 1.5, .5, 1), max-height .6s ease, margin .6s ease, padding .6s ease; }
  .selbst__blase:not(.da) { max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .selbst__blase:not(.da) { opacity: 0; } }

/* ───────── Startbild auf dem Handy ─────────
   Hochkant passt das breite Bild nicht: Es würde stark vergrößert, das Logo abgeschnitten
   und der Text läge darauf. Darum steht das Bild hier als eigener Streifen oben
   (eigener Ausschnitt 900 x 748 mit dem ganzen Logo) und der Text darunter. */
@media (max-width: 700px) and (orientation: portrait) {
  .buehne { display: block; min-height: 0; }
  .buehne__bild { position: relative; inset: auto; aspect-ratio: 900 / 748; z-index: 0; overflow: hidden; }
  .buehne__bild img, body.ist-offen .buehne__bild img { object-position: 50% 50%; transform: none; }
  .buehne__bild picture { animation-name: kamerafahrtSanft; transform-origin: 50% 40%; }
  .buehne__schleier { inset: 0 0 auto 0; aspect-ratio: 900 / 748; z-index: 1;
    background: linear-gradient(180deg, rgba(7,15,26,.45) 0%, rgba(7,15,26,0) 18%, rgba(7,15,26,0) 58%, var(--navy-tief) 99%); }
  .buehne__inhalt { position: relative; z-index: 2; margin-top: -3vw; padding: 0 var(--rand) 96px; }
  .buehne__titel { font-size: clamp(2rem, 9vw, 2.6rem); }
  .buehne__unterzeile { font-size: 1.02rem; }
  .buehne__bild.ki-bild::after { top: auto; bottom: 12vw; }
}
@keyframes kamerafahrtSanft { 0% { transform: scale(1); } 50% { transform: scale(1.04) translate(-1%, -.5%); } 100% { transform: scale(1.02) translate(1%, 0); } }

/* Handy: Abzeichen „mit Reisevisum“ in eigener Zeile statt eingequetscht */
@media (max-width: 640px) { .umfrage__visum { display: table; margin: .7em 0 0; } }

/* Beschrifteter Tonknopf (nur Next Entrepreneurs: dort startet die Seite ohne Musik).
   Auch auf dem Handy mit Text, damit man ihn als Musikknopf erkennt. */
.tonknopf--beschriftet { border-color: rgba(198,161,91,.7); }
.tonknopf--beschriftet[aria-pressed="false"] { background: rgba(198,161,91,.18); }
@media (max-width: 640px) { .tonknopf--beschriftet .tonknopf__text { display: inline; } }

/* ───────── Vorhang mit Botschaft (nur Next Entrepreneurs) ─────────
   Für Schulleitungen: zweizeilige Überschrift, Einstiegsfrage, kurzer Text, zwei Knöpfe.
   Passt der Inhalt nicht auf den Bildschirm (kleine Handys), scrollt er im Vorhang. */
.vorhang__inhalt:has(.vorhang__titel--gross) { width: min(1100px, 100%); max-width: none; max-height: 100svh; overflow-y: auto; padding-block: max(14vh, 92px) 28px; scrollbar-width: none; }
.vorhang__titel--gross { font-size: min(clamp(2rem, 1rem + 3.6vw, 4rem), 7.4vh); line-height: 1.08; margin: 1rem auto 1.6rem; text-wrap: balance; }
.vorhang__titel--gross span:nth-child(1) { animation-delay: .7s; }
.vorhang__titel--gross span:nth-child(2) { animation-delay: 1.3s; }
.vorhang__text { max-width: 680px; margin: 0 auto 1.8rem; font-size: clamp(.98rem, .9rem + .3vw, 1.12rem); line-height: 1.55; color: rgba(247,241,230,.88); text-wrap: pretty; opacity: 0; animation: einblenden 1.2s 2s forwards; }
.vorhang__text p { margin: 0 0 .8em; }
.vorhang__frage { font: 600 clamp(1.12rem, 1rem + .6vw, 1.4rem)/1.4 var(--schrift-titel); color: var(--creme, #F7F1E6); }
.vorhang__versprechen { font-weight: 600; color: var(--gold-hell); }
.vorhang__knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.vorhang__knoepfe .knopf--gross { font-size: 1.05rem; }
.vorhang .vorhang__knoepfe .knopf { animation-delay: 2.6s; }
.vorhang__zeile { margin: 1.5rem 0 0; font: 500 .78rem/1.5 var(--schrift-titel); letter-spacing: .22em; text-transform: uppercase; color: rgba(226,200,143,.75); opacity: 0; animation: einblenden 1.2s 3s forwards; }
@media (max-width: 640px) {
  .vorhang__inhalt:has(.vorhang__titel--gross) .vorhang__marke { display: none; }
  .vorhang__inhalt:has(.vorhang__titel--gross) { padding-block: max(13vh, 84px) 20px; }
  .vorhang__vorzeile { font-size: .66rem; letter-spacing: .26em; line-height: 1.5; }
  .vorhang__titel--gross { font-size: clamp(1.6rem, 7.4vw, 2.2rem); margin: .7rem auto 1.1rem; }
  .vorhang__text { font-size: .9rem; line-height: 1.5; text-align: left; margin-bottom: 1.2rem; }
  .vorhang__frage { font-size: 1.02rem; }
  .vorhang__knoepfe { gap: .6rem; }
  .vorhang__knoepfe .knopf--gross { padding: .9em 1.6em; }
  .vorhang__zeile { margin-top: 1.1rem; }
  .vorhang__knoepfe .knopf { flex: 1 1 100%; }
  .vorhang__zeile { letter-spacing: .14em; }
}
@media (prefers-reduced-motion: reduce) { .vorhang__text, .vorhang__zeile { animation: none; opacity: 1; } }

/* ───────── Samtvorhang (nur Next Entrepreneurs, vorhang-stoff.js) ─────────
   Das Canvas zeichnet Bahnen und Querbehang; die CSS-Bahnen treten zurück.
   Ohne JavaScript bleibt der alte CSS-Vorhang stehen. */
.vorhang__stoff { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vorhang--samt { background: #04080f; }
.vorhang--samt .vorhang__tuch, .vorhang--samt .vorhang__volant { display: none; }
.vorhang--samt .vorhang__spot { background: radial-gradient(ellipse 46% 58% at 50% 50%, rgba(255,196,140,.16), rgba(255,170,120,.05) 50%, transparent 72%), linear-gradient(180deg, rgba(255,210,160,.06), transparent 30%); }
.vorhang--samt .vorhang__inhalt { text-shadow: 0 2px 22px rgba(2,6,14,.9), 0 0 2px rgba(2,6,14,.6); }
body.ist-offen .vorhang--samt { background: transparent; }

/* KI-Kennzeichnung auf dem Vorschaubild des Films (wie .ki-bild::after; verschwindet mit dem Vorschaubild beim Abspielen, die Zeile darunter bleibt) */
.film__ki {
  position: absolute; right: 12px; top: 12px; z-index: 4; pointer-events: none;
  font: 500 .72rem/1 var(--schrift-text); letter-spacing: .04em; color: var(--creme);
  background: rgba(8,19,31,.72); border: 1px solid rgba(252,250,244,.28); border-radius: 50px; padding: .36em .7em;
}

/* Längere Welttexte (19.10.2026): auf niedrigen Bildschirmen kleiner setzen, damit nichts an „Flow to Freedom“ stößt */
.welten__tafeln { max-width: 680px; }
.welt__text { max-width: 640px; }
@media (max-height: 920px) {
  .welt__name { font-size: clamp(2.6rem, .5rem + 10vh, 6rem); margin-bottom: .7rem; }
  .welt__frage { font-size: clamp(1.1rem, .7rem + 1.8vh, 1.5rem); margin-bottom: .5rem; }
  .welt__text { font-size: .95rem; line-height: 1.5; }
  .welt__spiele { margin-top: .6rem; }
}
@media (max-height: 700px) {
  .welt__nummer { margin-bottom: .3rem; }
  .welt__text { font-size: .86rem; line-height: 1.45; }
}
@media (max-width: 640px) and (max-height: 760px) {
  .welten__kopf { top: 52px; }
  .welten__untertitel { display: none; }
  .welt__name { font-size: 2.4rem; margin-bottom: .5rem; }
  .welt__frage { font-size: 1.05rem; }
  .welt__text { font-size: .82rem; line-height: 1.42; }
}