/* ============================================================
   NAVELLI COACHING — Main Stylesheet
   ============================================================ */

/* --- Reset & base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Custom properties --- */
:root {
  --cream:  hsl(52,  60%, 95%);
  --yellow: hsl(50,  98%, 64%);
  --blue:   hsl(193, 100%, 84%);
  --green:  hsl(76,  70%, 66%);
  --navy:   hsl(212, 44%, 31%);

  /* Added Aug 2026: the Nextlevel pricing card is pink in Nathalie's Canva
     design. Not a change to an existing brand colour — it's a sixth hue her
     layout introduces, and the only place it appears. Sampled #FFBBD8. */
  --pink:   hsl(337, 100%, 87%);

  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Nunito Sans', sans-serif;
  --font-display: 'Acme', sans-serif;

  /* Type scale — one dial for the whole site. Every font-size below is its
     original value multiplied by this, so the hierarchy is untouched and the
     whole scale re-tunes from here.
     1.35 is a by-eye setting, NOT a measurement: it was originally derived
     from her Canva PNG, which turned out to carry no usable dimensions.
     Tune it by looking at the page, never by measuring her image. */
  --type-scale: 1.35;

  /* Chrome (nav, buttons, form controls, footer) scales more gently: the
     header is a fixed 120px and the nav links are nowrap, so overscaling
     these overflows the page rather than wrapping. */
  --type-scale-ui: 1.15;

  --gutter: 80px;

  /* The thin white gap between adjacent cards. Shared so the pain cards and
     the photo row below them read as one continuous grid — same columns,
     same gap horizontally and vertically. */
  --grid-gap: 10px;

  /* Horizontal breathing room for section CONTENT. It belongs on the inner
     wrapper, never on the <section>: the colour bands are full-bleed and a
     padded section would inset them. Keeps the 80px desktop gutter but never
     drops below 1.5rem once --gutter collapses to 0 on mobile. */
  --pad-x: max(1.5rem, var(--gutter));

  /* ONE content width for every section on the page. Sections themselves stay
     full-bleed so the colour bands can reach the edges; the inner wrapper
     carries this width, and centres itself. Before this existed the page had
     seven different widths (1100/1180/1240/1600/uncapped), which is why the
     yellow cards read as narrower than the blue ones. Turn this one number to
     make the whole page wider or narrower.
     Wrappers that carry their own padding use
       calc(var(--content-w) + 2 * var(--pad-x));
     wrappers whose parent section pads them use var(--content-w) directly. */
  --content-w: 1600px;

  /* Fixed header height — the hero cap and the body offset both depend on it. */
  --header-h: 120px;

  /* Logo height inside the header. The links and globe hang from the same
     baseline, so this and --header-h together set where they sit.
     --nav-lift raises the links and globe off that baseline — 0 sits them
     flush with the bottom of the logo, larger values float them higher. */
  --logo-h: 94px;
  --nav-lift: 0.75rem;

  /* Hero proportions.
     --hero-h      the band fills the first screen and no more. Matching the
                   band to the photo's own aspect instead shows the whole
                   picture, but on a wide window that is ~1300px tall — well
                   past the fold — so the band is height-led and the photo
                   gets cropped. .hero-img object-position decides what is
                   lost: kept low so the crop comes off the bottom.
     --hero-box-w  holds the subtitle to a ~40-character measure.
     --photo-band-ratio
                   width ÷ height of the three full-bleed photo bands. The
                   three source photos are all ~1.5:1, so the closer this sits
                   to 1.5 the less of the frame is cropped away. Set by eye —
                   lower it to show more of the picture, raise it for a
                   letterbox. One dial, all three bands. */
  --hero-h: calc(100vh - var(--header-h));
  --hero-box-w: 36rem;
  --photo-band-ratio: 1.6;
}

/* --- Base --- */
body {
  font-family: var(--font-body);
  font-size: calc(1rem * var(--type-scale));
  line-height: 1.7;
  color: var(--navy);
  background: #fff;
  padding-top: var(--header-h);
}

img {
  max-width: 100%;
  height: auto;       /* respect aspect ratio; stops width/height attrs forcing a fixed height */
  display: block;
}

/* ============================================================
   SITE HEADER / NAV
   ============================================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
}

/* Aug 2026: logo moves left, links centre, language toggle right. */
.site-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  /* Her design hangs the links and the globe low, level with the bottom of the
     logo lockup, rather than centring them on the header. Bottom-aligning all
     three and padding by the space the centred logo used to leave below it
     keeps the logo exactly where it was and drops the other two to meet it. */
  align-items: end;
  padding: 0 var(--gutter) calc((var(--header-h) - var(--logo-h)) / 2);
  height: var(--header-h);
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  list-style: none;
  margin-bottom: var(--nav-lift);
}

.nav-links a {
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale-ui));
  font-weight: 400;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;        /* keep multi-word items like "Über mich" on one line */
}

