/* =========================================================
   Die Welt — der Durchflug.

   Die Fahrt selbst baut scrub-engine.js und bringt ihr eigenes,
   abgeschottetes CSS mit (alle Klassen beginnen mit sw-). Hier steht
   nur zweierlei: die Farben, die die Fahrt von uns übernimmt, und
   die vollständige Fassung für alle ohne JavaScript.
   ========================================================= */

.welt-body{
  background:#0A0810;color:#EFEAF2;
}
.welt-body::before,.welt-body::after{display:none}

/* Die Fahrt liest diese Werte aus — damit sie unsere Marke trägt
   und nicht die Voreinstellung der Maschine. */
.welt-buehne{
  --sw-bg:#0A0810;
  --sw-ink:#EFEAF2;
  --sw-ink-soft:#B3A9C0;
  --sw-accent:#EB71BE;
  --sw-font-display:var(--display);
  --sw-font-body:var(--sans);
}

/* ---------------------------------------------------------
   Ohne JavaScript: sechs Bilder, sechs Texte, alles lesbar.
   --------------------------------------------------------- */
.ohne-skript{max-width:64rem;margin:0 auto;padding:1.5rem clamp(1.2rem,5vw,2.5rem) 5rem}
.ohne-skript__top{padding:.6rem 0 2.5rem}
.ohne-skript__zurueck{color:#B3A9C0;text-decoration:none;font-size:.95rem}
.ohne-skript__zurueck:hover{color:#EFEAF2}
.ohne-skript__szene{margin:0 0 clamp(3rem,8vw,5rem)}
.ohne-skript__szene img{
  width:100%;height:auto;display:block;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);margin-bottom:1.4rem;
}
.ohne-skript__n{
  margin:0 0 .6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:#53DFEE;
}
.ohne-skript__szene h1,
.ohne-skript__szene h2{
  margin:0 0 .8rem;font-size:clamp(1.8rem,4.6vw,3.2rem);line-height:1.06;
  letter-spacing:-.04em;font-weight:700;text-wrap:balance;
}
.ohne-skript__szene p{margin:0 0 .6rem;color:#C4BBD0;max-width:56ch;line-height:1.6}
.ohne-skript__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

/* Die Fahrt bringt ihr eigenes CSS mit. Am Finger sind ihre
   Routenpunkte und Kapitelknoepfe zu klein — hier nachgebessert. */
@media (pointer:coarse){
  .welt-buehne .sw-route__dot{min-width:44px;min-height:44px}
  .welt-buehne .sw-nav a,.welt-buehne .sw-nav button{min-height:44px;display:inline-flex;align-items:center}
}

/* Runde 10: Pflichtangaben */
.welt-recht{
  position:fixed;left:0;right:0;bottom:0;z-index:70;margin:0;
  display:flex;gap:1.1rem;justify-content:center;
  padding:.5rem .9rem calc(.5rem + env(safe-area-inset-bottom));
  font-family:var(--mono,ui-monospace,monospace);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;
  pointer-events:none;
}
.welt-recht a{
  pointer-events:auto;color:rgba(255,255,255,.42);text-decoration:none;
  transition:color .2s ease;
}
.welt-recht a:hover,.welt-recht a:focus-visible{color:rgba(255,255,255,.92)}

/* Ohne Skript steht die lange Fassung da — dann gehoert der Hinweis
   ans Ende des Textes und nicht ueber den Bildschirm geklebt. */
.ohne-skript ~ .welt-recht{position:static;padding-block:2rem}
.ohne-skript ~ .welt-recht a{color:var(--ink-2,#4C4458)}

/* Runde 10: Hinweis ueber die Pflichtangaben heben */
/* Die Leiste unten ist rund 32 px hoch. Der Scroll-Hinweis der Engine sitzt
   fest bei bottom:26px und lag damit genau darauf — gemessen auf 390, 360
   und 1440 px. Er rueckt deshalb um die Leistenhoehe nach oben.
   Hoehere Spezifitaet als die Engine, weil die ihr CSS zur Laufzeit
   einhaengt und sonst gewinnt. */
body.welt-body .sw-hint{bottom:60px}
@media (max-width:600px){
  body.welt-body .sw-hint{bottom:calc(54px + env(safe-area-inset-bottom))}
}