/* ============================================================
   world.css — Scroll-World-Theming + Clay-Look für die ganze Seite
   Lädt NACH styles.css/home.css; Engine-CSS liegt in @layer sw
   und verliert gegen diese ungelayerten Regeln.
   ============================================================ */

:root {
  --clay-shadow: 0 14px 34px rgba(27, 24, 19, 0.07), 0 3px 10px rgba(27, 24, 19, 0.05);
  --clay-shadow-lg: 0 24px 56px rgba(27, 24, 19, 0.09), 0 6px 16px rgba(27, 24, 19, 0.06);
  --clay-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ---- Engine-Theme auf Marlow-Brand ---- */
#world.sw-root {
  --sw-bg: var(--cream);
  --sw-ink: var(--text);
  --sw-ink-soft: var(--text-muted);
  --sw-accent: var(--orange);
  --sw-font-display: var(--font-display);
  --sw-font-body: var(--font-text);
}

/* ---- Display-Typo: Fraunces, editorial statt verspielt ---- */
h1, h2, h3, .h1, .h2, .h3,
#world .sw-copy__title,
.faq__head .h2, .model__head .h2, .final__inner .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  /* Laufweite je Größenklasse statt ein Wert für alles: was groß gesetzt
     ist, läuft enger, sonst zerfällt die Zeile in Einzelbuchstaben. */
  letter-spacing: var(--track-h2);
  line-height: 1.08;
  font-optical-sizing: auto;
}
h1, .h1, #world .sw-copy__title { letter-spacing: var(--track-display); }
h3, .h3 { letter-spacing: var(--track-h3); }
#world .sw-copy__title { font-weight: 600; text-shadow: 0 2px 26px rgba(241, 236, 225, 0.92), 0 1px 3px rgba(241, 236, 225, 0.7); font-size: clamp(1.75rem, 3.1vw, 2.85rem); }

/* Insel = Hauptdarstellerin: kompakte Copy, kleine Banner statt Textwand */
#world .sw-copy { width: min(34vw, 400px); }
#world .sw-copy__num { font-size: .68rem; }
#world .sw-copy__body { max-width: 36ch; font-size: clamp(.92rem, 1.05vw, 1.02rem); }
#world .sw-btn { padding: 11px 20px; font-size: .9rem; }
#world .sw-copy__cta { margin-top: 20px; }
#world .sw-copy__eyebrow { letter-spacing: .12em; font-weight: 600; font-family: var(--font-text); text-shadow: 0 1px 14px rgba(241,236,225,.95), 0 0 2px rgba(241,236,225,.8); }
#world .sw-copy__body { text-shadow: 0 1px 16px rgba(241,236,225,.95); }
/* Zahlen: Instrument Sans mit tabellarischen Ziffern */
.big-num, .cmp__price, .sw-kern__num, .sw-spar__num, .tnum {
  font-family: var(--font-text);
  font-variant-numeric: tabular-nums;
}

/* Orange CTAs, Text auf Orange via abgedunkeltem Grund (WCAG), weiche Toy-Schatten */
#world .sw-topcta { background: var(--orange); color: #fff; box-shadow: 0 8px 20px rgba(148,68,26,.22); border-radius: 10px;
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-press) var(--ease-out); }
@media (hover: hover) { #world .sw-topcta:hover { background: var(--orange-press); } }
#world .sw-topcta:active { background: var(--orange-press); transform: scale(0.97); }
#world .sw-btn--primary { background: var(--orange); color: #fff; box-shadow: 0 10px 22px rgba(148,68,26,.22); border-radius: 10px;
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-press) var(--ease-out); }
@media (hover: hover) { #world .sw-btn--primary:hover { background: var(--orange); transform: translateY(-2px); } }
#world .sw-btn--primary:active { background: var(--orange-press); transform: scale(0.97); }
#world .sw-btn--ghost { color: var(--text); border-color: rgba(27,24,19,.24); background: rgba(250,246,236,.6); border-radius: 10px; }
/* Schwebende Leisten sind Material, nicht Farbe: Weichzeichner plus leichte
   Sättigung, damit die Insel darunter durchscheint statt abgedeckt zu werden. */
#world .sw-nav { background: rgba(250,246,236,.72); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  border-color: rgba(27,24,19,.09); box-shadow: var(--clay-shadow), inset 0 1px 0 rgba(255,255,255,.55); border-radius: 12px; }
#world .sw-nav__item { transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), transform var(--dur-press) var(--ease-out); }
#world .sw-nav__item:active { transform: scale(0.96); }
#world .sw-nav__item { border-radius: 8px; }
#world .sw-nav__item.is-active { background: var(--orange); }
#world .sw-route__label { border-radius: 7px; }
#world .sw-brand__logo { border-radius: 7px; display: block; box-shadow: 0 3px 10px rgba(27,24,19,.14); }
#world .sw-brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }

/* Kräftigerer Lesbarkeits-Scrim hinter der Copy (Desktop) */
#world .sw-copylayer::before {
  width: min(64vw, 900px);
  background: linear-gradient(90deg,
    var(--cream) 0%,
    color-mix(in srgb, var(--cream) 88%, transparent) 36%,
    color-mix(in srgb, var(--cream) 46%, transparent) 66%,
    transparent 100%);
}

