/* ==========================================================================
   Monis Chattingstube

   Warm, weiblich, fotolastig. Das Versprechen ist Geld, der Beweis ist Moni.
   Deshalb steht sie auf fast jedem Bildschirm, freigestellt auf Farbfeldern
   statt im grauen Studio, und die Zahlen sind das Größte auf der Seite.

   01 Fonts · 02 Tokens · 03 Reset · 04 Layout · 05 Typo · 06 CTA · 07 Icons
   08 Logo · 09 Nav · 10 Hero · 11 Leiter · 12 Geld · 13 Ablauf · 14 Brauchst
   15 Freiheit · 16 Einwände · 17 Moni · 18 Plätze · 19 Schluss · 20 Footer
   21 Sticky · 22 Modal · 23 Funnel · 24 Recht · 25 Motion
   ========================================================================== */

/* 01 Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "Jakarta";
  src: url("/assets/fonts/jakarta-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jakarta";
  src: url("/assets/fonts/jakarta-latin-ext.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 02 Tokens --------------------------------------------------------------- */

:root {
  --cream: #fdf7f4;
  --blush: #fbe6e4;
  --rose-tint: #fbdfe7;
  --white: #ffffff;

  --ink: #2a1529;   /* 15.17:1 auf Creme */
  --ink-2: #574056;
  --muted: #786175; /* 5.09:1 auf Creme */
  --line: #f0e2e0;

  /* Ein Akzent, zwei Rollen. --rose trägt weißen Text (5.39:1) und besteht
     zugleich als Text auf Creme (5.08:1). --rose-hi ist nur für sehr große
     Zahlen gedacht, wo 3:1 reicht. */
  --rose: #be2b50;
  --rose-hi: #e85d7e;
  --rose-deep: #8b213e;

  --on-dark: #fbedec;
  --on-dark-mut: #c2a7b6;

  /* Aktuelle Fläche. Sektionen kippen diese Werte, Komponenten lesen sie.
     Kein ".sec--blush .karte"-Override: das schlüge per Spezifität jeden
     Modifier. */
  --bg: var(--cream);
  --fg: var(--ink);
  --fg-mut: var(--muted);
  --hair: var(--line);
  --card: var(--white);

  --r: 22px;
  --r-sm: 14px;
  --r-pill: 999px;

  --sh: 0 2px 4px rgba(42, 21, 41, 0.04), 0 18px 40px -22px rgba(42, 21, 41, 0.28);
  --sh-lift: 0 4px 8px rgba(42, 21, 41, 0.05), 0 30px 60px -28px rgba(42, 21, 41, 0.34);

  --ease: cubic-bezier(0.23, 1, 0.32, 1);

  --display: "Jakarta", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --body: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --fs-body: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
  --fs-lead: clamp(1.1875rem, 0.8vw + 1rem, 1.5rem);

  --page: 1180px;
  --gut: clamp(20px, 5vw, 48px);
  --sec: clamp(72px, 9vw, 128px);
  --nav-h: 68px;

  --z-nav: 40;
  --z-sticky: 45;
  --z-modal: 60;

  color-scheme: light;
}

.on-blush {
  --bg: var(--blush);
  --card: var(--white);
}
.on-rose {
  --bg: var(--rose-tint);
  --card: var(--white);
}
.on-white {
  --bg: var(--white);
  --card: var(--cream);
}
.on-ink {
  --bg: var(--ink);
  --fg: var(--on-dark);
  --fg-mut: var(--on-dark-mut);
  --hair: #472d47;
  --card: #3a2039;
  --logo-body: var(--on-dark);
  --logo-hole: var(--ink);
}

/* 03 Reset ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

/* Muss nach den Komponenten greifen: ein "display: grid" auf der Komponente
   würde das hidden-Attribut sonst aushebeln. */
[hidden] {
  display: none !important;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.08;
  text-wrap: balance;
}
p {
  margin: 0;
  text-wrap: pretty;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2.5px solid var(--rose);
  outline-offset: 3px;
  border-radius: 6px;
}
::selection {
  background: var(--rose-tint);
  color: var(--ink);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--rose);
  color: var(--white);
  font-weight: 600;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus {
  left: 0;
}

.num {
  font-variant-numeric: lining-nums tabular-nums;
}

/* 04 Layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sec {
  padding-block: var(--sec);
  background: var(--bg);
  color: var(--fg);
}
.sec--tight {
  padding-block: clamp(48px, 6vw, 88px);
}

/* Der Kapazitaetsblock endet bereits mit einem CTA. Folgt direkt danach der
   Schluss-CTA, standen zwischen beiden fast 300px Leerraum. Beide gehoeren
   zu einer Bewegung, also ruecken sie zusammen. */
.sec--snug {
  padding-top: clamp(20px, 2.4vw, 36px);
}
#plaetze {
  padding-bottom: clamp(44px, 5vw, 72px);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.38;
  color: var(--fg);
  max-width: 28ch;
  font-weight: 500;
}
.say {
  color: var(--fg-mut);
  max-width: 54ch;
}
.say + .say {
  margin-top: 1em;
}

/* Kapitelmarke. Bewusst sparsam: drei auf der ganzen Seite. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 7px 15px 8px;
  border-radius: var(--r-pill);
  background: var(--rose-tint);
  color: var(--rose-deep);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.on-ink .kicker {
  background: rgba(251, 237, 236, 0.14);
  color: var(--on-dark);
}

.head {
  margin-bottom: clamp(32px, 4vw, 56px);
}
.head .say {
  margin-top: 18px;
}
/* Zwischenueberschrift innerhalb eines Abschnitts. Die Monatstreppe stand
   vorher ohne Ansage da: auf die Rechnung "so kommen deine 300 Euro zusammen"
   folgten unvermittelt drei Karten mit Monatszahlen, und der Sprung von einem
   Gespraech auf ein Monatseinkommen war nicht angekuendigt. Schmaler Abstand
   nach unten, damit sie zu ihren Karten gehoert und nicht als neuer Abschnitt
   gelesen wird. */
.head--sub {
  margin-top: clamp(38px, 4.4vw, 62px);
  margin-bottom: clamp(18px, 2vw, 26px);
}
.head--sub .t-md {
  max-width: 24ch;
}

/* 05 Typo ----------------------------------------------------------------- */

.t-xl {
  font-size: clamp(1.9375rem, 3.6vw + 0.5rem, 3.4rem);
  line-height: 1.07;
  letter-spacing: -0.034em;
  max-width: 20ch;
}
.t-lg {
  font-size: clamp(2rem, 3.8vw + 0.5rem, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.034em;
  max-width: 19ch;
}
.t-md {
  font-size: clamp(1.4rem, 1.8vw + 0.8rem, 2rem);
  line-height: 1.3;
  letter-spacing: -0.026em;
}

.rose {
  color: var(--rose);
}

/* Im Hero sind das zwei getrennte Aussagen. Sie duerfen sich keine Zeile
   teilen, sonst liest man "Geld. Ab 300" als eine Einheit. */
.t-xl .rose {
  display: block;
}
.on-ink .rose {
  color: var(--rose-hi);
}

/* Die Zahl ist das Versprechen. Deshalb ist sie das Größte auf der Seite. */
.big {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 6.4rem);
  line-height: 0.94;
  letter-spacing: -0.05em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  color: var(--rose);
}
.big__u {
  font-size: 0.34em;
  letter-spacing: -0.01em;
  vertical-align: 0.34em;
  margin-left: 0.1em;
  font-weight: 700;
}