.nav-links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav-logo {
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: var(--logo-h);
  width: auto;
}

.nav-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
}

/* Aug 2026: the "EN" pill became a globe icon in the Canva design. */
.nav-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--navy);
  text-decoration: none;
  padding: 0.35rem;
  border-radius: 5px;
  transition: opacity 0.15s;
}

/* Only the header globe hangs off the logo baseline — the mobile overlay
   reuses the same icon and shouldn't inherit the lift. */
.nav-end > .nav-lang {
  margin-bottom: var(--nav-lift);
}

.nav-lang:hover,
.nav-lang:focus-visible {
  opacity: 0.6;
}

.btn-primary {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: calc(0.875rem * var(--type-scale-ui));
  font-weight: 700;   /* 700 is what the browser already rendered (no 600 file loaded) */
  text-decoration: none;
  border-radius: 5px;
  white-space: nowrap;
  transition: background 0.15s;
}

.btn-primary:hover {
  background: hsl(50, 98%, 56%);
}

/* ============================================================
   HERO
   ============================================================ */

/* Aug 2026: full-bleed photo edge to edge (was inset by the gutter), with a
   single blue box sitting on the left. The green box and the tagline above
   the h1 are both gone from Nathalie's design. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--hero-h);
  overflow: hidden;
  background: var(--cream);
}

/* Full-bleed photo behind everything */
.hero-img-col {
  position: absolute;
  inset: 0;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The band is wider than the photo, so height is always cropped. Keeping
     this low takes the crop off the BOTTOM (losing desk and book) and keeps
     the child's head whole; raising it walks the crop up into the head. */
  object-position: center 20%;
}

.hero-overlay {
  position: relative;
  z-index: 1;
  width: 40%;
  max-width: var(--hero-box-w);
  margin-left: var(--gutter);
}

.hero-blue {
  background: var(--blue);
  padding: 3.5rem 3rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(clamp(2rem, 3.75vw, 4rem) * var(--type-scale));
  line-height: 1.05;
  color: var(--navy);
}

.hero-subtitle {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(1.1rem * var(--type-scale));
  line-height: 1.5;
  color: var(--navy);
}

/* White pill CTA inside the hero box */
.btn-hero {
  margin-top: 0.75rem;
  padding: 0.9rem 2rem;
  background: #fff;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale-ui));
  text-decoration: none;
  border-radius: 999px;
  width: max-content;
  max-width: 100%;      /* long German labels wrap inside instead of overflowing */
  text-align: center;
  transition: background 0.15s, color 0.15s;
}

.btn-hero:hover,
.btn-hero:focus-visible {
  background: var(--navy);
  color: #fff;
}

/* ============================================================
   SHARED — full-bleed colour bands + photo bands (Aug 2026)
   Nathalie's layout sets every section heading in a full-width
   colour band, and separates sections with full-bleed photos.
   ============================================================ */

.band {
  background: var(--blue);
  padding: 1.75rem var(--pad-x);
}

/* Two headings ("Hallo, ich bin Nathalie", "Die häufigsten Fragen") sit in a
   band that only spans part of the width. */
.band--left {
  max-width: 52%;
}

.band-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(2.5rem * var(--type-scale));
  line-height: 1.1;
  color: var(--navy);
  text-align: center;
}

.band--left .band-heading {
  text-align: left;
}

.photo-band {
  overflow: hidden;
  aspect-ratio: var(--photo-band-ratio);
}

.photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Nathalie butts each colour band straight against the photo above it, so the
   section that follows a photo band drops its top padding. Applies to all
   three (Schwerpunkte, Preise, FAQ) rather than being overridden one by one. */
.photo-band + section {
  padding-top: 0;
}

/* ============================================================
   MOBILE NAV OVERLAY
   ============================================================ */

.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--navy);
  padding: 0.25rem;
}

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #fff;
  flex-direction: column;
  padding: 0 2rem 2.5rem;
}

.mobile-nav.is-open {
  display: flex;
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  flex-shrink: 0;
}

.mobile-nav-header img {
  height: 70px;
  width: auto;
}

.mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: none;
  border: 1.5px solid var(--navy);
  cursor: pointer;
  color: var(--navy);
}

.mobile-nav-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  list-style: none;
}

.mobile-nav-links a {
  font-family: var(--font-heading);
  font-size: calc(1.75rem * var(--type-scale-ui));
  font-weight: 300;
  color: var(--navy);
  text-decoration: none;
}

.mobile-nav-links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mobile-nav-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

.mobile-nav-lang {
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale-ui));
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.mobile-nav-lang:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mobile-cta {
  width: 100%;
  text-align: center;
  padding: 1rem;
  font-size: calc(1rem * var(--type-scale-ui));
  border-radius: 8px;
}

/* ============================================================
   MEDIUM SCREENS
   ============================================================ */

@media (max-width: 1280px) {
  .hero-blue {
    padding: 3rem 2.5rem 3.5rem;
  }

  .hero-overlay {
    width: 46%;
    max-width: none;   /* on a narrow screen the box should keep taking its
                          share of the width rather than stay pinned */
  }
}

