:root {
  color-scheme: light;
  --ink: #24312d;
  --muted: #59665f;
  --paper: #fbfaf6;
  --mist: #eef2eb;
  --sage: #7a927f;
  --forest: #183a31;
  /* Warm orange for filled surfaces: white button text sits at 4.69:1. */
  --clay: #b35a22;
  /* The same orange, darkened for small text. At --clay the kickers only
     reach 4.21:1 on the mist band, which is below AA. */
  --clay-ink: #9c4a19;
  /* Kickers sit on photographs in two places. The orange is a text colour
     for paper, on a darkened photograph it disappears. */
  --kicker-on-dark: #f0c06f;
  /* Gold for decoration, and a darker one for small text: at --gold the
     label in the credentials reaches 2.4:1 on mist. */
  --gold: #8f7428;
  --gold-ink: #7a6220;
  --line: rgba(36, 49, 45, 0.15);
  --shadow: 0 26px 70px rgba(24, 58, 49, 0.16);
  /* Height of the logo block, and the air between it and the eyebrow. The
     hero derives its top padding from both, so a logo that grows with the
     viewport can never land on the text. Height is the primitive because
     the logo is portrait: its width follows from the file. */
  --brand-height: clamp(104px, 9.4vw - 9px, 141px);
  /* The logo once the header has collapsed to its scrolling state. */
  --brand-height-compact: 56px;
  --header-gap: 38px;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.65;
}

img {
  display: block;
  max-width: 100%;
  /* The width and height attributes are there to reserve the space before
     the file arrives. Without this they would also fix the rendered height. */
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(18px, 4vw, 56px);
  background: linear-gradient(180deg, rgba(24, 58, 49, 0.78), rgba(24, 58, 49, 0));
  transition:
    padding 0.25s ease,
    background-color 0.25s ease;
}

/* Scrolled state. Without it the full size logo travels down over the
   headline, which is what a fixed header does to a hero this large. Only
   above 860px: below that the header is absolute and scrolls away, and the
   navigation is hidden anyway. */
@media (min-width: 861px) {
  /* The bar is paper, not forest. The logo drops its white tile here, and
     the mark is dark navy and gold: on green it would be dark on dark. */
  .site-header.is-compact {
    padding-block: 10px;
    background: rgba(251, 250, 246, 0.97);
    box-shadow: 0 10px 30px rgba(12, 26, 22, 0.14);
  }

  .site-header.is-compact .brand {
    height: var(--brand-height-compact);
    padding: 0;
    background: none;
    border-color: transparent;
    box-shadow: none;
  }

  .site-header.is-compact .main-nav {
    color: var(--forest);
  }

  .site-header.is-compact .main-nav a {
    text-shadow: none;
  }

  /* The bar covers the top of a section that an anchor jumps to. */
  section[id] {
    scroll-margin-top: calc(var(--brand-height-compact) + 30px);
  }
}

.brand {
  display: inline-flex;
  height: var(--brand-height);
  padding: 7px;
  background: rgba(251, 250, 246, 0.9);
  border: 1px solid rgba(251, 250, 246, 0.75);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
  transition: height 0.25s ease;
}

.brand img {
  width: auto;
  height: 100%;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
  color: #fffdf7;
  font-size: 0.9rem;
  font-weight: 700;
}

.main-nav a {
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

.main-nav a:hover,
.main-nav a:focus-visible {
  border-color: currentColor;
}

.hero {
  position: relative;
  min-height: 94vh;
  display: grid;
  align-items: end;
  overflow: hidden;
  padding: calc(18px + var(--brand-height) + var(--header-gap)) clamp(22px, 7vw, 92px)
    clamp(42px, 9vh, 88px);
}

.hero-image,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-image {
  object-fit: cover;
  object-position: center 33%;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(18, 38, 32, 0.86), rgba(18, 38, 32, 0.45) 48%, rgba(18, 38, 32, 0.08)),
    linear-gradient(0deg, rgba(18, 38, 32, 0.78), rgba(18, 38, 32, 0.08) 58%);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(700px, 100%);
  color: #fffdf7;
}