/* 06 CTA ------------------------------------------------------------------ */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 60px;
  padding: 16px 30px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--rose);
  color: var(--white);
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 22px -12px rgba(190, 43, 80, 0.8);
  transition: transform 160ms var(--ease), background-color 200ms ease,
    box-shadow 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    102deg,
    transparent 34%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 66%
  );
  transform: translateX(-125%);
}
.cta.is-ping::after {
  transform: translateX(125%);
  transition: transform 880ms var(--ease);
}
.cta__i {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 240ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .cta:not(:disabled):hover {
    background: #cf3459;
    box-shadow: 0 16px 30px -14px rgba(190, 43, 80, 0.9);
  }
  .cta:not(:disabled):hover .cta__i {
    transform: translateX(4px);
  }
  .cta:not(:disabled):hover::after {
    transform: translateX(125%);
    transition: transform 680ms var(--ease);
  }
}
.cta:active:not(:disabled) {
  transform: scale(0.97);
}
.cta:disabled {
  cursor: not-allowed;
  background: #e4d6d2;
  color: #7c6b74;
  box-shadow: none;
}
.cta--lg {
  min-height: 66px;
  padding: 19px 36px;
  font-size: 1.125rem;
}
.cta--block {
  width: 100%;
}
/* Ein Button ueber die volle Breite braucht keine 30px Innenabstand, und er
   darf nie abschneiden: auf sehr schmalen Geraeten ist eine zweite Zeile
   immer besser als ein halbes Wort. Gilt fuer alle vollbreiten Varianten. */
.cta--block,
.result .cta,
.dock .cta {
  padding-inline: 18px;
  white-space: normal;
  text-wrap: balance;
}
.on-ink .cta,
.quote .cta,
.result .cta {
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .on-ink .cta:not(:disabled):hover,
  .result .cta:not(:disabled):hover {
    box-shadow: none;
  }
}

.cta--ghost {
  background: transparent;
  color: var(--fg);
  border: 1.5px solid var(--hair);
  box-shadow: none;
}
.cta--ghost::after {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .cta--ghost:not(:disabled):hover {
    background: transparent;
    color: var(--fg);
    border-color: var(--fg);
    box-shadow: none;
  }
}

/* Auf schmalen Displays passt das Label mit vollem Innenabstand nicht mehr
   in die Spalte. Lieber enger setzen als den Button abschneiden. */
@media (max-width: 430px) {
  .cta {
    padding-inline: 20px;
    font-size: 1rem;
    gap: 9px;
  }
  .cta--lg {
    padding-inline: 18px;
    font-size: 1.0625rem;
  }
}
/* Der grosse Button fuellt die Spalte, nicht seinen Inhalt. Innenabstand zu
   sparen bringt deshalb nichts, die Spalte schrumpft einfach mit. Bei 360px
   (verbreitete Android-Breite) ragte die Beschriftung vier Pixel heraus,
   erst ein kleinerer Schriftgrad loest das ohne zweite Zeile. */
@media (max-width: 374px) {
  .cta--lg {
    font-size: 1rem;
  }
}
@media (max-width: 359px) {
  .cta {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
}

.calm {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  color: var(--fg-mut);
}
.calm .i {
  width: 16px;
  height: 16px;
  flex: none;
}

/* 07 Icons ---------------------------------------------------------------- */

.i {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: none;
}
.ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--rose-tint);
  color: var(--rose-deep);
}
.ic .i {
  width: 21px;
  height: 21px;
}
.on-ink .ic {
  background: rgba(251, 237, 236, 0.12);
  color: var(--rose-hi);
}

/* 08 Logo ----------------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-height: 44px;
  padding-block: 5px;
  margin-block: -5px;
}
.logo__m {
  width: 32px;
  height: 32px;
  flex: none;
  overflow: visible;
}

/* Die Marke, vom Kunden geliefert und hier als SVG nachgebaut: ein Haus,
   dessen Umriss zugleich eine Sprechblase ist, mit zwei Chatblasen darin.

   Der Nachbau statt der gelieferten JPEG-Datei, damit das Zeichen bei jeder
   Groesse scharf bleibt, als Favicon taugt und die Farbe mitlaeuft. Die Form
   ist gegen das Original ueberlagert und abgeglichen.

   --logo-body traegt die Zeichenfarbe, --logo-hole die des Untergrunds: die
   Textzeilen und Punkte sind Aussparungen, keine weissen Flaechen. Ohne das
   staenden auf der dunklen Fussleiste weisse Balken in der Blase. */
.logo__haus {
  fill: none;
  stroke: var(--logo-body, var(--rose));
  stroke-width: 4.9;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.logo__front {
  fill: var(--logo-body, var(--rose));
}
.logo__back {
  fill: var(--logo-body, var(--rose));
  opacity: 0.3;
}
.logo__zeilen path {
  fill: none;
  stroke: var(--logo-hole, var(--cream));
  stroke-width: 2.5;
  stroke-linecap: round;
}
.logo__punkte circle {
  fill: var(--logo-hole, var(--cream));
}

/* Fuer Stellen, an denen die Marke gross auftreten soll. */
.logo--gross .logo__m {
  width: 56px;
  height: 56px;
}

.logo__t {
  display: grid;
  gap: 2px;
  line-height: 1;
}
.logo__n {
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.logo__s {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.on-ink .logo__s,
.foot .logo__s {
  color: var(--on-dark-mut);
}

/* 09 Nav ------------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(253, 247, 244, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms ease;
}
.nav.is-stuck {
  border-bottom-color: var(--line);
}
.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.nav .cta {
  min-height: 46px;
  padding: 11px 20px;
  font-size: 0.9375rem;
}
@media (max-width: 680px) {
  .nav .cta {
    display: none;
  }
}

/* 10 Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(16px, 2vw, 32px) 0;
  overflow: clip;
}

/* Warmes Farbfeld, auf dem Moni steht. Der weiche Schein dahinter gibt dem
   Freisteller Tiefe, damit er nicht flach aufgeklebt wirkt. */
.hero__field {
  position: relative;
  border-radius: var(--r);
  background: var(--blush);
  padding: clamp(26px, 3vw, 44px) clamp(22px, 3.5vw, 48px) 0;
  overflow: clip;
  isolation: isolate;
}
.hero__field::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -6%;
  bottom: -30%;
  width: min(70%, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 221, 228, 0.95) 0%, rgba(251, 233, 225, 0) 68%);
  pointer-events: none;
}

.hero__grid {
  display: grid;
  gap: clamp(14px, 2vw, 28px);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    gap: clamp(24px, 3vw, 44px);
  }
}

.hero__copy {
  display: grid;
  gap: clamp(16px, 1.6vw, 22px);
  justify-items: start;
  padding-bottom: clamp(28px, 3.4vw, 50px);
}

.hero__sub {
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 34ch;
  font-weight: 500;
}
.hero__act {
  display: grid;
  gap: 14px;
  width: 100%;
}
@media (min-width: 560px) {
  .hero__act {
    width: auto;
  }
}

/* Die drei Punkte unter dem Button nehmen die naheliegendsten Einwaende
   sofort weg und fuellen den Raum, der vorher leer war. */
.hero__trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 14px;
  margin-top: 2px;
}
/* Vier Punkte in einer starren Spaltenreihe liefen auf dem Desktop unter das
   Foto: grid-auto-flow: column kennt keine Breitenbegrenzung und schob den
   letzten Punkt aus der Textspalte heraus. Als umbrechendes Flex bleibt die
   Reihe immer in ihrer Spalte und nimmt so viele Zeilen wie noetig. */