/* ---- Copy-Karten-Extras ---- */
.sw-trust { display: block; margin-top: 22px; font-size: .8rem; color: var(--text-subtle); max-width: 44ch; line-height: 1.5; }

/* Kernzahl-Kachel (Szene 2) — nur die Zahl, keine Unterzeile */
.sw-kern {
  display: inline-flex; flex-direction: column;
  margin-top: 22px; padding: 14px 20px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--clay-shadow);
}
.sw-kern__num { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; color: var(--text); letter-spacing: -0.015em; }
.sw-kern__num small { font-size: .5em; font-weight: 500; color: var(--text-muted); }

/* Spar-Kachel (Szene 5) — GRÜN nur hier */
.sw-spar {
  display: inline-flex; flex-direction: column;
  margin-top: 22px; padding: 14px 20px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--clay-shadow);
}
.sw-spar__num { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 600; color: var(--green); letter-spacing: -0.015em; }
.sw-spar__num small { font-size: .46em; font-weight: 500; color: var(--text-muted); }

/* ---- Szenen: Bühnen-Wechsel (Interim bis zu den Higgsfield-Clips) ---- */
#world .sw-scene { will-change: transform, opacity; }
/* WICHTIG: altes globales img{height:auto} aus styles.css schlägt die
   @layer-Engine-Regel — hier unlayered zurückerobern, sonst füllt die
   Insel nie den Viewport (Cover-Crop statt width-only). */
#world .sw-scene__still, #world .sw-scene__video {
  width: 100%; height: 100%;
  object-fit: cover;
}
#world .sw-scene.is-morph {
  border-radius: clamp(20px, 3vw, 34px);
  box-shadow: 0 44px 120px rgba(27, 24, 19, 0.22), 0 10px 34px rgba(27, 24, 19, 0.12);
}

/* ---- Topbar: weicher Creme-Verlauf, nichts überlappt mehr hart ---- */
#world .sw-topbar { padding-block: clamp(12px, 1.8vw, 20px); }
#world .sw-topbar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150%;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cream) 96%, transparent) 0%,
    color-mix(in srgb, var(--cream) 82%, transparent) 55%,
    transparent 100%);
  pointer-events: none; z-index: -1;
}

/* ---- Maskottchen: lebt IN der Szene und dreht beim Insel-Flip mit ----
   (nie auf Zahlen/Preisen platzieren; Kontaktschatten ist eingebacken) */
#world .sw-scene .sw-mascot {
  position: absolute; opacity: 0; pointer-events: none; z-index: 3;
  filter: drop-shadow(0 10px 18px rgba(31,27,21,.14));
  will-change: opacity;
}
.sw-mascot--einfahrt  { right: 13%; bottom: 6%;  width: clamp(110px, 24vh, 240px); }
.sw-mascot--leitstand { right: 17%; bottom: 8%;  width: clamp(105px, 22vh, 225px); }
.sw-mascot--tank      { right: 15%; bottom: 8%;  width: clamp(105px, 22vh, 225px); }
.sw-mascot--werk      { right: 14%; bottom: 6%;  width: clamp(105px, 22vh, 225px); }
.sw-mascot--spar      { right: 13%; bottom: 8%;  width: clamp(105px, 22vh, 225px); }
.sw-mascot--finale    { right: 12%; bottom: 6%;  width: clamp(110px, 24vh, 240px); }

