:root {
  --fm-bg: #f5f1e8;
  --fm-paper: #fffdf8;
  --fm-ink: #191817;
  --fm-ink-soft: #4f4a45;
  --fm-ink-muted: #69635d;
  --fm-sage: #a8b89a;
  --fm-sage-deep: #536348;
  --fm-sage-soft: #d8e0ce;
  --fm-burgundy: #3e2230;
  --fm-burgundy-deep: #2e1823;
  --fm-burgundy-soft: #e8dde2;
  --fm-taupe: #c9b8b0;
  --fm-amber: #c58d2e;
  --fm-line: rgb(25 24 23 / 14%);
  --fm-line-strong: rgb(25 24 23 / 30%);
  --fm-max: 77.5rem;
  --fm-pad: clamp(1.25rem, 4vw, 4rem);
  --fm-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--fm-bg);
  color: var(--fm-ink);
  font-family: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

p {
  margin: 0;
  text-wrap: pretty;
}

h1,
h2,
h3,
blockquote {
  margin: 0;
  font-family: "Gabarito", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  text-wrap: balance;
}

:focus-visible {
  outline: 0.1875rem solid var(--fm-amber);
  outline-offset: 0.25rem;
}

.skip-link {
  position: fixed;
  z-index: 30;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  transform: translateY(-150%);
  border-radius: 0.5rem;
  background: var(--fm-ink);
  color: white;
  font-weight: 700;
  transition: transform 160ms ease-out;
}

.skip-link:focus {
  transform: translateY(0);
}

.shell {
  width: min(100%, var(--fm-max));
  margin-inline: auto;
  padding-inline: var(--fm-pad);
}

.caps {
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-header {
  position: sticky;
  z-index: 10;
  top: 0;
  border-bottom: 0.0625rem solid var(--fm-line);
  background: rgb(245 241 232 / 96%);
}

.nav {
  min-height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Lockup aus zwei Teilen: echtes App-Icon plus reine Wortmarke. Die Breite
   wird an .brand-text gesteuert, .brand-mark folgt über die Höhe — so bleibt
   das Verhältnis in allen Breakpoints stabil. */
.brand-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.brand-mark {
  width: auto;
  height: 1.75rem;
  border-radius: 0.4375rem;
}

.brand-text {
  width: 9.25rem;
  height: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.625rem);
  font-size: 0.875rem;
  font-weight: 650;
}

.nav-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  color: var(--fm-ink-soft);
}

.nav-link:hover {
  color: var(--fm-ink);
}

.lang-link {
  padding-inline: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.button {
  min-height: 3.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1.5rem;
  border-radius: 0.625rem;
  font-weight: 750;
  line-height: 1;
  transition: transform 180ms var(--fm-ease), background-color 180ms var(--fm-ease), color 180ms var(--fm-ease);
}

.button:hover {
  transform: translateY(-0.125rem);
}

.button:active {
  transform: translateY(0.0625rem);
}

.button-dark {
  background: var(--fm-ink);
  color: white;
}

.button-dark:hover {
  background: #302e2b;
}

.button-primary {
  background: var(--fm-burgundy);
  color: white;
}

.button-primary:hover {
  background: var(--fm-burgundy-deep);
}

.button-sage {
  background: var(--fm-sage);
  color: #1f291b;
}

.button-sage:hover {
  background: #bcc8b1;
}

.text-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  border-bottom: 0.0625rem solid currentColor;
  font-weight: 750;
}

.hero {
  min-height: 47.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(25.625rem, 0.94fr);
  border-bottom: 0.0625rem solid var(--fm-line);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4.5rem, 9vw, 8rem) var(--fm-pad) 4rem max(var(--fm-pad), calc((100vw - var(--fm-max)) / 2 + var(--fm-pad)));
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.875rem;
  color: var(--fm-sage-deep);
  font-weight: 750;
}

.hero-kicker::before {
  width: 2.375rem;
  height: 0.125rem;
  background: currentColor;
  content: "";
}

.hero h1 {
  max-width: 11ch;
  font-size: clamp(3.25rem, 6.5vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
}

.hero-lead {
  max-width: 42ch;
  margin-top: 1.875rem;
  color: var(--fm-ink-soft);
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  line-height: 1.55;
}

.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.125rem;
  margin-top: 2.375rem;
}