@media (min-width: 680px) {
  .hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 22px;
    /* .hero__copy setzt justify-items: start, seine Kinder sind also nur so
       breit wie ihr Inhalt. Ohne diese Zeile bekaeme die Leiste eine viel zu
       schmale Breite und braeche auf drei Zeilen um. */
    justify-self: stretch;
    width: 100%;
  }
  .hero__trust li {
    font-size: 0.9375rem;
  }
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
}
.hero__trust .i {
  width: 17px;
  height: 17px;
  color: var(--rose);
  flex: none;
}

.hero__moni {
  position: relative;
  align-self: end;
  justify-self: center;
}
.hero__moni img {
  display: block;
  width: auto;
  height: clamp(400px, 58vh, 620px);
  margin-inline: auto;
}

/* Mobil war Moni in voller Laenge zu sehen und dadurch winzig. Die Loesung ist
   NICHT, das Feld ueber sie zu legen: die Aufnahme endet von sich aus an den
   Oberschenkeln, und ein zusaetzlicher Schnitt landet bei rund 76 Prozent der
   Bildhoehe genau auf ihrer herunterhaengenden Hand. Abgeschnittene Finger
   lesen sich als Fehler, gespart haette der Schnitt fast nichts. Sie wird
   stattdessen einfach groesser und bleibt vollstaendig.

   Die Hoehe fuehrt, die Breite folgt. Damit die Verdienst-Blase sich am Feld
   und nicht an der Bildbreite orientiert, nimmt der Behaelter die volle
   Breite ein und das Bild steht mittig darin. */
/* Mobil endet das Feld an Monis Taille.

   Die Schnitthoehe ist nicht frei waehlbar: zwischen 60 und 88 Prozent der
   Bildhoehe liegen ihre Unterarme und Haende, ein Schnitt dort trennt Finger
   ab und sieht nach Panne aus. Bei 58 Prozent verlaeuft die Kante unterhalb
   der Brust und oberhalb der Ellenbogen, also durch nichts.

   Das aspect-ratio rechnet das aus: 1654 mal 0,58 ergibt 959. Der Behaelter
   ist damit immer genau 58 Prozent so hoch wie das Bild, egal wie breit.

   Breite fuehrt, nicht Hoehe: svh faellt auf echten Geraeten kleiner aus als
   im Emulator, weil die Browserleisten mitzaehlen. */
@media (max-width: 899px) {
  .hero__moni {
    width: min(100%, clamp(240px, 62vw, 290px));
    aspect-ratio: 900 / 959;
    /* Ohne das greift das Seitenverhaeltnis nicht: als Rasterkind hat der
       Kasten min-height: auto und darf nicht kleiner werden als sein Inhalt. */
    min-height: 0;
    overflow: clip;
  }
  .hero__moni img {
    width: 100%;
    height: auto;
  }
  .hero__copy {
    padding-bottom: clamp(18px, 2.4vw, 28px);
  }
}

/* Die Verdienst-Karte am Freisteller.

   Sie sass frueher auf Kniehoehe und lag damit auf derselben Zeile wie die
   Trust-Leiste: auf dem Desktop schob sie sich ueber "ab 300 Euro pro
   Abschluss". Jetzt sitzt sie auf Brusthoehe, deutlich oberhalb der Leiste,
   und kann sie nicht mehr erreichen.

   Auf dem Handy entfaellt sie: dort steht die Ueberschrift zwei Fingerbreit
   darueber und sagt dasselbe. */
.proof {
  position: absolute;
  left: -34px;
  top: 34%;
  max-width: calc(100% + 34px);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 1px 12px;
  padding: 11px 18px 12px 11px;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: var(--sh-lift);
}
.proof img {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  object-fit: cover;
}
.proof__k {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}
.proof__v {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.026em;
  color: var(--rose);
  white-space: nowrap;
}
@media (max-width: 899px) {
  .proof {
    display: none;
  }
}

/* Zahlenreihe direkt unter dem Hero. Fuellt auf Desktop den Raum, der sonst
   leer unter dem Farbfeld stuende, und bringt vier Fakten, die erst weit unten
   wiederkommen. Bewusst ohne Karten: die Seite ist schon kartenreich.

   Die Trennlinien entstehen durch den Untergrund: die Flaeche ist --line, die
   Kacheln sind --cream, und gap: 2px laesst den Untergrund als Haarlinie
   durchscheinen. Ohne background und gap zerfaellt die Reihe in lose Bloecke.

   Vier gestapelte Zeilen waren mobil eine lange doofe Liste. Zwei pro Reihe
   liest sich als Block und spart die halbe Scrollstrecke. */
.keys {
  display: grid;
  gap: 2px;
  margin-top: clamp(22px, 2.6vw, 34px);
  background: var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 980px) {
  .keys {
    grid-template-columns: repeat(4, 1fr);
  }
}
.key {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: clamp(16px, 1.8vw, 22px) clamp(16px, 2vw, 24px);
  background: var(--cream);
}
.key__v {
  font-family: var(--display);
  font-size: clamp(1.25rem, 5.2vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--rose);
  font-variant-numeric: lining-nums tabular-nums;
}
.key__k {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.4;
  max-width: 22ch;
}
@media (min-width: 620px) {
  .key__k {
    font-size: 0.875rem;
  }
}

/* 11 Leiter (Monis Vorher/Nachher) ---------------------------------------- */

.ladder {
  display: grid;
  gap: 16px;
}
@media (min-width: 760px) {
  .ladder {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(16px, 3vw, 36px);
  }
}
.rung {
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--sh);
}
.rung--then {
  background: transparent;
  border: 1.5px dashed var(--hair);
  box-shadow: none;
}
.rung__k {
  display: block;
  margin-bottom: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mut);
}
.rung__b {
  margin-top: 12px;
  font-size: 0.9375rem;
  color: var(--fg-mut);
  max-width: 34ch;
}
.rung--then .big {
  color: var(--fg-mut);
}
.arrowy {
  display: grid;
  place-items: center;
  color: var(--rose);
}
.arrowy .i {
  width: 30px;
  height: 30px;
  transform: rotate(90deg);
}
@media (min-width: 760px) {
  .arrowy .i {
    transform: none;
  }
}

/* Untereinander liest man erst 1.800 Euro, scrollt, und liest dann ab 300
   Euro. Der Vergleich entsteht dabei aus dem Gedaechtnis. Nebeneinander
   entsteht er sofort, und genau darum geht es in diesem Abschnitt.
   Der Pfeil bleibt und dreht sich auf waagerecht mit. */
@media (max-width: 759px) {
  .ladder {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
  }
  .rung {
    padding: 16px 14px 18px;
  }
  .ladder .big {
    font-size: clamp(1.5rem, 7vw, 2.2rem);
  }
  .rung__k {
    margin-bottom: 8px;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
  }
  .rung__b {
    margin-top: 8px;
    font-size: 0.8125rem;
    line-height: 1.45;
  }
  .arrowy .i {
    width: 22px;
    height: 22px;
    transform: none;
  }
}

/* 12 Geld ----------------------------------------------------------------- */

.money {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}
@media (min-width: 940px) {
  .money {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
  }
}
/* Auf dem Handy steht das Laptop-Foto zwischen der Rechnung und der
   Monatstreppe und trennt genau die beiden Dinge, die zusammengehoeren:
   was ein Gespraech bringt und was daraus im Monat wird. Es traegt dort
   nichts bei, was der Text nicht schon sagt.
   Es bleibt lazy, liegt also nie im Sichtfeld und wird gar nicht geladen. */