/* Sprechblasen bewusst entfernt: eine Botschaft pro Szene — das Banner.
   (Engine-Support für popouts bleibt erhalten, nur ohne Konfiguration.) */

/* ---- Nach der Welt: Chrome ausblenden ---- */
#world .sw-route, #world .sw-hint { transition: opacity .35s ease; }
#world.sw-past .sw-route, #world.sw-past .sw-hint { opacity: 0 !important; pointer-events: none; }

/* ---- Intro überspringen: dezenter Clay-Pill oben-mittig, unter der Topbar ----
   Sichtbarkeit steuert das JS (.is-visible) je nach Scroll-Position. */
.sw-skip {
  position: fixed; top: clamp(88px, 12vh, 108px); left: 50%;
  transform: translate(-50%, -6px); z-index: 45;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px 8px 17px;
  font-family: var(--font-text);
  font-size: .82rem; font-weight: 600; line-height: 1; white-space: nowrap;
  color: var(--text); text-decoration: none;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 10px; box-shadow: var(--clay-shadow);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              background var(--dur-press) var(--ease-out), color var(--dur-press) var(--ease-out);
}
/* Ein- und Ausgang laufen denselben Weg: der Pill kommt von oben und geht
   nach oben zurück. */
.sw-skip.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
/* Tastatur: der Sprunglink ist das erste fokussierbare Element der Seite und
   muss sichtbar werden, sobald er den Fokus hat. Vorher fokussierte man ein
   unsichtbares Ziel. */
.sw-skip:focus-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
/* Druckweg inklusive Zentrier-Versatz, sonst springt der Pill beim Tippen
   an den linken Rand. */
.sw-skip.is-visible:active { transform: translate(-50%, 0) scale(0.97); }
@media (hover: hover) {
  .sw-skip:hover { background: var(--surface); color: var(--orange-press); border-color: color-mix(in srgb, var(--orange) 40%, transparent); }
}
.sw-skip svg { display: block; opacity: .65; }
/* Handy: keine Nav im Weg, also höher, knapp unter die Topbar mit Marke + CTA */
@media (max-width: 860px) {
  .sw-skip { top: calc(env(safe-area-inset-top, 0px) + clamp(58px, 10vh, 82px));
    font-size: .8rem; padding: 8px 14px 8px 16px; }
}
@media (pointer: coarse) {
  .sw-skip { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-skip { transition: opacity 180ms linear; }
}

/* ============================================================
   NACH-WELT-SEKTIONEN IM CLAY-LOOK (V2: runde schwebende Slabs)
   ============================================================ */
.after-world { position: relative; z-index: 130; background: var(--cream); padding-bottom: 8px; }
.after-world::before { content: ""; position: absolute; top: -90px; left: 0; right: 0; height: 90px;
  background: linear-gradient(180deg, rgba(243,238,227,0) 0%, var(--cream) 88%); pointer-events: none; }

/* Eyebrows: schlichtes Kapitälchen-Label mit Strich, keine Pillen */
.after-world .eyebrow-h {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--orange);
}
.after-world .eyebrow-h::before {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  opacity: .55;
}
.after-world .press__label { display: flex; justify-content: center; }

/* Headlines */
.after-world .h2 { font-size: clamp(1.85rem, 3.4vw, 2.85rem); margin-top: 16px; }

/* Helle Sektionen als ruhige Ivory-Slabs */
.after-world .press,
.after-world #faq,
.after-world .section--surface {
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: 20px;
  margin-inline: clamp(10px, 3vw, 44px);
  box-shadow: var(--clay-shadow);
}
.after-world .press { padding: clamp(30px, 4.5vw, 56px) clamp(16px, 4vw, 48px); }
.after-world #faq { padding-block: clamp(40px, 6vw, 84px); margin-block: clamp(16px, 3vw, 44px); }
.after-world .section--surface { margin-block: clamp(16px, 3vw, 44px); }