/* ============================================================
   MOBILE STYLES
   ============================================================ */

@media (max-width: 1024px) {
  :root {
    --gutter: 0px;
  }

  body {
    padding-top: 90px;
  }

  /* Nav */
  .site-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;
    padding: 0 1.5rem;
  }

  .nav-links,
  .nav-end > .btn-primary,
  .nav-end > .nav-lang {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .nav-logo img {
    height: 80px;
  }

  /* Hero — stack image above the box (no overlay on small screens) */
  .hero {
    position: static;
    display: flex;
    flex-direction: column;
    /* Stacked, the desktop's centre alignment would shrink-wrap each row and
       let the cream ground show beside the photo. */
    align-items: stretch;
    min-height: auto;
  }

  .hero-img-col {
    position: static;
    order: -1;
    height: 56vw;
  }

  .hero-img {
    object-position: center top;
  }

  .hero-overlay {
    width: 100%;
    margin-left: 0;
  }

  .hero-blue {
    padding: 3.5rem 1.75rem;
  }

  .hero h1 {
    font-size: calc(2.5rem * var(--type-scale));
  }

  .hero-subtitle {
    font-size: calc(1rem * var(--type-scale));
  }

  /* Bands go full width and the heading centres once the gutter collapses */
  .band--left {
    max-width: none;
  }

  .band--left .band-heading {
    text-align: center;
  }

  .band-heading {
    font-size: calc(2rem * var(--type-scale));
  }
}

/* ============================================================
   PAIN POINTS — "Kennst du das auch?"
   ============================================================ */

.wave-divider {
  display: block;
  width: 100%;
  height: 90px;                  /* matches --bevel-depth so the chevron angle is identical */
  overflow: visible;             /* let the 2.5px stroke at the corners show, uncropped */
}

.wave-path {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.5;
  stroke-dasharray: 12 9;         /* dash, then gap */
  vector-effect: non-scaling-stroke;
}

.pain-points {
  background: #fff;
}

.pain-points-inner {
  max-width: calc(var(--content-w) + 2 * var(--pad-x));
  padding: 5rem var(--pad-x) 6rem;
  margin-inline: auto;
}

.section-heading {
  font-family: var(--font-display);
  font-size: calc(3.375rem * var(--type-scale));
  font-weight: 400;
  line-height: 1.1;                /* body's 1.7 is far too loose once this wraps */
  color: var(--navy);
  text-align: center;
  margin-bottom: 3rem;
}

.pain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
}

/* Aug 2026: cards are sky-blue and the heading is plain bold Montserrat —
   the wavy yellow underline is gone from Nathalie's design. */
.pain-card {
  background: var(--blue);
  padding: 3.5rem 2.5rem;
}

.pain-card-heading {
  font-family: var(--font-heading);
  font-size: calc(1.125rem * var(--type-scale));
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1.25rem;
}

.pain-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pain-list li {
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale));
  color: hsl(212, 22%, 40%);   /* 40% keeps ~4.7:1 on sky-blue — passes WCAG AA */
  padding-left: 1.5rem;
  position: relative;
}

.pain-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  font-size: calc(1rem * var(--type-scale));
  line-height: 1.5;
}

/* Aug 2026: solid yellow, no dashed border */
.pain-card--quotes {
  background: var(--yellow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  text-align: center;
}

.pain-card--quotes p {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  font-size: calc(1.375rem * var(--type-scale));
  color: var(--navy);
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .pain-points-inner {
    padding: 3rem 3rem 4rem;
  }

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

/* ============================================================
   KURZ GESAGT
   ============================================================ */

/* Aug 2026: "Kurz gesagt" is no longer its own centred section — it sits
   inside the pain-points block as a photo-left / text-right row. */
.kurz-row {
  display: grid;
  /* Same two columns and same gutter as .pain-grid directly above, so the
     photo lines up with the blue card and the text with the yellow one.
     margin-top matches the gap, making the two rows read as one grid. */
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  align-items: center;
  margin-top: var(--grid-gap);
}

.kurz-img {
  width: 100%;
  height: 100%;
  max-height: 30rem;
  object-fit: cover;
}

.kurz-text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: center;
}

.kurz-heading {
  font-family: var(--font-display);
  font-size: calc(2.25rem * var(--type-scale));
  font-weight: 400;
  color: var(--navy);
  line-height: 1.3;
}

.kurz-body {
  font-family: var(--font-heading);
  font-size: calc(1.25rem * var(--type-scale));
  font-weight: 400;
  color: var(--navy);
  line-height: 1.7;
}

/* ============================================================
   STELL DIR VOR
   ============================================================ */

/* Aug 2026: yellow section with a white column down the middle. The heading
   moved out into a .band above; the head-with-leaf icon and the green pill
   are both gone from Nathalie's design. */
.stell-dir-vor {
  background: var(--yellow);
}

.stell-inner {
  max-width: 700px;
  margin: 0 auto;
  background: #fff;
  padding: 3.5rem 3rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.stell-lead {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: calc(1.25rem * var(--type-scale));
  color: var(--navy);
  text-align: center;
}

.stell-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stell-body p {
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale));
  line-height: 1.7;
  color: hsl(212, 22%, 45%);
}