.fineprint {
  margin-top: 1.125rem;
  color: var(--fm-ink-muted);
  font-size: 0.8125rem;
  font-weight: 550;
}

/* Notiz und Liste lagen absolut über dem Gerät. Ab etwa 1024 px verdeckte
   die Liste den Kopf des Screenshots (Haushaltsname, Suche, Plus) und lief
   über den Text der Notiz. Beide stehen jetzt in einer eigenen Rasterzeile
   über dem Gerät — der Screenshot bleibt in jeder Breite vollständig. */
.hero-stage {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 1.5rem;
  row-gap: 2.25rem;
  padding: 4.25rem 2.125rem 0;
  border-left: 0.0625rem solid rgb(25 24 23 / 18%);
  background: var(--fm-sage);
}

.hero-stage .phone {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  align-self: end;
}

.stage-note {
  grid-column: 1;
  grid-row: 1;
  width: min(12.5rem, 100%);
  color: #263021;
  font-size: 0.875rem;
  font-weight: 750;
  line-height: 1.35;
}

.stage-note strong {
  display: block;
  margin-bottom: 0.5rem;
  font-family: "Gabarito", system-ui, sans-serif;
  font-size: 2rem;
  line-height: 1;
}

.stage-list {
  grid-column: 2;
  grid-row: 1;
  width: min(15.5rem, 100%);
  transform: rotate(2deg);
  transform-origin: right center;
  border: 0.0625rem solid rgb(25 24 23 / 18%);
  border-radius: 0.75rem;
  background: var(--fm-paper);
}

.stage-list p {
  padding: 0.8125rem 1rem;
  border-bottom: 0.0625rem solid var(--fm-line);
  font-size: 0.8125rem;
  font-weight: 650;
}

.stage-list p:last-child {
  border-bottom: 0;
}

.stage-list b {
  color: var(--fm-burgundy);
}

.phone {
  position: relative;
  z-index: 1;
  width: min(24.375rem, 88%);
  height: 40.625rem;
  overflow: hidden;
  border: 0.625rem solid var(--fm-ink);
  border-bottom: 0;
  border-radius: 3.125rem 3.125rem 0 0;
  background: var(--fm-paper);
  box-shadow: 1.125rem 1.125rem 0 rgb(62 34 48 / 18%);
}

.phone img {
  width: 100%;
}

.proof {
  min-height: 7.125rem;
  display: grid;
  grid-template-columns: 1.3fr 1.2fr 1fr 1fr;
  align-items: stretch;
  border-bottom: 0.0625rem solid var(--fm-line);
}

.proof > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.625rem 1.875rem;
  border-right: 0.0625rem solid var(--fm-line);
}

.proof > div:last-child {
  border-right: 0;
}