/* Bekannt-aus: ruhige Wortmarken-Reihe statt Pillen */
.press__marks { gap: clamp(14px, 2.2vw, 30px); }
.press__mark {
  padding: 6px 2px;
  color: var(--text);
  /* .58 ergab 4,1:1 auf Elfenbein und fiel damit durch die AA-Schwelle;
     .72 liest sich immer noch zurückhaltend, hält aber 6,4:1. */
  opacity: .72;
  border-bottom: 1px solid transparent;
  transition: opacity var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
@media (hover: hover) {
  .press__mark:hover { opacity: 1; color: var(--text); border-bottom-color: var(--orange); }
}
.press__mark:active { opacity: 1; transform: scale(0.97); }

/* App-Galerie */
.peek { padding-top: clamp(28px, 5vw, 56px); }
.peek__head { text-align: center; max-width: 640px; margin: 0 auto clamp(24px, 4vw, 44px); }
/* stretch statt start: sonst hängt die Karte mit zweizeiliger Bildunterschrift
   unten heraus und die Kacheln wirken unterschiedlich hoch */
.peek__strip {
  display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: clamp(12px, 2vw, 22px); align-items: stretch;
}
.peek__shot {
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 18px; padding: 10px 10px 6px;
  box-shadow: var(--clay-shadow);
}
/* Alle fünf zeigen denselben oberen Ausschnitt (Top 1900 von 2622 px).
   Grund: app-perkm.png ist unten zu 27,5 % leer, alle anderen sind zu
   97–100 % gefüllt. Volle Höhe ließ diesen einen Screenshot kleiner
   wirken, obwohl die Box identisch war. Der Beschnitt macht den
   gefüllten Anteil überall gleich. */
.peek__shot img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 1206 / 1900;
  object-fit: cover;
  object-position: top center;
  border-radius: 12px;
  background: var(--cream);
}
/* Unterschriften reservieren immer zwei Zeilen: so beginnen sie alle auf
   derselben Höhe UND die Kacheln schließen unten bündig ab. */
.peek__shot figcaption {
  margin-top: 10px; padding-bottom: 6px;
  min-height: calc(2 * 1.35em);
  font-size: .78rem; line-height: 1.35; color: var(--text-muted); text-align: center;
}
@media (max-width: 860px) {
  .peek__strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px;
    margin: 0 calc(-1 * clamp(16px, 5vw, 32px)); padding-left: clamp(16px, 5vw, 32px); padding-right: clamp(16px, 5vw, 32px);
    /* Der Wisch bleibt im Karussell und löst weder Seitenscroll noch die
       Zurück-Geste des Browsers aus. Das Schwungende rastet mittig ein. */
    overscroll-behavior-x: contain;
    scroll-padding-inline: clamp(16px, 5vw, 32px);
  }
  .peek__shot { flex: 0 0 58vw; max-width: 240px; scroll-snap-align: center; }
}

/* Mobile-Tarifkarten: gestapelt statt breiter Tabelle */
.plans { display: none; }
@media (max-width: 700px) {
  .cmp { display: none; }
  .plans { display: grid; gap: 14px; }
  .plan {
    background: var(--cream);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 18px 18px 16px;
    box-shadow: var(--clay-shadow);
    text-align: left;
  }
  .plan--plus, .plan--pro { background: var(--surface); }
  .plan__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .plan__tier { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
  .plan--plus .plan__tier, .plan--pro .plan__tier { color: var(--orange-press); }
  .plan__price { font-weight: 600; font-size: 1.15rem; }
  .plan__per { font-size: .76rem; color: var(--text-muted); flex-basis: 100%; }
  .plan__note { margin: 10px 0 0; font-size: .8rem; color: var(--text-muted); }
  .plan__list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .plan__list li { font-size: .93rem; color: var(--text); padding-left: 24px; position: relative; }
  .plan__list li::before {
    content: ""; position: absolute; left: 0; top: .28em;
    width: 13px; height: 13px; border-radius: 50%;
    background: color-mix(in srgb, var(--orange) 16%, var(--surface));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--orange) 45%, transparent);
  }
}

/* Preistabelle als Clay-Karte */
.cmp {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: var(--clay-shadow-lg);
  overflow: hidden;
}
.cmp__scroll { padding: clamp(8px, 1.6vw, 20px); }
.cmp__table th.cmp__col-pro, .cmp__table td.cmp__col-pro {
  background: color-mix(in srgb, var(--orange) 7%, var(--surface));
}
.cmp__tier { font-family: var(--font-display); font-weight: 600; }
.model__cancel { text-align: center; }