.stell-body strong {
  font-weight: 700;
  color: var(--navy);
}

.du-fragst-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: calc(1.25rem * var(--type-scale));
  color: var(--navy);
  text-align: center;
  margin-top: 1.5rem;
}

@media (max-width: 1024px) {
  .kurz-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .kurz-img {
    max-height: 60vw;
  }

  .stell-inner {
    padding: 2.5rem 1.75rem 3rem;
  }
}

/* ============================================================
   LERNCOACHING — cream card on green, beveled top edge
   ============================================================ */

/* Aug 2026: a yellow card centred on white. The green background, the cream
   chevron bevel and the running-figure icon are all gone from the design;
   the heading moved out into a .band above. */
.lerncoaching {
  background: #fff;
  /* No horizontal padding — the .band child must reach both edges. .lern-card
     is max-width 720px and centred, so it is unaffected. */
  padding: 0;
  scroll-margin-top: 140px;     /* clear the fixed 120px header on anchor jumps */
}

.lern-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--yellow);
  padding: 3.5rem 3rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: center;
}

.lern-card p {
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale));
  line-height: 1.7;
  color: hsl(212, 30%, 34%);    /* darker than on white — yellow is a light ground */
}

.lern-card strong {
  font-weight: 700;
  color: var(--navy);
}

.lern-card-italic {
  font-style: italic;
}

@media (max-width: 1024px) {
  /* Gutter belongs to the card, not the section — the .band must stay edge to
     edge. The clamp keeps the card off the screen edges below 720px. */
  .lern-card {
    max-width: min(720px, 100% - 2.5rem);
    padding: 2.5rem 1.75rem 3rem;
  }
}

/* ============================================================
   SCHWERPUNKTE — 2×3 sky-blue card grid + gutter icons
   ============================================================ */

.schwerpunkte {
  background: #fff;
  /* Horizontal padding moved to .sp-grid so the .band reaches both edges. */
  padding: 5rem 0 6rem;
  scroll-margin-top: 140px;        /* clear the fixed 120px header on anchor jumps */
}

.sp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  max-width: calc(var(--content-w) + 2 * var(--pad-x));
  padding-inline: var(--pad-x);
  margin: 0 auto;
}

/* Aug 2026: cards are yellow (were sky-blue) and the decorative icons that
   sat in the side margins are gone, so the grid no longer needs the fluid
   66% wrapper that reserved room for them. */
.sp-card {
  background: var(--yellow);
  padding: 3rem 2.75rem;
}

.sp-card-heading {
  font-family: var(--font-heading);
  font-size: calc(1.125rem * var(--type-scale));
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1.5rem;
}

.sp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sp-list li {
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale));
  color: hsl(212, 30%, 34%);       /* darker for yellow — the blue floor of 40% would fail here */
  padding-left: 1.5rem;
  position: relative;
}

.sp-list li::before {
  content: '•';
  position: absolute;
  left: 0.25rem;
  line-height: 1.5;
}

.sp-list em {
  font-style: italic;
}

.btn-outline {
  display: block;
  width: max-content;
  max-width: 100%;           /* never exceed the container — long labels wrap instead of overflowing */
  margin: 3rem auto 0;
  padding: 1.1rem 3rem;
  background: #fff;
  border: 1.5px solid var(--navy);
  border-radius: 10px;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale-ui));
  text-align: center;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--navy);
  color: #fff;
}

/* Stack to one column on tablet-portrait and below. We deliberately stack
   earlier than the original (which stays 2-col here): at <900px the cards get
   too narrow for the long German headings/bullets, so full-width is far more
   readable. Still below the 1024px nav breakpoint, so ~959px keeps 2 columns. */
@media (max-width: 900px) {
  .schwerpunkte {
    padding: 3.5rem 0 4rem;          /* .sp-grid already pads itself */
  }

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

  .sp-card {
    padding: 2.5rem 1.75rem;
  }
}

/* ============================================================
   HALLO, ICH BIN NATHALIE — teaser (cream box, text + circle photo)
   ============================================================ */

/* Aug 2026: this block now absorbs the old standalone "Über mich" section.
   Order is band heading → photo + intro on cream → yellow biography box →
   blue credentials box. The circular photo crop is gone; Nathalie's design
   uses a plain rectangular portrait. */
.nathalie {
  background: #fff;
  scroll-margin-top: 140px;        /* clear the fixed 120px header on anchor jumps */
}

/* Unlike the colour-band sections, Nathalie's block is an inset composition in
   the Canva page — white gutters on both sides, nothing full-bleed. */