.proof strong {
  font-family: "Gabarito", system-ui, sans-serif;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Direktes Kind, sonst greift die Regel auch auf .tnum im <strong> und
   schrumpft die Zahl, die hier die Hauptaussage ist. */
.proof > div > span {
  margin-top: 0.3125rem;
  color: var(--fm-ink-soft);
  font-size: 0.8125rem;
}

.problem {
  min-height: 40rem;
  display: grid;
  grid-template-columns: 38% 62%;
  border-bottom: 0.0625rem solid var(--fm-line);
}

.problem-intro {
  padding: 6rem var(--fm-pad);
  background: var(--fm-burgundy);
  color: #f8eef2;
}

.problem-intro h2,
.chapter-copy h2,
.feature-head h2,
.privacy h2,
.pricing-head h2 {
  margin-top: 1rem;
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.problem-intro h2 {
  max-width: 8ch;
}

.problem-intro p {
  max-width: 34ch;
  margin-top: 1.75rem;
  color: rgb(248 238 242 / 78%);
  font-size: 1.0625rem;
}

.day {
  padding: 4.75rem clamp(2.125rem, 6vw, 5.375rem);
  background: var(--fm-paper);
}

.day-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.day-head h3 {
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  letter-spacing: -0.025em;
}

.day-head span {
  color: var(--fm-ink-soft);
  font-size: 0.875rem;
}

.agenda {
  border-top: 0.0625rem solid var(--fm-ink);
}

.agenda-row {
  min-height: 5.75rem;
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  border-bottom: 0.0625rem solid var(--fm-line);
}

/* tabular-nums gibt jedem Satzzeichen die Ziffernbreite, nicht nur den
   Ziffern. Gemessen in Schibsted Grotesk: ein Punkt wird von 4,48 auf
   10,16 px aufgeblasen, exakt eine Ziffernbreite. Auf Text erzeugt das
   sichtbare Lücken („07 : 30", „Erst-Abonnent : innen", „34 , 99") — und
   ein Tausendertrennzeichen ist genauso betroffen: „1.052" bekommt dieselbe
   Lücke.

   Deshalb gilt: nur auf Ziffernfolgen OHNE Satzzeichen, und nur dort, wo
   Ziffern tatsächlich untereinander ausgerichtet werden müssen. Für einzelne
   Zahlen im Fließtext bringt es nichts und kostet Satzqualität. Aktuell
   braucht keine Stelle der Landing das — die Klasse bleibt als dokumentierte
   Vorlage für echte Zahlenspalten stehen. */
.tnum {
  font-variant-numeric: tabular-nums;
}

.agenda-time {
  color: var(--fm-ink-soft);
}

.agenda-task {
  font-size: 1.125rem;
  font-weight: 750;
}

.agenda-who {
  padding: 0.5rem 0.6875rem;
  border-radius: 0.4375rem;
  background: var(--fm-sage-soft);
  color: #273322;
  font-size: 0.8125rem;
  font-weight: 750;
}

.agenda-who.mama {
  background: var(--fm-burgundy-soft);
  color: var(--fm-burgundy);
}

.agenda-who.kid {
  background: #f2e5c9;
  color: #67470f;
}

.agenda-note {
  max-width: 58ch;
  margin-top: 1.5rem;
  color: var(--fm-ink-soft);
  font-size: 0.875rem;
}

.chapter {
  min-height: 45rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 0.0625rem solid var(--fm-line);
}

.chapter-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4.5rem, 9vw, 7.75rem) var(--fm-pad);
}

.chapter-copy h2 {
  max-width: 10ch;
}

.chapter-copy > p {
  max-width: 42ch;
  margin-top: 1.75rem;
  color: var(--fm-ink-soft);
  font-size: 1.125rem;
}

.plain-list {
  margin: 2.125rem 0 0;
  padding: 0;
  border-top: 0.0625rem solid var(--fm-line);
  list-style: none;
}

.plain-list li {
  display: flex;
  gap: 0.875rem;
  padding: 0.9375rem 0;
  border-bottom: 0.0625rem solid var(--fm-line);
  font-weight: 650;
}

.plain-list li::before {
  color: var(--fm-sage-deep);
  content: "✓";
  font-weight: 800;
}

/* Die Notiz lag vorher absolut über dem Phone und verdeckte den Screenshot
   (im Wechselplan-Kapitel den kompletten Februar). Sie steht jetzt in einer
   eigenen Zeile über dem Gerät — dieselbe Anordnung wie im Hero, und sie
   kann den Beweis, den sie kommentiert, in keiner Breite mehr überlagern. */
.chapter-media {
  position: relative;
  overflow: hidden;
  min-height: 42.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  justify-items: center;
  gap: 1.75rem;
  padding: 4.25rem 2.5rem 0;
  border-left: 0.0625rem solid var(--fm-line);
  background: var(--fm-taupe);
}

.chapter-media.sage {
  background: var(--fm-sage-soft);
}

.chapter-media .phone {
  order: 2;
  width: min(22.5rem, 78%);
  height: 38.125rem;
  box-shadow: -1.125rem 1.125rem 0 rgb(25 24 23 / 10%);
}

.media-caption {
  order: 1;
  justify-self: start;
  width: min(17.5rem, 100%);
  padding: 1rem;
  transform: rotate(-2deg);
  transform-origin: left center;
  border: 0.0625rem solid var(--fm-ink);
  border-radius: 0.625rem;
  background: var(--fm-paper);
  font-size: 0.8125rem;
}

.media-caption b {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.feature-index {
  padding-block: clamp(4.875rem, 10vw, 8.625rem);
  border-bottom: 0.0625rem solid var(--fm-line);
}

.feature-head {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  align-items: end;
  gap: 2.5rem;
  margin-bottom: 4.125rem;
}

.feature-head h2 {
  max-width: 10ch;
  margin-top: 0;
}

.feature-head p {
  max-width: 44ch;
  color: var(--fm-ink-soft);
  font-size: 1.125rem;
}

.feature-table {
  border-top: 0.0625rem solid var(--fm-ink);
}

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: baseline;
  gap: 1.625rem;
  padding-block: 1.375rem;
  border-bottom: 0.0625rem solid var(--fm-line);
}