.eyebrow,
.section-kicker {
  margin: 0 0 14px;
  color: var(--clay-ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero .eyebrow,
.cta-copy .section-kicker {
  color: var(--kicker-on-dark);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
}

h1 {
  max-width: 780px;
  /* Bounded by the height as well as the width. A headline sized on width
     alone runs the buttons off a 1280x800 or 1512x777 laptop. */
  font-size: clamp(2.75rem, min(6vw, 7.4vh), 5.45rem);
}

/* Headings carry margin 0 and the paragraphs only a bottom margin, so a
   heading sat directly on the text below it. In em, so a 3.2rem heading
   gets more air than a 1.45rem one. Not when the heading is the last
   child: in a two column split that would only pad the column. */
h2:not(:last-child),
h3:not(:last-child) {
  margin-bottom: 0.45em;
}

h1 span {
  display: block;
}

h2 {
  font-size: clamp(2.1rem, 5vw, 4.45rem);
}

h3 {
  font-size: 1.45rem;
}

.hero-copy {
  width: min(610px, 100%);
  margin: 30px 0 0;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 1px solid currentColor;
  font-size: 0.92rem;
  font-weight: 700;
}

.button.primary {
  border-color: var(--clay);
  background: var(--clay);
  color: #fffdf7;
}

.button.secondary {
  color: #fffdf7;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.68);
}

.section {
  padding: clamp(72px, 10vw, 128px) 0;
}

.container {
  width: min(1160px, calc(100% - 44px));
  margin: 0 auto;
}

.split {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(280px, 1.1fr);
  gap: clamp(34px, 7vw, 86px);
  align-items: start;
}

.intro-band {
  background: var(--mist);
}

.stacked-text {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
}

.stacked-text p,
.feature-copy p,
.profile p,
.body-access p {
  margin: 0 0 1.05em;
}

.section-heading {
  width: min(760px, 100%);
  margin-bottom: 42px;
}

.wish-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.wish-grid article {
  min-height: 218px;
  padding: 26px;
  border-top: 3px solid var(--sage);
  background: #fffdf8;
  box-shadow: 0 18px 46px rgba(24, 58, 49, 0.08);
}

.wish-grid span {
  display: block;
  margin-bottom: 14px;
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 2.2rem;
}

.wish-grid p {
  margin: 0;
  color: var(--muted);
}

blockquote {
  width: min(860px, 100%);
  margin: clamp(44px, 7vw, 80px) auto 0;
  padding: 28px 0;
  border-block: 1px solid var(--line);
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  line-height: 1.25;
  text-align: center;
}

.work {
  background: linear-gradient(180deg, #fffdf8, var(--mist));
}

.feature {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 1fr);
  gap: clamp(34px, 7vw, 84px);
  align-items: center;
  margin-bottom: clamp(70px, 10vw, 126px);
}

.feature.reverse {
  grid-template-columns: minmax(300px, 1fr) minmax(280px, 0.9fr);
}

.feature.reverse .feature-media {
  order: 2;
}

.feature-media {
  position: relative;
}

.feature-media::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--gold);
}

.feature-media img,
.portrait-wrap img,
.rates img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: var(--shadow);
}

.feature-copy {
  font-size: 1.05rem;
}

.body-access {
  width: min(860px, calc(100% - 44px));
  padding: clamp(34px, 5vw, 58px);
  background: var(--forest);
  color: #fffdf7;
}

.body-access h2 {
  color: #fffdf7;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.body-access p {
  color: rgba(255, 253, 247, 0.82);
  font-size: 1.12rem;
}

.profile {
  background: #fffdf8;
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(320px, 1.18fr);
  gap: clamp(36px, 8vw, 90px);
  align-items: start;
}

.credentials {
  margin-top: 30px;
  padding-top: 25px;
  border-top: 1px solid var(--line);
}

.credentials ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/* Seven lines that all began with "Diplom" or "Zertifiziert" read as one
   grey block. The repeated word becomes the label, the qualification gets
   the serif face, and each entry gets its own card. */
.credentials li {
  padding: 14px 16px;
  border-left: 2px solid var(--gold);
  background: var(--mist);
  font-family: var(--font-serif);
  font-size: 1.06rem;
  line-height: 1.3;
  color: var(--ink);
}