.nathalie-inner {
  max-width: calc(var(--content-w) + 2 * var(--pad-x));
  padding-inline: var(--pad-x);
  margin: 0 auto;
}

/* Two columns, two rows: the blue heading band and the photo stack in the left
   column, and the cream text spans both rows beside them. */
.nathalie-row {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  grid-template-rows: auto 1fr;
  align-items: stretch;
}

.nathalie-row .band {
  grid-column: 1;
  grid-row: 1;
  padding: 1.75rem 2rem;           /* the section is inset, so --pad-x does not apply */
  position: relative;
}

/* In her design this band alone runs out to the left screen edge while the
   heading stays on the content column. Painted rather than laid out, so the
   grid is untouched; overflow left of the viewport origin raises no scrollbar. */
.nathalie-row .band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 100vw;
  background: var(--blue);
}

.nathalie-row .band-heading {
  text-align: left;
}

/* No height cap: the photo fills whatever the cream column needs, so the two
   columns end flush at the bottom as they do in her design. */
.nathalie-photo {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;        /* bias up to keep the face centred */
}

.nathalie-text {
  grid-column: 2;
  grid-row: 1 / -1;
  background: var(--cream);
  padding: 3rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  text-align: center;
}

.nathalie-text p {
  font-family: var(--font-heading);
  font-size: calc(1.0625rem * var(--type-scale));
  line-height: 1.7;
  color: hsl(212, 22%, 45%);       /* 4.7:1 on cream */
}

.nathalie-text strong {
  font-weight: 700;
  color: var(--navy);
}

@media (max-width: 900px) {
  .nathalie-row {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  /* Single column: band, photo, text stack in source order. */
  .nathalie-row .band,
  .nathalie-photo,
  .nathalie-text {
    grid-column: 1;
    grid-row: auto;
  }

  /* Stacked: the band clears the wrapper's gutter to reach both edges, which
     replaces the desktop left-only bleed. */
  .nathalie-row .band {
    margin-inline: calc(-1 * var(--pad-x));
  }

  /* Centred like every other band once it is full width. */
  .nathalie-row .band-heading {
    text-align: center;
  }

  .nathalie-row .band::before {
    content: none;
  }

  .nathalie-photo {
    max-height: 70vw;
  }

  .nathalie-text {
    padding: 2.5rem 1.75rem;
  }
}

/* ============================================================
   KUNDENSTIMMEN — 3 testimonial columns on cream (new Aug 2026)
   ============================================================ */

.kundenstimmen {
  background: #fff;
}

.stimmen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: calc(var(--content-w) + 2 * var(--pad-x));
  /* No vertical padding: in Nathalie's design the cream cards butt straight
     against the blue band above and the photo band below. Deliberate exception
     to the usual section breathing room. Default align-items (stretch) is what
     gives the three cards equal height, so it must not be set to start. */
  padding-inline: var(--pad-x);
  margin-inline: auto;
}

.stimme {
  background: var(--cream);
  padding: 2.5rem 2rem;
}

.stimme blockquote p {
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale));
  line-height: 1.7;
  color: hsl(212, 22%, 45%);       /* 4.7:1 on cream */
}

.stimme figcaption {
  margin-top: 1.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: calc(1rem * var(--type-scale));
  color: var(--navy);
}

/* Two testimonials until Nathalie supplies Miriam's full text — the grid is
   built for three and needs no change when the third arrives. */
@media (max-width: 1100px) {
  .stimmen-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ============================================================
   ANGEBOTE — intro + 3 offer cards (colour-banded) + price notes
   ============================================================ */

.preise {
  background: #fff;
  /* Horizontal padding moved onto the two content children below, so the
     .band reaches both edges. */
  padding: 0 0 6rem;
  scroll-margin-top: 140px;        /* clear the fixed 120px header on anchor jumps */
}

.angebote-intro {
  font-family: var(--font-heading);
  font-size: calc(1.0625rem * var(--type-scale));
  line-height: 1.7;
  color: hsl(212, 22%, 40%);       /* 7:1 on white */
  max-width: calc(var(--content-w) + 2 * var(--pad-x));
  padding-inline: var(--pad-x);
  margin: 2.5rem auto 3.5rem;
}

.angebote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: calc(var(--content-w) + 2 * var(--pad-x));
  padding-inline: var(--pad-x);
  margin: 0 auto;
  align-items: stretch;            /* all three cards share the tallest one's height */
}

/* Aug 2026: the whole card is filled with its accent and the title sits in a
   white box inside it (was: white card, coloured header band + icon).
   Nextlevel moves from yellow to pink; Stay Cool! becomes Deep Dive. */
.angebot-card {
  background: var(--accent);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.angebot-card--kickstart { --accent: var(--blue); }
.angebot-card--nextlevel { --accent: var(--pink); }
.angebot-card--deepdive  { --accent: var(--yellow); }

.angebot-head {
  background: #fff;
  padding: 1.1rem 1.25rem;
  text-align: center;
}

.angebot-title {
  font-family: var(--font-heading);
  font-size: calc(1.25rem * var(--type-scale));
  font-weight: 700;
  color: var(--navy);
}

.angebot-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 0.5rem 0.5rem;
}