@media (max-width: 939px) {
  .money > .frame {
    display: none;
  }
}

.sum {
  display: grid;
  gap: 14px;
}
.sum__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  padding: 18px 22px;
  border-radius: var(--r-sm);
  background: var(--card);
}
.sum__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}
.sum__d {
  grid-column: 2;
  font-size: 0.875rem;
  color: var(--fg-mut);
}
.sum__v {
  grid-row: span 2;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.sum__row--out {
  background: var(--ink);
  color: var(--on-dark);
  --fg-mut: var(--on-dark-mut);
}
.sum__row--out .sum__v {
  color: var(--rose-hi);
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.sum__row--out .ic {
  background: rgba(251, 237, 236, 0.12);
  color: var(--rose-hi);
}

/* Monatstreppe */
.months {
  display: grid;
  gap: 12px;
}
@media (min-width: 820px) {
  .months {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.month {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--sh);
}
.month--goal {
  background: var(--rose);
  color: var(--white);
  --fg-mut: rgba(255, 255, 255, 0.84);
}
.month--goal .big {
  color: var(--white);
}
.month__k {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mut);
}
.month__b {
  font-size: 0.9375rem;
  color: var(--fg-mut);
  line-height: 1.5;
}
.month .big {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  letter-spacing: -0.04em;
}


/* 12b Rechner ------------------------------------------------------------- */

/* Das Berechnungsinstrument. Zwei Regler, ein Ergebnis. Beide Achsen bleiben
   in den Grenzen aus PRODUCT.md: 3.000 bis 6.000 Euro Dienstleistung, und
   gerechnet wird mit der unteren Provision von 10 Prozent. */
.calc {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(26px, 3.4vw, 44px);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--sh);
}
/* Mobil steckte hier eine Karte in einer Karte: Seitenrand, Rechnerpolster
   und Ergebnispolster zusammen 140px pro Zeile. Der Button darin hatte bei
   320px noch 180px Platz und brauchte 309px, er war schlicht abgeschnitten.
   Auf dem Handy faellt der Rahmen deshalb weg, die Regler stehen direkt auf
   dem Untergrund und das Ergebnis ist die einzige Karte. */
@media (max-width: 767px) {
  .calc {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    gap: 26px;
  }
}
@media (min-width: 900px) {
  .calc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: clamp(36px, 4vw, 60px);
    align-items: center;
  }
}

.dials {
  display: grid;
  gap: clamp(22px, 2.6vw, 32px);
}
.dial__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.dial__l {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.018em;
}
.dial__v {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.026em;
  color: var(--rose);
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Der Regler. Die gefüllte Spur läuft über --fill, das JS setzt, damit kein
   zweites Element dafür nötig ist. */
.dial input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 34px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.dial input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(
    to right,
    var(--rose) 0 var(--fill, 50%),
    var(--rose-tint) var(--fill, 50%) 100%
  );
}
.dial input[type="range"]::-moz-range-track {
  height: 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(
    to right,
    var(--rose) 0 var(--fill, 50%),
    var(--rose-tint) var(--fill, 50%) 100%
  );
}
.dial input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -10px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 3px solid var(--rose);
  box-shadow: 0 4px 12px -4px rgba(42, 21, 41, 0.4);
  transition: transform 140ms var(--ease);
}
.dial input[type="range"]::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 3px solid var(--rose);
  box-shadow: 0 4px 12px -4px rgba(42, 21, 41, 0.4);
}
.dial input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.12);
}
.dial input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2.5px solid var(--rose);
  outline-offset: 3px;
}
.dial__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--fg-mut);
}

.result {
  display: grid;
  gap: 8px;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r);
  background: var(--ink);
  color: var(--on-dark);
  text-align: center;
}
.result__k {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-mut);
}
.result__v {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--rose-hi);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.result__b {
  margin-top: 6px;
  font-size: 0.9375rem;
  color: var(--on-dark-mut);
  line-height: 1.5;
}
.result .cta {
  margin-top: 14px;
  width: 100%;
}
@media (max-width: 479px) {
  .result {
    padding: 24px 18px 22px;
  }
}


/* 13 Ablauf --------------------------------------------------------------- */

.how {
  display: grid;
  /* Die Schritt-Spur bricht mobil per negativem Rand aus dem Seitenrand aus.
     Ein Block schluckt das, eine Rasterspalte nicht: sie misst die Randbox
     ihres Kindes mit und waechst um die 40px mit. minmax(0, 1fr) deckelt
     die Spalte auf die Behaelterbreite. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 4vw, 56px);
}
@media (min-width: 940px) {
  .how {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 76px);
    align-items: center;
  }
}
.steps {
  display: grid;
  gap: 14px;
  counter-reset: s;
}
.stepp {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 3px 16px;
  padding: 20px 22px;
  border-radius: var(--r-sm);
  background: var(--card);
}
.stepp__n {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--rose);
  color: var(--white);
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
}
.stepp__t {
  align-self: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}
.stepp__b {
  grid-column: 2;
  font-size: 0.9375rem;
  color: var(--fg-mut);
  line-height: 1.5;
}

/* Freisteller auf rundem Farbfeld */
.stage {
  position: relative;
  border-radius: var(--r);
  background: var(--rose-tint);
  display: grid;
  place-items: end center;
  padding-top: clamp(24px, 3vw, 40px);
  overflow: clip;
  isolation: isolate;
}
.stage img {
  width: min(100%, 400px);
  display: block;
}
/* Die Freisteller stammen von einem hellgrauen Studio-Hintergrund. Ihre
   halbtransparenten Randpixel tragen dessen Helligkeit mit (Median 133 von
   255). Auf einer dunklen Flaeche wird daraus ein sichtbarer Halo um Haare
   und Schultern. Deshalb steht der Freisteller auch innerhalb der dunklen
   Sektion auf einem hellen Feld. */
.stage--spot {
  background: var(--rose-tint);
}

/* Mobil verschlangen diese Felder bis zu 72 Prozent des Bildschirms, ein
   ganzer Daumenwisch nur Foto. Jetzt sind sie flache Baender: Moni bleibt
   gross und nah, wird aber an der Huefte vom Feldrand beschnitten. Sie lehnt
   dadurch von oben in den Abschnitt herein, statt als ganze Figur in der
   Mitte zu schweben. Kopf und Haende bleiben immer sichtbar, weil das Feld
   von oben misst. */
@media (max-width: 899px) {
  .stage {
    height: clamp(240px, 31svh, 300px);
    place-items: start center;
    /* Etwas Luft oben: bei der Jubel-Aufnahme stossen die Fingerspitzen sonst
       exakt an die Oberkante und sehen abgeschnitten aus. */
    padding-top: 14px;
  }
  .stage img {
    width: auto;
    max-width: none;
    height: clamp(300px, 40svh, 380px);
  }
}

/* Gerahmtes Foto */
.frame {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--blush);
  box-shadow: var(--sh);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame--tall {
  aspect-ratio: 4 / 5;
}
/* Hochformat ueber die volle Breite ist auf dem Handy ein halber Bildschirm
   Foto. Als Querband bleibt das Bild da, kostet aber die Haelfte. Der
   Bildausschnitt sitzt bewusst hoch: auf beiden Fotos steht Monis Gesicht
   im oberen Drittel, mittig zentriert waere es abgeschnitten. */
@media (max-width: 899px) {
  .frame--tall {
    aspect-ratio: 16 / 10;
  }
  .frame--tall img {
    object-position: 50% 16%;
  }
}

/* 14 Was du brauchst ------------------------------------------------------ */

/* Vier kurze Karten mit je einer Zahl und zwei Zeilen. Untereinander waren
   das vier volle Bildschirmhoehen fuer vier Woerter. Zwei pro Reihe ab der
   kleinsten Breite. */
.needs {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 620px) {
  .needs {
    gap: 14px;
  }
}
@media (min-width: 1000px) {
  .needs {
    grid-template-columns: repeat(4, 1fr);
  }
}
.need {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: clamp(22px, 2.4vw, 28px);
  border-radius: var(--r);
  background: var(--card);
}
.need__v {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--rose);
}
.need__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.018em;
}
.need__b {
  font-size: 0.9375rem;
  color: var(--fg-mut);
  line-height: 1.45;
}
/* Zwei Karten nebeneinander lassen je rund 165px Textbreite. Jedes Pixel
   Innenabstand kostet dort eine Silbe, deshalb enger und etwas kleiner.
   subgrid haelt Zahl, Titel und Text im Paar auf einer Linie. */