.feature-row h3 {
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}

.feature-row p {
  color: var(--fm-ink-soft);
}

.quote {
  min-height: 38.75rem;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  border-bottom: 0.0625rem solid var(--fm-line);
  background: var(--fm-sage);
}

.quote-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4.5rem, 9vw, 7.625rem) var(--fm-pad);
}

.quote blockquote {
  max-width: 17ch;
  font-size: clamp(2.5rem, 5.4vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.quote cite {
  margin-top: 1.75rem;
  color: #35402f;
  font-style: normal;
  font-weight: 650;
}

.quote-aside {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 4.5rem 2.75rem;
  border-left: 0.0625rem solid rgb(25 24 23 / 18%);
}

.quote-aside p {
  font-size: 0.9375rem;
}

.quote-aside p + p {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 0.0625rem solid rgb(25 24 23 / 20%);
}

.press {
  padding-block: clamp(3rem, 6vw, 4.75rem);
  border-bottom: 0.0625rem solid var(--fm-line);
  background: var(--fm-paper);
}

.press-inner {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  align-items: start;
  gap: 2.5rem;
}

.press-intro {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.press-brand {
  font-family: "Gabarito", system-ui, sans-serif;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 750;
  letter-spacing: -0.03em;
}

.press-list {
  border-top: 0.0625rem solid var(--fm-ink);
  list-style: none;
}

.press-list li {
  border-bottom: 0.0625rem solid var(--fm-line);
}

/* Direktes Kind, nicht jeder Nachfahre: Der Podcast-Eintrag trägt unter dem
   Titel-Link eine eigene Zeile mit Plattform-Links. Ohne die Einschränkung
   würden die als gestapelte Blöcke mit voller Zeilenhöhe rendern. */
.press-list > li > a {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  padding-block: 1.125rem;
}

/* Sitzt neben dem Titel-Link im selben li, nicht darin: Ein a im a ist kein
   gültiges HTML, und der Browser bricht die Verschachtelung sonst selbst auf. */
.press-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 0.875rem;
  padding-bottom: 1.125rem;
  color: var(--fm-ink-soft);
  font-size: 0.8125rem;
}

.press-links a {
  color: var(--fm-ink);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

.press-title {
  font-size: 1.0625rem;
  font-weight: 750;
}

.press-list a:hover .press-title,
.press-list a:focus-visible .press-title {
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

.press-meta {
  color: var(--fm-ink-soft);
  font-size: 0.8125rem;
}

.privacy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 0.0625rem solid rgb(255 255 255 / 15%);
  background: var(--fm-ink);
  color: white;
}

.privacy-copy {
  padding: clamp(4.75rem, 9vw, 8rem) var(--fm-pad);
}

.privacy h2 {
  max-width: 10ch;
}

.privacy-copy > p {
  max-width: 43ch;
  margin-top: 1.75rem;
  color: rgb(255 255 255 / 70%);
  font-size: 1.125rem;
}

.privacy-facts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.625rem var(--fm-pad);
  border-left: 0.0625rem solid rgb(255 255 255 / 18%);
}

.privacy-fact {
  padding-block: 1.75rem;
  border-bottom: 0.0625rem solid rgb(255 255 255 / 18%);
}

.privacy-fact:last-child {
  border-bottom: 0;
}

.privacy-fact strong {
  display: block;
  font-family: "Gabarito", system-ui, sans-serif;
  font-size: 1.3125rem;
}

.privacy-fact span {
  display: block;
  margin-top: 0.375rem;
  color: rgb(255 255 255 / 64%);
}

.pricing,
.faq {
  padding-block: clamp(5.125rem, 10vw, 8.5rem);
  border-bottom: 0.0625rem solid var(--fm-line);
}

.pricing-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2.5rem;
  margin-bottom: 3.375rem;
}

.pricing-head h2 {
  max-width: 10ch;
  margin-top: 0;
}

.pricing-head p {
  max-width: 36ch;
  color: var(--fm-ink-soft);
}

.price-line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2.5rem;
  padding-block: 2.125rem;
  border-top: 0.0625rem solid var(--fm-ink);
}