.angebot-list li {
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale));
  line-height: 1.6;
  color: hsl(212, 30%, 34%);       /* holds AA across all three card grounds */
  padding-left: 1.25rem;
  position: relative;
}

.angebot-list li::before {
  content: '•';
  position: absolute;
  left: 0.25rem;
}

.angebot-price {
  font-weight: 700;
  color: var(--navy);
  margin-top: 0.25rem;
}

.angebote-notes {
  max-width: calc(var(--content-w) + 2 * var(--pad-x));
  padding-inline: var(--pad-x);
  margin: 2.5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.angebote-notes p {
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale));
  line-height: 1.7;
  color: hsl(212, 22%, 40%);
}

@media (max-width: 900px) {
  .preise {
    padding: 0 0 4rem;               /* the three .angebote-* children pad themselves */
  }

  .angebote-grid,
  .angebote-notes {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}

/* ============================================================
   PROZESS — "Bereit für eine Veränderung?" 4 process steps
   ============================================================ */

.prozess {
  background: var(--cream);
  /* max() keeps the 80px desktop gutter but never drops below 1.5rem once
     --gutter collapses to 0 on mobile (avoids edge-to-edge text). */
  padding: 5rem var(--pad-x) 6rem;
}

.prozess-inner {
  max-width: var(--content-w);
  margin: 0 auto;
}

.prozess-heading {
  font-family: var(--font-display);
  font-size: calc(2.5rem * var(--type-scale));
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 3.5rem;
}

.prozess-grid {
  display: grid;
  /* minmax(0,…) so a nowrap label can't force the tracks wider than the row */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem;
}

.prozess-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}

.prozess-icon {
  width: 80px;
  height: auto;
}

.prozess-step-label {
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale));
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;             /* one line on the 4-up layout (matches original); the
                                      label may overflow its narrow column into the gutter */
}

.prozess-step p {
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale));
  line-height: 1.6;
  color: hsl(212, 22%, 45%);       /* 4.7:1 on cream */
}

/* The 4-up row needs a wide canvas for the single-line labels. Below ~1300px
   the columns get too narrow and the long 4th label ("Mehr Zufriedenheit …")
   would overrun its neighbour — so drop to a 2×2 grid and let labels wrap. */
@media (max-width: 1300px) {
  .prozess-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 2rem;
  }

  .prozess-step-label {
    white-space: normal;
  }
}

/* Below the nav breakpoint --gutter collapses to 0 — restore side padding and
   trim the heading for small screens. */
@media (max-width: 1024px) {
  .prozess {
    padding: 3.5rem 1.5rem 4rem;
  }

  .prozess-heading {
    font-size: calc(2rem * var(--type-scale));
    margin-bottom: 2.5rem;
  }
}

@media (max-width: 560px) {
  .prozess-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ÜBER MICH — full-bleed portrait (like the hero), with the
   yellow tag + cream + blue boxes overlaid on the left half
   ============================================================ */

/* Aug 2026: the standalone "Über mich" section is gone — its full-bleed
   portrait, yellow tag and overlay are all dropped. What survives is the
   yellow biography box and the blue credentials box, which now sit inside
   the .nathalie block. They are offset horizontally, as in the Canva page. */
/* Both boxes are offset within the inset composition, mirroring each other:
   the yellow one is flush left and stops short on the right, the blue one
   starts inset from the left and runs flush right, so they overlap on the
   diagonal. Percentages are of .nathalie-inner, not the viewport. */
.ueber-intro {
  background: var(--yellow);
  margin: 3rem 30% 0 0;
  padding: 3rem 3.5rem;
}

.ueber-intro p {
  font-family: var(--font-heading);
  font-size: calc(1.0625rem * var(--type-scale));
  line-height: 1.7;
  color: hsl(212, 30%, 34%);        /* darker for the yellow ground */
}

.ueber-intro strong {
  font-weight: 700;
  color: var(--navy);
}

.ueber-intro p + p {
  margin-top: 1.25rem;
}

.ueber-credentials {
  background: var(--blue);
  margin: -2.5rem 0 5rem 11%;      /* negative top overlaps the yellow box, as in Canva */
  padding: 3rem 3.5rem;
  position: relative;
}

.ueber-credentials-heading {
  font-family: var(--font-heading);
  font-size: calc(1.25rem * var(--type-scale));
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1.5rem;
}

.ueber-credentials-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ueber-credentials-list li {
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale));
  line-height: 1.5;
  color: hsl(212, 22%, 40%);        /* 4.7:1 on sky-blue */
  padding-left: 1.5rem;
  position: relative;
}

.ueber-credentials-list li::before {
  content: '•';
  position: absolute;
  left: 0.25rem;
}