@media (max-width: 619px) {
  .need {
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: 6px;
    padding: 18px 15px 20px;
  }
  .need__b {
    font-size: 0.8125rem;
    line-height: 1.45;
  }
  .need__t {
    font-size: 0.9375rem;
  }
}

/* 15 Freiheit ------------------------------------------------------------- */

.free {
  display: grid;
  gap: clamp(30px, 4vw, 52px);
  align-items: center;
}
@media (min-width: 900px) {
  .free {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 72px);
  }
}
.wins {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}
.win {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 3px 14px;
}
.win > .i {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--rose);
}
.on-ink .win > .i {
  color: var(--rose-hi);
}
.win__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  line-height: 1.32;
}
.win__b {
  grid-column: 2;
  font-size: 0.9375rem;
  color: var(--fg-mut);
  line-height: 1.5;
}
/* Vier kurze Gewinne, jeder zwei Zeilen lang. Nebeneinander liest sich das
   als Aufzaehlung, untereinander als langer Schacht.

   subgrid richtet Symbol-, Titel- und Textzeile ueber das Paar hinweg aus.
   Ohne das beginnt der Flietext links und rechts auf verschiedener Hoehe,
   weil "Von ueberall" einzeilig ist und "Deine Zeit gehoert wieder dir"
   dreizeilig. Das las sich als Versatz, nicht als Paar. */
@media (max-width: 759px) {
  .wins {
    grid-template-columns: 1fr 1fr;
    gap: 22px 16px;
  }
  .win {
    grid-row: span 3;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
  /* Die Anonymitaet ist der Kern des Angebots und steht deshalb allein oben,
     nicht als eine von vier gleich grossen Kacheln. */
  .win--wide {
    grid-column: 1 / -1;
  }
  .win > .i {
    margin-top: 0;
  }
  .win__b {
    grid-column: 1;
    font-size: 0.875rem;
  }
  .win__t {
    font-size: 1rem;
  }
}

/* 16 Einwände ------------------------------------------------------------- */

.qs {
  display: grid;
  gap: clamp(28px, 3.4vw, 44px) clamp(28px, 4vw, 56px);
}
@media (min-width: 860px) {
  .qs {
    grid-template-columns: 1fr 1fr;
  }
}
/* Jeder Einwand ist ein kleiner Dialog. Damit auf einen Blick klar ist, wer
   spricht, tragen beide Seiten drei Signale: gegenueberliegende Ausrichtung,
   eigene Blasenfarbe und eine benannte Zeile darueber. Nur eine Blase links
   und eine rechts reicht nicht, das liest sich als zwei Absaetze. */
/* Jedes Paar steht auf einer eigenen Karte. Ohne sie standen auf dem Desktop
   sechs Dialoge in zwei Spalten frei nebeneinander, und beim Ueberfliegen war
   nicht zu erkennen, welche Antwort zu welcher Frage gehoert.

   Ein blosser Rahmen reichte nicht: --hair auf Creme ergibt 1,1:1, das sieht
   man erst, wenn man danach sucht. Eine weisse Flaeche auf dem cremefarbenen
   Grund trennt sofort. Dafuer muss die Antwortblase die Farbe wechseln, sonst
   verschwindet Weiss auf Weiss. */
.q {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(18px, 1.8vw, 26px);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--sh);
}

.q__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mut);
}
.q__tag--moni {
  color: var(--rose);
}
.q__who {
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  object-fit: cover;
}

/* Die Besucherin spricht rechts, wie in jedem Messenger die eigene Seite. */
.q__you {
  display: grid;
  justify-items: end;
  gap: 7px;
}
.q__ask {
  max-width: 94%;
  padding: 14px 20px 15px;
  border-radius: 20px 20px 6px 20px;
  background: var(--blush);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.018em;
  line-height: 1.36;
  text-align: right;
}
.on-blush .q__ask,
.on-rose .q__ask {
  background: var(--white);
}

/* In der Wisch-Spur liegen die Dialoge nebeneinander. Eine einzeilige Frage
   neben einer zweizeiligen laesst die angeschnittene Nachbarkarte versetzt
   erscheinen, als waere sie verrutscht. Zwei Zeilen Mindesthoehe halten alle
   Antworten auf einer Linie. */
@media (max-width: 759px) {
  .qs[data-swipe] .q__ask {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: calc(2 * 1.36em + 29px);
  }
}

/* Moni antwortet links. */
.q__moni {
  display: grid;
  justify-items: start;
  gap: 7px;
}
.q__a {
  max-width: 96%;
  padding: 15px 20px 16px;
  border-radius: 20px 20px 20px 6px;
  /* Cremefarben statt weiss: die Blase liegt jetzt auf einer weissen Karte. */
  background: var(--cream);
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.q__a strong {
  color: var(--ink);
  font-weight: 600;
}

/* 17 Moni ----------------------------------------------------------------- */

.who {
  display: grid;
  gap: clamp(30px, 4vw, 56px);
}
@media (min-width: 900px) {
  .who {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 68px);
    align-items: start;
  }
}
.facts {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}
@media (min-width: 520px) {
  .facts {
    grid-template-columns: 1fr 1fr;
  }
}
/* Auf dem Handy stehen diese vier Zahlen zwischen Monis Text und ihrem Zitat
   und schieben beides auseinander. Drei der vier Angaben stehen ohnehin schon
   weiter oben auf der Seite. Auf dem Desktop fuellen sie die Spalte neben dem
   Portrait und bleiben deshalb dort. */
@media (max-width: 899px) {
  .facts {
    display: none;
  }
}
.fact {
  padding: 16px 18px;
  border-radius: var(--r-sm);
  background: var(--card);
}
.fact__v {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--rose);
}
.fact__k {
  margin-top: 2px;
  font-size: 0.875rem;
  color: var(--fg-mut);
  line-height: 1.4;
}

/* Volle Breite unter beiden Spalten. In der schmalen Textspalte stand es
   vorher neben einer leeren Flaeche, weil die Spalte 272px hoeher war als
   das Foto daneben. */
.quote {
  margin: clamp(34px, 4vw, 52px) 0 0;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r);
  background: var(--ink);
  color: var(--on-dark);
}
.quote__q {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.6vw + 0.8rem, 1.7rem);
  line-height: 1.32;
  letter-spacing: -0.026em;
}
.quote__b {
  display: block;
  margin-top: 14px;
  font-family: var(--body);
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--on-dark-mut);
}