.credential-kind {
  display: block;
  margin-bottom: 5px;
  color: var(--gold-ink);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cta-panel {
  position: relative;
  min-height: 72vh;
  display: grid;
  align-items: center;
  padding: clamp(66px, 11vw, 140px) clamp(22px, 7vw, 92px);
  overflow: hidden;
  color: #fffdf7;
}

.cta-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(24, 58, 49, 0.87), rgba(24, 58, 49, 0.28));
}

.cta-copy {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
}

.cta-copy h2 {
  color: #fffdf7;
}

.cta-copy p:not(.section-kicker) {
  font-size: 1.2rem;
}

.contact {
  background: var(--mist);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
  gap: clamp(36px, 8vw, 96px);
  align-items: start;
}

.contact-name {
  margin: 28px 0 8px;
  font-weight: 800;
}

address {
  font-style: normal;
  color: var(--muted);
}

.contact-links {
  display: grid;
  gap: 8px;
  margin-top: 24px;
  font-weight: 800;
}

.contact-links a {
  width: fit-content;
  border-bottom: 1px solid var(--clay-ink);
}

.rates {
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  gap: 22px;
  align-items: end;
}

.rates img {
  aspect-ratio: 5 / 6;
}

.rate-box {
  padding: 28px;
  background: #fffdf8;
  box-shadow: 0 18px 46px rgba(24, 58, 49, 0.08);
}

.rate-box p {
  margin: 9px 0;
  color: var(--muted);
  font-weight: 700;
}

.rate-box .button {
  margin-top: 18px;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 28px clamp(22px, 7vw, 92px);
  background: var(--forest);
  color: #fffdf7;
  font-size: 0.92rem;
}

.site-footer p {
  margin: 0;
}

.site-footer div {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.site-footer a {
  color: rgba(255, 253, 247, 0.78);
}

@media (max-width: 860px) {
  :root {
    --header-gap: 28px;
  }

  .site-header {
    position: absolute;
    align-items: flex-start;
  }

  .main-nav {
    display: none;
  }

  .hero {
    min-height: 90vh;
  }

  .hero-shade {
    background:
      linear-gradient(0deg, rgba(18, 38, 32, 0.88), rgba(18, 38, 32, 0.34)),
      linear-gradient(90deg, rgba(18, 38, 32, 0.62), rgba(18, 38, 32, 0.16));
  }

  .split,
  .wish-grid,
  .feature,
  .feature.reverse,
  .profile-grid,
  .contact-grid,
  .rates {
    grid-template-columns: 1fr;
  }

  .feature.reverse .feature-media {
    order: 0;
  }

  .credentials ul {
    grid-template-columns: 1fr;
  }

  .feature-media::before {
    inset: 12px -12px -12px 12px;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  :root {
    --brand-height: 92px;
    --header-gap: 16px;
  }

  .hero {
    /* svh, not vh: the whole hook has to fit while the browser bars are
       still on screen, which is what a visitor sees on the first screen. */
    min-height: 100svh;
    padding-bottom: max(30px, env(safe-area-inset-bottom));
    padding-inline: 18px;
  }

  h1 {
    font-size: clamp(1.65rem, 7.4vw, 2rem);
    line-height: 1.14;
  }

  h1 span {
    margin-top: 0.18em;
  }

  .hero-copy {
    max-width: 34ch;
    margin-top: 20px;
    font-size: 1rem;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
  }

  .button {
    width: 100%;
  }

  .container {
    width: min(100% - 32px, 1160px);
  }

  .wish-grid article,
  .rate-box {
    padding: 22px;
  }

  .body-access {
    width: min(100% - 32px, 860px);
    padding: 28px;
  }
}

/* Narrow legacy phones: the hook still has to fit on the first screen. */
@media (max-width: 360px) {
  :root {
    --brand-height: 84px;
    --header-gap: 14px;
  }

  h1 {
    font-size: clamp(1.4rem, 7.2vw, 1.7rem);
  }

  .hero-copy {
    margin-top: 16px;
    font-size: 0.95rem;
  }

  .hero-actions {
    margin-top: 18px;
  }
}