@media (max-width: 1024px) {
  .ueber-intro,
  .ueber-credentials {
    margin-left: 0;
    margin-right: 0;
    padding: 2.5rem 1.75rem;
  }

  .ueber-credentials {
    margin-top: 0;
    margin-bottom: 3rem;
  }
}

/* ============================================================
   FAQ — "Die häufigsten Fragen" native <details> accordion
   ============================================================ */

/* The heading now lives in a .band above, so the section itself only pads the
   list. Background stays white; the accordion rows carry the cream. */
.faq {
  background: #fff;
  /* Horizontal padding moved to .faq-inner so the .band reaches both edges. */
  padding: 2.5rem 0 5rem;
}

.faq-inner {
  max-width: calc(var(--content-w) + 2 * var(--pad-x));
  padding-inline: var(--pad-x);
  margin: 0 auto;
}

.faq-item {
  background: var(--cream);
}

/* Top hairline closes off the list above the first row */
.faq-list {
  border-top: 1px solid hsl(212, 25%, 82%);
}

.faq-item {
  border-bottom: 1px solid hsl(212, 25%, 82%);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 1.25rem;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: calc(1.0625rem * var(--type-scale));
  color: var(--navy);
  list-style: none;                 /* hide the default disclosure triangle */
}

.faq-question::-webkit-details-marker {
  display: none;                    /* Safari */
}

.faq-question:hover {
  color: hsl(212, 44%, 24%);
}

.faq-chevron {
  flex-shrink: 0;
  color: var(--navy);
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.25rem 1.6rem;
}

.faq-answer p {
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale));
  line-height: 1.7;
  color: hsl(212, 22%, 45%);        /* 4.7:1 on cream */
}

.faq-answer p + p {
  margin-top: 0.4rem;
}

.faq-answer strong {
  font-weight: 700;
  color: var(--navy);
}

@media (max-width: 1024px) {
  .faq {
    padding: 2rem 0 4rem;            /* .faq-inner already pads itself */
  }
}

/* ============================================================
   KONTAKT (sec 14) — intro + bordered form, brand boat alongside
   ============================================================ */

/* Aug 2026: heading moved into a .band above; the decorative boat and
   tagline column are gone, so the form is no longer in a 2-column grid. */
.kontakt {
  background: #fff;
  padding-top: 2.5rem;
  scroll-margin-top: 140px;         /* clear the fixed 120px header on anchor jumps */
}

.kontakt-inner {
  max-width: calc(var(--content-w) + 2 * var(--pad-x));
  margin: 0 auto;
  /* Top value clears the .band above; the section's own padding-top sits
     above that band, not below it. Matches .angebote-intro. */
  padding: 2.5rem var(--pad-x) 5rem;
}

.kontakt-intro {
  font-family: var(--font-heading);
  font-size: calc(1.0625rem * var(--type-scale));
  line-height: 1.7;
  color: hsl(212, 22%, 45%);        /* muted navy, 4.7:1 on white */
  max-width: 60rem;
  margin-bottom: 2.5rem;
}

.kontakt-subheading {
  font-family: var(--font-display);
  font-size: calc(1.75rem * var(--type-scale));
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 1.5rem;
}

.kontakt-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border: 2px solid var(--navy);
  border-radius: 4px;
  padding: 2.5rem 2.25rem 3rem;
  max-width: 62rem;
}

.kontakt-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;                     /* let the fieldset shrink inside the grid */
}

.kontakt-legend {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: calc(1.0625rem * var(--type-scale-ui));
  color: var(--navy);
  padding: 0;
  margin-bottom: 1.25rem;
}

.kontakt-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.kontakt-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.kontakt-field label {
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale-ui));
  color: var(--navy);
}

.kontakt-req {
  font-weight: 400;
  color: hsl(212, 18%, 55%);        /* muted "(erforderlich)" hint */
}

.kontakt-form input,
.kontakt-form textarea {
  width: 100%;
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale-ui));
  color: var(--navy);
  background: var(--cream);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.85rem 1rem;
}

.kontakt-form textarea {
  resize: vertical;
  min-height: 8rem;
}

.kontakt-form input:focus-visible,
.kontakt-form textarea:focus-visible {
  outline: none;
  border-color: var(--navy);
}

.kontakt-submit {
  align-self: center;
  margin-top: 0.5rem;
  padding: 0.9rem 2.75rem;
  background: #fff;
  border: 1.5px solid var(--navy);
  border-radius: 10px;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale-ui));
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.kontakt-submit:hover,
.kontakt-submit:focus-visible {
  background: var(--navy);
  color: #fff;
}

/* Honeypot – visuell versteckt, bleibt aber für Bots im DOM */
.kontakt-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Statusmeldung nach dem Absenden */
.kontakt-status {
  margin: 0.5rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-size: calc(0.95rem * var(--type-scale-ui));
  text-align: center;
}