/* 18 Plätze --------------------------------------------------------------- */

.fit {
  display: grid;
  gap: 16px;
}
@media (min-width: 760px) {
  .fit {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 759px) {
  /* Ohne Fuellung verschwaende die zweite Karte auf dem cremefarbenen Grund,
     und ein halb angeschnittener unsichtbarer Block wirkt wie ein Fehler. */
  .fitcard--no {
    background: var(--white);
    border-color: var(--line);
  }
}
.fitcard {
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--r);
  background: var(--card);
}
.fitcard--no {
  background: transparent;
  border: 1.5px solid var(--hair);
}
.fitcard__k {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.fitcard__k .i {
  width: 18px;
  height: 18px;
}
.fitcard--yes .fitcard__k {
  color: var(--rose);
}
.fitcard--no .fitcard__k {
  color: var(--fg-mut);
}
.fitlist {
  display: grid;
  gap: 12px;
}
.fitlist li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  font-size: 1rem;
  line-height: 1.45;
}
.fitlist .i {
  width: 17px;
  height: 17px;
  margin-top: 5px;
  color: var(--rose);
}
.fitcard--no .fitlist {
  color: var(--fg-mut);
}
.fitcard--no .fitlist .i {
  color: var(--fg-mut);
}


/* Knappheit als kompakter Hinweis im Schlussfeld. Als eigener dunkler Balken
   stapelten sich drei gerundete Bloecke hintereinander, das las sich als
   Kistenstapel statt als Abschluss. */
.only {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 9px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--on-dark);
  font-size: 0.875rem;
  font-weight: 500;
}
.only .i {
  width: 17px;
  height: 17px;
  color: var(--rose-hi);
}
.only strong {
  font-family: var(--display);
  font-weight: 800;
  color: var(--rose-hi);
}

/* 19 Schluss -------------------------------------------------------------- */

/* Liegt als helles Feld auf dunklem Grund. Die Buehnen-Token muessen deshalb
   zurueck auf hell, sonst erbt der Text die Farben der dunklen Sektion. */
.last {
  position: relative;
  --fg: var(--ink);
  --fg-mut: var(--muted);
  --card: var(--white);
  color: var(--ink);
  border-radius: var(--r);
  background: var(--blush);
  padding: clamp(32px, 4vw, 56px) clamp(22px, 3.5vw, 48px) 0;
  overflow: clip;
}
.last__grid {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
}
@media (min-width: 900px) {
  .last__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}
.last__copy {
  display: grid;
  gap: 22px;
  justify-items: start;
  padding-bottom: clamp(32px, 4vw, 56px);
}
.last__moni {
  align-self: end;
  justify-self: center;
  width: min(100%, 380px);
}
/* Gleiche Regel wie bei den Buehnen: lieber nah und beschnitten als klein
   und vollstaendig. */
@media (max-width: 899px) {
  .last__moni {
    width: auto;
    height: clamp(240px, 32svh, 310px);
    overflow: clip;
  }
  .last__moni img {
    width: auto;
    height: clamp(320px, 44svh, 410px);
    margin-inline: auto;
  }
}

/* 20 Footer --------------------------------------------------------------- */

.foot {
  padding-block: clamp(44px, 6vw, 68px) 104px;
  background: var(--ink);
  color: var(--on-dark);
  --logo-body: var(--on-dark);
  --logo-hole: var(--ink);
}
@media (min-width: 681px) {
  .foot {
    padding-bottom: clamp(44px, 6vw, 68px);
  }
}
.foot__in {
  display: grid;
  gap: 28px;
}
@media (min-width: 760px) {
  .foot__in {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 40px;
  }
}
.foot__b {
  margin-top: 16px;
  font-size: 0.875rem;
  color: var(--on-dark-mut);
  max-width: 56ch;
  line-height: 1.55;
}
.foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: -10px 0 -10px -12px;
  font-size: 0.9375rem;
}
.foot__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  color: var(--on-dark-mut);
  text-decoration: none;
}
.foot__nav a span {
  border-bottom: 1px solid transparent;
}
@media (hover: hover) and (pointer: fine) {
  .foot__nav a:hover {
    color: var(--on-dark);
  }
  .foot__nav a:hover span {
    border-bottom-color: currentColor;
  }
}
.foot__bar {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid #472d47;
  font-size: 0.8125rem;
  color: var(--on-dark-mut);
}

/* 20b Anker-Navigation ----------------------------------------------------- */

/* Vier Sprungmarken in der Kopfzeile. Wer die Seite pruefen soll, muss nicht
   erst 10.000px scrollen, um Presse und Antworten zu finden.

   Erst ab 1080px sichtbar: darunter konkurrieren vier Links mit dem Logo und
   dem Button um eine Zeile, und der Button hat Vorrang. Auf dem Handy fuehrt
   ohnehin die Wisch-Leiste unten zum Ziel. */
.jump {
  display: none;
}
@media (min-width: 1080px) {
  .jump {
    display: block;
  }
}
.jump ul {
  display: flex;
  align-items: center;
  gap: 2px;
}
.jump a {
  position: relative;
  display: block;
  padding: 8px 14px 9px;
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 240ms var(--ease), background-color 240ms var(--ease);
}
.jump a:hover {
  color: var(--ink);
}
/* Der gerade gelesene Abschnitt leuchtet mit. JS setzt aria-current, siehe
   main.js: gebunden an ein schmales Band knapp oberhalb der Bildschirmmitte,
   denn dort liest das Auge, nicht an der Oberkante. */
.jump a[aria-current="location"] {
  background: var(--rose-tint);
  color: var(--rose-deep);
}
.jump a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--rose);
  transform: scaleX(0);
  transition: transform 320ms var(--ease);
}
.jump a[aria-current="location"]::after {
  transform: scaleX(1);
}

/* 20c Presse --------------------------------------------------------------- */

/* Zwei echte Artikel, keine erfundenen Logos. Der Verlagsname steht als Text,
   weil fremde Wortmarken ohne Freigabe nichts auf der Seite verloren haben. */
.press {
  display: grid;
  gap: 16px;
}
@media (min-width: 820px) {
  .press {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
}
.art {
  display: grid;
  align-content: start;
  gap: 12px;
  overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r);
  background: rgba(251, 237, 236, 0.07);
  border: 1px solid rgba(251, 237, 236, 0.16);
  color: var(--on-dark);
  text-decoration: none;
  transition: background-color 260ms var(--ease), border-color 260ms var(--ease),
    transform 260ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .art:hover {
    background: rgba(251, 237, 236, 0.11);
    border-color: rgba(251, 237, 236, 0.3);
    transform: translateY(-3px);
  }
  .art:hover .art__go .i {
    transform: translate(3px, -3px);
  }
}
.art:active {
  transform: scale(0.99);
}
/* Bildschirmfoto des Artikels. Oben angeschnitten, damit Zeitungskopf,
   Kennzeichnung und Ueberschrift sicher im Bild sind: das sind die drei
   Dinge, die den Beleg ausmachen. */
.art__shot {
  display: block;
  margin: calc(-1 * clamp(24px, 3vw, 34px)) calc(-1 * clamp(24px, 3vw, 34px)) 6px;
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 16 / 10;
}
.art__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.art__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.art__pub {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose-hi);
}
/* Beide Beitraege sind von den Redaktionen als bezahlte Platzierung
   gekennzeichnet. Wer das auf der eigenen Seite weglaesst, verliert genau bei
   dem Leser, den dieser Abschnitt ueberzeugen soll. */