.price-line:last-of-type {
  border-bottom: 0.0625rem solid var(--fm-ink);
}

.price-copy h3 {
  font-size: 1.625rem;
}

.price-copy p {
  max-width: 62ch;
  margin-top: 0.5rem;
  color: var(--fm-ink-soft);
}

.price-amount {
  text-align: right;
  font-family: "Gabarito", system-ui, sans-serif;
  font-size: clamp(2.25rem, 4vw, 3.625rem);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

.price-amount small {
  display: block;
  color: var(--fm-ink-soft);
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: normal;
  letter-spacing: 0;
}

.pricing-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.875rem;
  margin-top: 2.125rem;
}

.pricing-foot p {
  max-width: 62ch;
  color: var(--fm-ink-soft);
  font-size: 0.8125rem;
}

.faq-head {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2.5rem;
  margin-bottom: 3.5rem;
}

.faq-head h2 {
  max-width: 10ch;
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.faq-head p {
  max-width: 45ch;
  align-self: end;
  color: var(--fm-ink-soft);
  font-size: 1.125rem;
}

.faq-group + .faq-group {
  margin-top: 3.25rem;
}

.faq-group > .caps {
  display: block;
  margin-bottom: 1rem;
  color: var(--fm-ink-soft);
}

.faq-group .faq-item:first-of-type {
  border-top: 0.0625rem solid var(--fm-ink);
}

.faq-item {
  border-bottom: 0.0625rem solid var(--fm-line);
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem;
  padding-block: 1.375rem;
  cursor: pointer;
  font-family: "Gabarito", system-ui, sans-serif;
  font-size: 1.1875rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  list-style: none;
}

/* Safari zeigt sonst zusätzlich sein eigenes Dreieck neben dem Pluszeichen. */
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--fm-ink-soft);
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-item summary:hover,
.faq-item summary:focus-visible {
  color: var(--fm-burgundy);
}

.faq-item p {
  max-width: 76ch;
  padding-bottom: 1.5rem;
  color: var(--fm-ink-soft);
}

.final {
  min-height: 36.25rem;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  background: var(--fm-burgundy);
  color: white;
}

.final-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(5rem, 10vw, 8.625rem) var(--fm-pad);
}