/* Beweis-Band: dunkle Clay-Platte mit großen Radien, dichtes Raster ohne Löcher */
.section--ink {
  margin: clamp(16px, 3vw, 44px) clamp(10px, 3vw, 44px);
  border-radius: 22px;
  box-shadow: var(--clay-shadow-lg);
  overflow: hidden;
  padding-block: clamp(40px, 6vw, 76px);
}
.section--ink .proof__inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4.5vw, 60px) clamp(28px, 5vw, 72px);
  align-items: center;
}
.section--ink .proof__quote,
.section--ink .proof__save,
.section--ink .founders,
.section--ink .proof__cta { margin: 0; max-width: none; grid-area: auto; }
.section--ink .proof__quote { grid-column: 1; grid-row: 1; }
.section--ink .proof__save { grid-column: 2; grid-row: 1; }
/* Zahl so groß, dass „/ Jahr" in derselben Zeile bleibt */
.section--ink .big-num { font-size: clamp(2.2rem, 5.6vw, 3.4rem); }
.section--ink .founders {
  grid-row: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(200px, 320px) 1fr;
  gap: clamp(20px, 3.5vw, 48px);
  align-items: center;
}
.section--ink .proof__cta { grid-column: 1 / -1; justify-self: center; text-align: center; }
.founders__photo img { border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,.35); width: 100%; height: auto; }

/* Mobile: eine ruhige, mittige Spalte — kein Grid-Versatz, keine schmalen Reste */
@media (max-width: 860px) {
  .section--ink { padding: clamp(30px, 8vw, 44px) clamp(20px, 6vw, 30px); margin-inline: 10px; }
  .section--ink .proof__inner {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: clamp(24px, 7vw, 34px);
  }
  .section--ink .proof__quote,
  .section--ink .proof__save,
  .section--ink .founders,
  .section--ink .proof__cta { grid-column: auto; grid-row: auto; width: 100%; margin: 0; }
  .section--ink .proof__quote-text { font-size: clamp(1.3rem, 5.5vw, 1.6rem); line-height: 1.3; }
  .section--ink .founders {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
  }
  .section--ink .founders__photo { max-width: 260px; width: 100%; }
  .section--ink .founders__body { text-align: center; }
  .section--ink .big-num { justify-content: center; }
}

/* FAQ als Clay-Karten */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--hairline) !important;
  border-radius: 12px;
  padding: 6px 20px;
  box-shadow: var(--clay-shadow);
}
.faq-item summary { font-weight: 600; }

/* Final-CTA: Abschluss-Karte über die volle Breite.
   Wichtig: home.css setzt hier max-width:40ch — das riss auf dem Desktop
   ein großes leeres Feld rechts unten auf. Hier bewusst zurückgenommen. */