.art__ad {
  padding: 3px 9px 4px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(251, 237, 236, 0.28);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-mut);
}
.art__t {
  font-family: var(--display);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.28;
}
.art__q {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--on-dark-mut);
}
.art__go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--on-dark);
}
.art__go .i {
  width: 16px;
  height: 16px;
  transition: transform 240ms var(--ease);
}
/* Drei weitere Beitraege ohne Bildschirmfoto: Focus und Chip erlauben ihre
   Marke nur ueber den eigenen Badge-Code, ein Foto des Artikelkopfs waere ein
   Logo auf unserem Server. Deshalb kompakte Textkarten in einer Reihe. */
.press--kurz {
  margin-top: 16px;
}
@media (min-width: 820px) {
  .press--kurz {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 22px;
  }
}
.art--kurz .art__t {
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
}
.art--kurz .art__go {
  margin-top: auto;
  padding-top: 4px;
}
.art--kurz {
  align-content: stretch;
  grid-template-rows: auto auto 1fr auto;
}

/* Medienpartner-Badges von Focus und Chip. Markup exakt aus dem Code der
   Verlage, das Bild kommt von deren Server; hier wird nur die Groesse gesetzt. */
.head--presse {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
}
.badges {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.badges a {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 240ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .badges a:hover {
    transform: translateY(-3px);
  }
}
.badges img {
  display: block;
  width: clamp(88px, 9vw, 112px);
  height: auto;
}
.say--fein {
  margin-top: clamp(20px, 2.4vw, 28px);
  font-size: 0.875rem;
  max-width: 62ch;
}

/* 21 Sticky --------------------------------------------------------------- */

/* Der Balken hinter dem Button war eine zweite Flaeche ueber der Seite und
   hat sie optisch abgeschnitten. Jetzt schwebt allein der Button. Damit er
   ueber wechselndem Untergrund lesbar bleibt, traegt er einen kraeftigeren
   Schatten statt eines Hintergrunds. */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  padding: 0 var(--gut) calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;
  transform: translateY(130%);
  transition: transform 320ms var(--ease);
}
.dock.is-up {
  transform: none;
}
.dock .cta {
  width: 100%;
  min-height: 54px;
  pointer-events: auto;
  box-shadow: 0 10px 28px -8px rgba(42, 21, 41, 0.42),
    0 3px 10px -3px rgba(42, 21, 41, 0.3);
}
@media (min-width: 681px) {
  .dock {
    display: none;
  }
}

/* 22 Modal ---------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--ease), visibility 220ms;
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
}
.modal__bd {
  position: absolute;
  inset: 0;
  background: rgba(42, 21, 41, 0.58);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.modal__box {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 28px 24px 30px;
  border-radius: var(--r);
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--sh-lift);
  /* Modals skalieren aus der Mitte: sie hängen an keinem Trigger. */
  transform: scale(0.96);
  transition: transform 220ms var(--ease);
}
.modal.is-open .modal__box {
  transform: scale(1);
}
.modal__x {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: transform 160ms var(--ease), color 160ms ease;
}
.modal__x .i {
  width: 18px;
  height: 18px;
}
@media (hover: hover) and (pointer: fine) {
  .modal__x:hover {
    color: var(--ink);
  }
}
.modal__x:active {
  transform: scale(0.94);
}
.modal__h {
  max-width: 28ch;
  padding-right: 36px;
}
.modal__h .say {
  margin-top: 10px;
  font-size: 0.9375rem;
}
body.is-locked {
  overflow: hidden;
}

.form {
  display: grid;
  /* minmax(0, 1fr): sonst zieht die intrinsische Mindestbreite des
     Telefonfelds die Spalte über den Dialog hinaus. */
  grid-template-columns: minmax(0, 1fr);
  gap: 15px;
  margin-top: 24px;
}
.f {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}
.f > label {
  font-size: 0.875rem;
  font-weight: 600;
}
.f input,
.f select {
  min-height: 54px;
  min-width: 0;
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: 1.0625rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.f input::placeholder {
  color: #9a8892;
}
.f input:focus,
.f select:focus {
  outline: 0;
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(190, 43, 80, 0.14);
}
.f__tel {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  gap: 9px;
}
/* Eigener Pfeil statt dem nativen: der native nahm je nach Browser so viel
   Platz, dass "DE +49" in 104px angeschnitten wurde. */
.f__tel input {
  padding-left: 13px;
  padding-right: 13px;
}
.f__tel select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 27px;
  padding-left: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232a1529' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px 8px;
  color: var(--ink);
  cursor: pointer;
}
.f__err {
  display: none;
  font-size: 0.875rem;
  color: var(--rose);
}
.f.bad input {
  border-color: var(--rose);
}
.f.bad .f__err {
  display: block;
}

.tick {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.45;
  cursor: pointer;
}
.tick input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--rose);
  cursor: pointer;
}
.tick a {
  color: var(--rose);
}
.form__fine {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.form__fine .i {
  width: 15px;
  height: 15px;
  flex: none;
}

/* 23 Funnel --------------------------------------------------------------- */

.fun {
  padding-block: clamp(30px, 5vw, 60px) clamp(56px, 8vw, 100px);
}
.fun__h {
  max-width: 30ch;
  margin-bottom: clamp(26px, 3.5vw, 40px);
}
.fun__h .say {
  margin-top: 14px;
}

.trail {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.trail__d {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--line);
  flex: none;
}
.trail__d.on {
  background: var(--rose);
}

.vid {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 800px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--sh);
}
.vid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vid iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.vid__b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 14px;
  align-content: center;
  border: 0;
  background: linear-gradient(to top, rgba(42, 21, 41, 0.62), rgba(42, 21, 41, 0.14));
  color: var(--on-dark);
  cursor: pointer;
}
.vid__p {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: var(--r-pill);
  background: var(--rose);
  color: var(--white);
  transition: transform 220ms var(--ease);
}
.vid__p .i {
  width: 28px;
  height: 28px;
  margin-left: 3px;
}
.vid__l {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 24ch;
  text-align: center;
  padding-inline: 20px;
}
@media (hover: hover) and (pointer: fine) {
  .vid__b:hover .vid__p {
    transform: scale(1.06);
  }
}
.vid__b:active .vid__p {
  transform: scale(0.97);
}
.vid.is-wait .vid__l {
  display: none;
}
.vid__wait {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 18px;
  background: rgba(42, 21, 41, 0.92);
  color: var(--on-dark-mut);
  font-size: 0.875rem;
  text-align: center;
}

/* Buchungsseite: Text links, Kalender rechts. Auf Mobile bleibt praktisch nur
   der Kalender stehen, alles andere waere dort nur Weg zum Ziel. */
.book {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}
@media (min-width: 1000px) {
  .book {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
    gap: clamp(36px, 4vw, 64px);
    align-items: start;
  }
}
.book__copy {
  display: grid;
  gap: 18px;
  align-content: start;
}
.book__copy .prep {
  margin-top: clamp(10px, 1.6vw, 18px);
}
@media (max-width: 999px) {
  /* Die Vorbereitungspunkte stehen unter dem Kalender im Weg. Wer hier ist,
     will buchen. */
  .book__copy .prep {
    display: none;
  }
  .book__copy {
    gap: 14px;
  }
}

.cal {
  max-width: 800px;
}
.cal__box {
  min-width: 320px;
  height: 1000px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--sh);
}
@media (max-width: 779px) {
  .cal__box {
    height: 1130px;
  }
}
/* Calendlys Widget besteht auf 320px Mindestbreite. Auf einem 320px breiten
   Geraet bleiben nach den Seitenraendern nur 280px, das Raster wurde dadurch
   40px zu breit und der Inhalt links abgeschnitten. Unter 360px darf der
   Kalender deshalb aus dem Seitenrand ausbrechen und die volle Breite nehmen. */