.final h2 {
  max-width: 12ch;
  font-size: clamp(3.25rem, 6.5vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.final-copy > p {
  max-width: 38ch;
  margin-top: 1.625rem;
  color: rgb(255 255 255 / 74%);
  font-size: 1.125rem;
}

.final-note {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4.375rem 3.25rem;
  border-left: 0.0625rem solid rgb(255 255 255 / 20%);
}

.final-note img {
  width: 4.125rem;
  border-radius: 1rem;
}

.final-note blockquote {
  font-size: 1.75rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.final-note small {
  color: rgb(255 255 255 / 60%);
}

.site-footer {
  background: var(--fm-ink);
  color: white;
}

.footer-inner {
  min-height: 9.375rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.875rem;
}

/* Kein brightness/invert-Filter mehr: der färbte früher die kombinierte
   SVG-Wortmarke weiß und würde das Icon-PNG zu einer weißen Fläche machen.
   Die weiße Wortmarke liegt als eigene Datei vor. */
.footer-inner .brand-mark {
  height: 2rem;
}

.footer-inner .brand-text {
  width: 10.5rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.375rem;
  color: rgb(255 255 255 / 68%);
  font-size: 0.8125rem;
}

.footer-links a:hover {
  color: white;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation: hero-rise 700ms var(--fm-ease) both;
  }

  .hero-copy > *:nth-child(2) {
    animation-delay: 70ms;
  }

  .hero-copy > *:nth-child(3) {
    animation-delay: 140ms;
  }

  .hero-copy > *:nth-child(4) {
    animation-delay: 210ms;
  }

  .hero-stage .phone {
    animation: phone-rise 850ms var(--fm-ease) 100ms both;
  }

  .stage-list {
    animation: note-in 650ms var(--fm-ease) 350ms both;
  }
}

@keyframes hero-rise {
  from { transform: translateY(1.25rem); }
  to { transform: translateY(0); }
}

@keyframes phone-rise {
  from { transform: translateY(2rem); }
  to { transform: translateY(0); }
}

@keyframes note-in {
  from { transform: translateY(1rem) rotate(0deg); }
  to { transform: translateY(0) rotate(2deg); }
}

@media (max-width: 56.25rem) {
  .nav-link:not(.lang-link) {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    min-height: 38.75rem;
    padding-left: var(--fm-pad);
  }

  .hero-stage {
    min-height: 42.5rem;
    border-top: 0.0625rem solid var(--fm-line);
    border-left: 0;
  }

  .proof {
    grid-template-columns: 1fr 1fr;
  }

  .proof > div:nth-child(2) {
    border-right: 0;
  }

  .proof > div:nth-child(-n + 2) {
    border-bottom: 0.0625rem solid var(--fm-line);
  }

  .problem,
  .chapter,
  .quote,
  .privacy,
  .final {
    grid-template-columns: 1fr;
  }

  .problem-intro h2,
  .chapter-copy h2 {
    max-width: 12ch;
  }

  .chapter-media,
  .quote-aside,
  .privacy-facts,
  .final-note {
    border-top: 0.0625rem solid var(--fm-line);
    border-left: 0;
  }

  .chapter-media {
    order: -1;
  }

  .feature-head,
  .faq-head,
  .press-inner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .quote-aside {
    min-height: 18.75rem;
  }

  .final-note {
    min-height: 22.5rem;
  }
}

@media (max-width: 38.75rem) {
  .site-header .shell {
    padding-inline: 1rem;
  }

  .nav {
    min-height: 4.25rem;
  }

  .brand-mark {
    height: 1.5rem;
  }

  .brand-text {
    width: 7.75rem;
  }

  .nav-links {
    gap: 0.5rem;
  }

  .nav-links .button {
    min-height: 2.75rem;
    padding-inline: 0.875rem;
    font-size: 0.8125rem;
  }

  .hero h1 {
    font-size: clamp(3rem, 15vw, 4.375rem);
  }

  .hero-copy {
    min-height: 37.5rem;
  }

  .hero-stage {
    min-height: 38.125rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    row-gap: 1.25rem;
    padding-inline: 1rem;
  }

  .hero-stage .phone {
    grid-row: 3;
  }

  /* Nebeneinander wird unter ~620 px zu eng — deshalb gestapelt. */
  .stage-note {
    grid-column: 1;
    grid-row: 1;
    width: min(15rem, 100%);
  }

  .stage-list {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
    width: min(14.5rem, 100%);
  }

  .phone {
    width: 88%;
    height: 33.75rem;
    border-width: 0.5rem;
    border-radius: 2.625rem 2.625rem 0 0;
  }

  .proof {
    grid-template-columns: 1fr;
  }

  .proof > div {
    border-right: 0;
    border-bottom: 0.0625rem solid var(--fm-line);
  }

  .day-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .agenda-row {
    grid-template-columns: 4rem 1fr;
    gap: 0.75rem;
    padding-block: 0.9375rem;
  }

  .agenda-who {
    grid-column: 2;
    justify-self: start;
  }

  .chapter-media {
    min-height: 37.5rem;
    padding-inline: 1.125rem;
  }

  .chapter-media .phone {
    width: 88%;
    height: 33.75rem;
  }

  .media-caption {
    width: min(16rem, 100%);
  }

  .feature-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.375rem;
  }

  .pricing-head {
    display: block;
  }

  .pricing-head p {
    margin-top: 1.5rem;
  }

  .price-line {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .price-amount {
    text-align: left;
  }

  .pricing-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .faq-item summary {
    font-size: 1.0625rem;
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 2.625rem;
  }
}

/* Auf 320 px (iPhone SE 1. Gen) schoben Wortmarke und CTA die Seite um rund
   16 px seitlich heraus — das erzeugt horizontales Scrollen auf der ganzen
   Seite, nicht nur im Header. */
@media (max-width: 23.75rem) {
  .brand-mark {
    height: 1.375rem;
  }

  .brand-text {
    width: 6.25rem;
  }

  .nav-links {
    gap: 0.375rem;
  }

  .nav-links .button {
    padding-inline: 0.6875rem;
    font-size: 0.75rem;
  }

  /* „Familienalltag" ist bei 15vw breiter als die Spalte und schob den
     Hero seitlich heraus. Trennung als Netz, damit auch längere
     Komposita der Übersetzungen nicht wieder ausbrechen. */
  .hero h1 {
    font-size: clamp(2.25rem, 11.5vw, 3rem);
    hyphens: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}