.final-sec { padding-block: clamp(28px, 4vw, 52px); }
.final__inner {
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: 20px;
  box-shadow: var(--clay-shadow);
  padding: clamp(26px, 4vw, 52px) clamp(20px, 4vw, 56px);
}
.final__copy { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.final__inner .h2, .final__inner .lead { margin: 0; max-width: 20ch; }
.final__cta-group { margin-top: 4px; }
.final__sig { margin-top: 4px; }
.final__handoff { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.final__handoff .clay-buddy--final { position: static; width: clamp(90px, 9vw, 132px); }
.qr-panel {
  background: var(--cream); border: 1px solid var(--hairline);
  border-radius: 14px; padding: 16px 20px;
  box-shadow: none;
}
.qr-panel__code img:first-child { border-radius: 8px; }

/* Desktop: zwei Spalten, die Karte trägt die ganze Breite.
   900px, weil home.css das QR-Panel erst ab dort einblendet. */
@media (min-width: 900px) {
  .final__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    align-items: center;
    gap: clamp(36px, 5vw, 80px);
    text-align: left;
  }
  .final__copy { align-items: flex-start; }
  .final__inner .h2 { max-width: 15ch; }
  .final__inner .lead { max-width: 32ch; }
  .final__inner .store-badges { justify-content: flex-start; }
  .final__handoff { justify-self: end; }
}
/* Handy: nur das Maskottchen, und zwar oben als Auftakt */
@media (max-width: 899px) {
  .final__handoff .qr-panel { display: none; }
  .final__handoff { order: -1; }
}

/* CTA-Buttons: ruhig, klare Kante */
.cta {
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(148,68,26,.20);
}
.badge { border-radius: 10px; box-shadow: var(--clay-shadow); }

/* Offizielle Store-Badges (bekannte Grafiken) */
.store-badges { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.store-badges a, #world .sw-badge {
  display: inline-block; line-height: 0; border-radius: 8px;
  transition: transform var(--dur-press) var(--ease-out);
}
@media (hover: hover) {
  .store-badges a:hover, #world .sw-badge:hover { transform: translateY(-2px); }
}
.store-badges a:active, #world .sw-badge:active { transform: scale(0.96); }
.store-badges img { height: 48px; width: auto; display: block; }
#world .sw-badge img { height: 46px; width: auto; display: block; }
#world .sw-copy__cta { flex-wrap: wrap; }
@media (max-width: 860px) {
  .store-badges img { height: 44px; }
  #world .sw-badge img { height: 42px; }
}

/* Fußnoten: alles Kleingedruckte an einem ruhigen Ort */
sup.fn { font-size: .5em; font-weight: 500; color: inherit; opacity: .75; vertical-align: super; margin-left: 2px; }
.footnotes { max-width: 720px; margin: 0 auto 22px; text-align: center; }
.footnotes p { margin: 3px 0; font-size: .75rem; letter-spacing: var(--track-small); line-height: 1.5; color: var(--bark-text-muted); }
.footnotes sup { font-size: .8em; margin-right: 2px; }

/* Footer: dunkle runde Clay-Platte zum Abschluss */
.site-footer {
  border-top: none;
  background: var(--bark-950);
  border-radius: 22px;
  margin: clamp(16px, 3vw, 44px) clamp(10px, 3vw, 44px) 14px;
  padding-block: clamp(28px, 4vw, 44px);
  box-shadow: var(--clay-shadow-lg);
}
.site-footer .site-footer__trust { color: var(--bark-text); }
.site-footer .site-footer__links a { color: var(--bark-text-muted); }
.site-footer .site-footer__links a:hover { color: var(--bark-text); }
.site-footer .site-footer__meta { color: var(--bark-text-muted); }
.site-footer .site-footer__meta span { color: var(--bark-text-muted); }

/* Freisteller-Detektive in den Content-Sektionen */
.peek__head, .model__head, .faq__head, .final__inner { position: relative; }
.clay-buddy {
  position: absolute; pointer-events: none; z-index: 1;
  width: clamp(64px, 8vw, 112px);
  filter: drop-shadow(0 10px 20px rgba(31, 27, 21, 0.16));
}
/* Freiraum zur Headline: Fraunces läuft breiter als die alte Display-Schrift */
.clay-buddy--peek  { right: max(-96px, calc(50% - 420px)); top: -44px; }
.clay-buddy--model { right: max(-72px, calc(50% - 420px)); top: -38px; }
.clay-buddy--faq   { right: max(-64px, calc(50% - 400px)); top: -38px; }
@media (max-width: 860px) {
  .clay-buddy { width: 60px; }
  .clay-buddy--peek, .clay-buddy--model, .clay-buddy--faq { right: 4px; top: -26px; }
}

/* Noscript-Hero */
.nojs-hero { padding: clamp(48px, 10vw, 120px) clamp(18px, 5vw, 64px); max-width: 760px; margin: 0 auto; text-align: left; }

/* ---- Mobile: die Insel IST der Screen, Copy als kleines schwebendes Banner ---- */
@media (max-width: 860px) {
  /* Portrait-Crop auf die Detektiv-Seite ankern (er steht in jeder Szene rechts) */
  #world .sw-scene__video, #world .sw-scene__still { object-position: 58% 50% !important; }
  /* nur ein dezenter Fuß-Schleier hinter dem Banner */
  #world .sw-copylayer::before {
    height: 30%; top: auto; bottom: 0; width: 100%;
    background: linear-gradient(0deg, color-mix(in srgb, var(--cream) 82%, transparent) 0%, transparent 100%);
  }
  #world .sw-copy {
    left: 10px; right: 10px; width: auto; max-width: none;
    text-align: center;
    /* Sitzt direkt über dem Home-Indikator. Vorher standen hier 86 px
       Abstand für eine Sticky-Leiste, die es auf dieser Seite nie gab:
       ein Sechstel Bildhöhe blieb ungenutzt. */
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    /* Echtes Material statt Farbfläche: kräftiger Weichzeichner, leichte
       Sättigung, helle Oberkante als Lichtkante. */
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--hairline);
    border-top-color: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 13px 15px 14px;
    box-shadow: var(--clay-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }
  #world .sw-copy__num { display: none; }
  #world .sw-copy__eyebrow { margin-top: 0; font-size: .66rem; text-shadow: none; }
  /* Auf dem Handy ist der Titel keine Displaygröße mehr, sondern 20 px:
     hier wieder aufmachen, sonst kleben die Buchstaben. */
  #world .sw-copy__title { font-size: 1.28rem; line-height: 1.15; margin-top: 6px; text-shadow: none; letter-spacing: -0.01em; }
  #world .sw-copy__body { font-size: .85rem; line-height: 1.45; margin-top: 7px; text-shadow: none; max-width: none; }
  #world .sw-copy__tags { margin-top: 9px; justify-content: center; }
  #world .sw-copy__tags li { font-size: .68rem; padding: 4px 9px; }
  #world .sw-copy__cta { margin-top: 11px; gap: 8px; justify-content: center; }
  #world .sw-btn { padding: 11px 16px; font-size: .88rem; flex: 1; text-align: center; }
  .sw-note { margin-top: 7px; font-size: .68rem; }
  .sw-kern, .sw-spar { padding: 9px 13px; margin-top: 10px; border-radius: 10px; box-shadow: none; }
  .sw-kern__num, .sw-spar__num { font-size: 1.25rem; }
  .sw-spar__cap, .sw-kern__cap { font-size: .72rem; }
  .sw-spar__meta { font-size: .64rem; }
  #world .sw-hint { display: none; }
  /* Der Weg zur App bleibt in jeder Szene sichtbar. Vorher war der CTA auf
     dem Handy ausgeblendet („übernimmt die Sticky-Bar"), die Leiste gab es
     aber nicht: Szene 2 bis 5 hatten damit gar keine Handlungsmöglichkeit. */
  #world .sw-topcta {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 18px;
    font-size: .875rem;
  }
}