@media (max-width: 359px) {
  .book__cal {
    margin-inline: calc(-1 * var(--gut));
  }
  .cal__box {
    border-radius: 0;
  }
  .cal__fb {
    padding-inline: var(--gut);
  }
}
.cal__load {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--muted);
  font-size: 0.9375rem;
}
.cal__fb {
  margin-top: 14px;
  font-size: 0.875rem;
  color: var(--muted);
}
.cal__fb a {
  color: var(--rose);
}

.slot {
  display: grid;
  gap: 18px;
  max-width: 540px;
  padding: 26px;
  border-radius: var(--r);
  background: var(--white);
  box-shadow: var(--sh);
}
.slot__rows {
  display: grid;
}
/* Drei Kinder: Symbol, Bezeichnung, Wert. Als Flex mit space-between
   verteilten sie sich unsauber, deshalb ein festes Raster. */
.slot__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}
.slot__row:last-child {
  border-bottom: 0;
}
.slot__k {
  font-size: 0.875rem;
  color: var(--muted);
}
.slot__v {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: right;
}
/* Schmal ist rechtsbuendig zu weit weg vom Label: dort stapeln Bezeichnung
   und Wert untereinander, das Symbol ueberspannt beide Zeilen.
   Diese Query muss NACH .slot__v stehen, sonst gewinnt text-align: right
   ueber die Quellreihenfolge. */
@media (max-width: 479px) {
  .slot__row {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 2px 12px;
  }
  .slot__row .ic {
    grid-row: span 2;
    width: 38px;
    height: 38px;
  }
  .slot__v {
    grid-column: 2;
    text-align: left;
  }
}
.slot__act {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.slot__act .cta {
  min-height: 48px;
  padding: 12px 20px;
  font-size: 0.9375rem;
}

.prep {
  display: grid;
  gap: 18px;
  margin-top: clamp(34px, 5vw, 56px);
  max-width: 620px;
}

/* 24 Recht ---------------------------------------------------------------- */

.legal {
  padding-block: clamp(34px, 5vw, 64px) clamp(56px, 8vw, 96px);
}
.legal__in {
  max-width: 68ch;
}
.legal h1 {
  font-size: clamp(2rem, 3vw + 1rem, 2.8rem);
}
.legal h2 {
  margin-top: 2.2em;
  font-size: 1.3rem;
}
.legal h3 {
  margin-top: 1.6em;
  font-size: 1.0625rem;
  font-family: var(--display);
  font-weight: 700;
}
.legal p,
.legal ul {
  margin-top: 0.9em;
  color: var(--ink-2);
}
.legal ul {
  display: grid;
  gap: 0.5em;
  padding-left: 1.1em;
  list-style: disc;
}
.legal a {
  color: var(--rose);
}
.legal__note {
  margin-top: 0.6em;
  font-size: 0.875rem;
  color: var(--muted);
}
.todo {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--rose-tint);
  color: var(--rose-deep);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* 24b Wisch-Spuren -------------------------------------------------------- */

/* Eine Komponente fuer alle waagerechten Spuren auf dem Handy.

   Der Grund: untereinander gestapelte Karten sind auf einem Telefon eine
   endlose Folge gleich aussehender Bloecke. Vier Schritte, sechs Einwaende
   und drei Monate hintereinander lesen sich als Liste, nicht als Inhalt, und
   die Seite wird dadurch doppelt so lang wie noetig.

   Waagerecht gewischt liegt immer eine Karte gross vor einem, die naechste
   lugt am Rand hervor und sagt ohne Worte, dass es weitergeht. Genau dieses
   Muster kennt der Kunde von reisezurfreiheit.

   Der Behaelter bricht bewusst aus dem Seitenrand aus: sonst begaenne die
   erste Karte eingerueckt und die letzte endete zu frueh, und der Wisch
   fuehlte sich an, als staende er an einer Wand. */
@media (max-width: 759px) {
  [data-swipe] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--swipe-w, min(84%, 330px));
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gut));
    /* overflow-x: auto macht die Spur auch senkrecht zum Scroll-Behaelter und
       schneidet den Kartenschatten oben und unten ab. Das Polster schafft ihm
       Raum, der negative Aussenabstand haelt den Abstand zu den Punkten
       unveraendert. */
    padding: 14px var(--gut) 22px;
    margin-block: -10px -16px;
    /* Der Fokusrahmen der Tastaturbedienung darf nicht am Rand kleben. */
    scroll-padding-inline: var(--gut);
  }
  [data-swipe]::-webkit-scrollbar {
    display: none;
  }
  [data-swipe] > * {
    scroll-snap-align: center;
  }
  /* Die Spur ist per Tastatur bedienbar und bekommt dafuer einen sichtbaren
     Fokus. Ohne das waere der Inhalt rechts nur mit der Hand erreichbar. */
  [data-swipe]:focus-visible {
    outline: 2px solid var(--rose);
    outline-offset: 3px;
    border-radius: var(--r-sm);
  }

  /* Karten einer Spur muessen gleich hoch sein, sonst wackelt die Hoehe beim
     Wischen und der Text darunter springt. */
  [data-swipe] > .month,
  [data-swipe] > .stepp,
  [data-swipe] > .fitcard,
  [data-swipe] > .q {
    height: 100%;
  }

  /* Breitere Spur fuer die Dialoge: ein Einwand traegt Frage UND Antwort,
     bei 84 Prozent wuerde er zu hoch. */
  .qs[data-swipe] {
    --swipe-w: min(88%, 360px);
  }
  .months[data-swipe] {
    --swipe-w: min(78%, 300px);
  }
}

/* Punkte unter der Spur. Sie sagen, wie viele Karten es gibt und wo man
   steht. JS legt sie an und setzt .is-on, siehe main.js. */
.swipedots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
@media (max-width: 759px) {
  .swipedots {
    display: flex;
  }
}
.swipedots span {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--hair);
  transition: background-color 220ms var(--ease), width 220ms var(--ease);
}
.swipedots span.is-on {
  width: 22px;
  background: var(--rose);
}
/* Auf dunklem Grund traegt die Bahn zu wenig Kontrast. */
.on-ink .swipedots span {
  background: rgba(251, 237, 236, 0.28);
}
.on-ink .swipedots span.is-on {
  background: var(--rose-hi);
}

/* 25 Motion --------------------------------------------------------------- */

/* Inhalt ist sichtbar, solange JS und Motion nicht beide bereitstehen. */
.js.motion [data-rise],
.js.motion [data-swipe],
.js.motion [data-rise-kids] > * {
  opacity: 0;
}
/* Die Aufhebung MUSS mindestens so schwer wiegen wie die Verdeckung darueber,
   sonst haengt alles an GSAPs Inline-Stil. Genau daran sind mobil die
   Einwand-Dialoge haengen geblieben: dort animiert GSAP seit der Umstellung
   die Kinder der Blase statt der Blase selbst, die Blase bekam also nie einen
   Inline-Wert und blieb fuer immer auf 0. Verdeckung und Aufhebung gehoeren
   auf dieselbe Spezifitaet. */
.js.motion.ready [data-rise],
.js.motion.ready [data-swipe],
.js.motion.ready [data-rise-kids] > * {
  opacity: 1;
}
.w {
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}