.kontakt-status.is-ok {
  background: var(--green);
  color: var(--navy);
}

.kontakt-status.is-error {
  background: hsl(6, 70%, 92%);
  color: hsl(6, 55%, 32%);
}

@media (max-width: 480px) {
  .kontakt-name-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   FOOTER (sec 15) — 3 columns on cream
   ============================================================ */

/* Aug 2026: footer moves from cream to yellow */
.site-footer {
  background: var(--yellow);
  padding: 4rem var(--pad-x);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.5rem;
  max-width: var(--content-w);
  margin: 0 auto;
  align-items: start;
}

.footer-copy {
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale-ui));
  color: var(--navy);
  margin-bottom: 1.25rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links a {
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale-ui));
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-col-heading {
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale-ui));
  color: var(--navy);
  margin-bottom: 1.25rem;
}

.footer-social {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-instagram {
  display: inline-flex;
  color: #fff;
}

.footer-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

/* Transparent-background logos sit straight on the cream footer (no card) */
.footer-logos img {
  width: auto;
}

.footer-logos .logo-institut {
  height: 56px;
}

.footer-logos .logo-profibox {
  height: 96px;
}

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ============================================================
   LEGAL PAGES — Impressum / Datenschutz
   ============================================================ */

.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 4rem var(--pad-x) 5rem;
}

.legal h1 {
  font-family: var(--font-display);
  font-size: calc(3rem * var(--type-scale));
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 2rem;
}

.legal h2 {
  font-family: var(--font-display);
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 400;
  color: var(--navy);
  margin: 2.5rem 0 0.75rem;
}

.legal p,
.legal li {
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale));
  line-height: 1.7;
  color: hsl(212, 22%, 40%);
}

.legal p + p {
  margin-top: 0.75rem;
}

.legal ul {
  margin: 0.5rem 0 0 1.25rem;
}

.legal a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal strong {
  color: var(--navy);
  font-weight: 700;
}

@media (max-width: 1024px) {
  .legal h1 {
    font-size: calc(2.25rem * var(--type-scale));
  }
}

/* ============================================================
   TERMIN / BOOKING PAGE
   ============================================================ */

.booking {
  max-width: 1000px;
  margin: 0 auto;
  padding: 4rem var(--pad-x) 5rem;
}

.booking h1 {
  font-family: var(--font-display);
  font-size: calc(3rem * var(--type-scale));
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 1.5rem;
}

.booking-intro {
  font-family: var(--font-heading);
  font-size: calc(1.0625rem * var(--type-scale));
  line-height: 1.7;
  color: hsl(212, 22%, 40%);
  max-width: 640px;
  margin-bottom: 2.5rem;
}

/* Online booking — Easy!Appointments embedded via a same-origin iframe.
   Both booking pages and /buchung/ live on this domain, so a small script on
   each page reads the frame's content height and fits the iframe to it (no
   nested scrollbar). The min-height is the fallback until that script runs. */
.booking-embed {
  width: 100%;
  margin-top: 0.5rem;
}

.booking-embed iframe {
  display: block;
  width: 100%;
  min-height: 420px;
  border: 0;
}

.booking-alt {
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale));
  line-height: 1.7;
  color: hsl(212, 22%, 40%);
  margin-top: 2.5rem;
}

.booking-alt a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1024px) {
  .booking h1 {
    font-size: calc(2.25rem * var(--type-scale));
  }
}

/* ============================================================
   DANKE / CONFIRMATION PAGE
   ============================================================ */

.danke {
  max-width: 680px;
  margin: 0 auto;
  padding: 4rem var(--pad-x) 5rem;
  text-align: center;
}

.danke-check {
  color: var(--green);
  margin: 0 auto 1.5rem;
}

.danke h1 {
  font-family: var(--font-display);
  font-size: calc(3rem * var(--type-scale));
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 1rem;
}

.danke-lead {
  font-family: var(--font-heading);
  font-size: calc(1.125rem * var(--type-scale));
  line-height: 1.7;
  color: hsl(212, 22%, 40%);
  margin-bottom: 3rem;
}

.danke h2 {
  font-family: var(--font-display);
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 1.25rem;
}

.danke-steps {
  list-style: none;
  text-align: left;
  max-width: 520px;
  margin: 0 auto 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.danke-steps li {
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale));
  line-height: 1.6;
  color: hsl(212, 22%, 40%);
  padding-left: 1.75rem;
  position: relative;
}

.danke-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--green);
}

.danke-steps strong {
  color: var(--navy);
  font-weight: 700;
}

.danke-note {
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale));
  line-height: 1.7;
  color: hsl(212, 22%, 40%);
  margin-bottom: 2.5rem;
}

.danke-note a,
.danke-steps a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.danke-back {
  font-size: calc(1rem * var(--type-scale-ui));
  padding: 0.75rem 1.5rem;
}

@media (max-width: 1024px) {
  .danke h1 {
    font-size: calc(2.25rem * var(--type-scale));
  }
}