/* Kompakte Höhen (kleine Laptops): alles bleibt sichtbar */
@media (min-width: 861px) and (max-height: 780px) {
  #world .sw-copy__title { font-size: clamp(1.8rem, 3.8vw, 2.9rem); }
  #world .sw-copy__body { margin-top: 12px; }
  .sw-kern, .sw-spar { margin-top: 14px; }
  .sw-trust { margin-top: 12px; }
  #world .sw-copy__tags { margin-top: 16px; }
}

/* Reduced motion: Karten ruhig, keine Transitions */
@media (prefers-reduced-motion: reduce) {
  #world .sw-route, #world .sw-hint { transition: none; }
  .press__mark { transition: none; }
}

/* ============================================================
   SYSTEMEINSTELLUNGEN: TRANSPARENZ UND KONTRAST
   Glas ist ein Angebot, keine Bedingung. Wer weniger Transparenz oder
   mehr Kontrast eingestellt hat, bekommt dieselbe Hierarchie in dicht.
   ============================================================ */
@media (prefers-reduced-transparency: reduce) {
  .sw-skip,
  #world .sw-nav,
  #world .sw-copy,
  #world .sw-route__label {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: var(--surface) !important;
  }
  #world .sw-copylayer::before { background: var(--cream) !important; }
}

@media (prefers-contrast: more) {
  .sw-skip,
  #world .sw-nav,
  #world .sw-copy {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--surface);
    border-color: color-mix(in srgb, var(--text) 45%, transparent);
  }
  .press__mark { opacity: 1; }
  #world .sw-copy__title, #world .sw-copy__body, #world .sw-copy__eyebrow { text-shadow: none; }
  .peek__shot, .faq-item, .plan, .cmp { border-color: color-mix(in srgb, var(--text) 30%, transparent); }
}

/* ============================================================
   AUSSENRÄNDER: Notch und Home-Indikator
   ============================================================ */
.after-world .press,
.after-world #faq,
.after-world .section--surface,
.section--ink,
.site-footer {
  margin-inline: max(clamp(10px, 3vw, 44px), var(--safe-l)) max(clamp(10px, 3vw, 44px), var(--safe-r));
}
.site-footer { margin-bottom: max(14px, var(--safe-b)); }
#world .sw-topbar { padding-left: max(clamp(18px, 5vw, 64px), var(--safe-l)); padding-right: max(clamp(18px, 5vw, 64px), var(--safe-r)); }