/* ==========================================================================
   scherk.net — shared stylesheet
   Hand-written replacement for the former Wix export. No external requests:
   fonts are self-hosted (Carlito, SIL OFL, metric-compatible with Calibri),
   images live under /assets.
   ========================================================================== */

@font-face {
  font-family: Carlito;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/carlito-400.woff2") format("woff2");
}
@font-face {
  font-family: Carlito;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/carlito-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: Carlito;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/carlito-700.woff2") format("woff2");
}

:root {
  --green: #226854;
  --green-dark: #174b3d;
  --lime: #8ac53f;
  --pale: #f1fdfd;
  --ink: #000;
  --font: Carlito, Calibri, Arial, Helvetica, sans-serif;

  /* Desktop grid: the content strip is the viewport minus a fixed gutter and
     never narrower than 980px, which is what the original layout used. */
  --site-min: 980px;
  --header-gutter: 63px;
  --footer-gutter: 74px;
  --strip-gutter: 81px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 400 16px/1.4 var(--font);
  overflow-x: hidden;
}

img { max-width: 100%; border: 0; }
a { color: inherit; transition: color .18s ease, opacity .18s ease; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }

::selection { background: rgba(34, 104, 84, .18); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.topbar {
  height: 43px;
  background: var(--green);
  color: #fff;
  font-size: 15px;
}

.topbar-inner {
  display: flex;
  width: 100%;
  min-width: var(--site-min);
  height: 43px;
  white-space: nowrap;
}

.topbar-left { position: relative; flex: 784 1 0; }
.topbar-right { position: relative; flex: 196 1 0; }

.topbar-item {
  position: absolute;
  top: 10px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0;
  text-decoration: none;
}
.topbar-item:hover { opacity: .88; }
.topbar-mail { left: 42px; }
.topbar-phone { left: 209px; }
.topbar-address { left: 353px; }

.topbar-item svg {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  fill: var(--lime);
  flex: 0 0 auto;
}

.topbar-map {
  position: absolute;
  top: 10px;
  left: calc((100% - 196px) * .5 + 167px);
  display: block;
  width: 22px;
  height: 22px;
}
.topbar-map img { display: block; width: 22px; height: 22px; object-fit: cover; }

/* --------------------------------------------------------------------------
   Header: brand + primary navigation
   -------------------------------------------------------------------------- */

.site-header {
  height: 150px;
  background: #fff;
  box-shadow: 0 2px 18px rgba(0, 0, 0, .04);
}

.header-inner {
  display: flex;
  width: calc(100% - var(--header-gutter) * 2);
  min-width: var(--site-min);
  height: 150px;
  margin: 0 auto;
}

.brand-col { flex: 333 1 0; display: flex; justify-content: center; }

.brand { width: 333px; margin: 29px 0 32px; }
.brand a { display: block; color: inherit; text-decoration: none; }
.brand-name {
  color: var(--green);
  font: 700 43px/1em var(--font);
  letter-spacing: .05em;
}
.brand-claim {
  color: var(--ink);
  font: 400 19px/1.2 var(--font);
}

.nav-col { flex: 647 1 0; display: flex; justify-content: flex-end; }

.nav {
  display: flex;
  align-items: flex-start;
  height: 42px;
  margin: 53px 88px 55px auto;
}
.nav-item {
  position: relative;
  display: block;
  margin: 0 15px;
  padding: 10px;
  color: var(--ink);
  font: 400 18px/22px var(--font);
  letter-spacing: .05em;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-item[aria-current="page"],
.nav-item:hover,
.nav-dropdown:hover > .nav-item { color: var(--green); }

/* The submenu is positioned against this, not the page. Without it the
   absolute box escapes to the initial containing block and lands at the
   bottom left of the window. */
.nav-dropdown { position: relative; }

.nav-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 5px;
  min-width: 258px;
  padding: 10px 0;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  z-index: 50;
}
.nav-submenu a {
  display: block;
  margin: 0 0 8px;
  padding: 10px;
  color: var(--ink);
  font: 400 18px/22px var(--font);
  letter-spacing: .05em;
  text-decoration: none;
  white-space: nowrap;
}
.nav-submenu a:hover,
.nav-submenu a:focus { color: var(--green); }
.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu,
.nav-dropdown.is-open .nav-submenu { display: block; }

/* Mobile menu — hidden until the mobile breakpoint. */
.menu-toggle { display: none; }
.burger { display: none; }
.mobile-menu { display: none; }

/* --------------------------------------------------------------------------
   Page sections
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  height: 365px;
  background: var(--green);
  overflow: hidden;
}
.hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero h1,
.hero h2 {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #fff;
  font-size: 50px;
  line-height: 70px;
  text-align: center;
}
/* Every banner carries the green wash, not just the about page — measured off
   the live site, whose banners average a green cast on all of them. The
   heading sits above it on z-index 1. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(34, 104, 84, .45);
}
.hero--deep::after { background: rgba(34, 104, 84, .67); }
.hero--tinted h1,
.hero--tinted h2 {
  font-size: 56px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Alternating image / text rows. */
.page-body { padding: var(--body-top, 96px) 0 var(--body-bottom, 52px); }
.split + .split { margin-top: var(--row-gap, 56px); }

.split {
  display: flex;
  width: calc(100% - var(--strip-gutter) * 2);
  min-width: calc(var(--site-min) - 2px);
  margin: 0 auto;
}
.split-media { flex: 629 0 0; overflow: hidden; }
.split-media img { display: block; width: 100%; height: var(--media-h, auto); object-fit: cover; }
.split-body { flex: 649 1 0; display: flex; flex-direction: column; }
.split--flip .split-media { order: 2; }
.split--flip .split-body { order: 1; }

.split-body-inner { width: 478px; }
.split:not(.split--flip) .split-body-inner { margin-left: 96px; }
.split--flip .split-body-inner { margin-left: 76px; }

.section-title {
  color: var(--green);
  font: 400 30px/36px var(--font);
  font-weight: 700;
}
.section-title + p,
.section-title + .rte { margin-top: 22px; }

.rte p + p { margin-top: 22px; }
.rte a { color: var(--green); font-weight: 700; text-decoration: none; }
.rte a:hover { text-decoration: underline; }

/* Call-to-action band. */
.cta-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 219px;
  background: var(--lime);
  text-align: center;
}
.cta-band h2 {
  color: #fff;
  font: 400 30px/36px var(--font);
  font-weight: 700;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  padding: 0 22px;
  background: var(--green);
  color: #fff;
  font: 400 16px/1 var(--font);
  letter-spacing: .8px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}
.btn:hover { transform: translateY(-1px); filter: saturate(1.04) brightness(1.02); }
.cta-band .btn { margin-top: 21px; min-width: 251px; }

/* Contact card (used on /kontakt and at the foot of /über-mich). */
.contact { padding: var(--contact-top, 110px) 0 var(--contact-bottom, 30px); background: #fff; }
.contact-inner {
  display: grid;
  grid-template-columns: 477px 476px;
  align-items: start;
  width: 953px;
  margin: 0 auto;
}
.contact-card {
  width: 477px;
  min-height: 733px;
  padding: 77px 48px 12px 46px;
  background: var(--pale);
}
.contact-card h2 {
  margin: 0 0 18px;
  color: var(--green);
  font: 700 30px/1.2 var(--font);
  text-transform: uppercase;
  white-space: nowrap;
}
.contact-card p { margin: 0 0 8px; font: 400 16px/1.4 var(--font); }
.contact-card p:first-of-type { margin-bottom: 19px; font-size: 20px; }
.contact-card a { text-decoration: none; }
.contact-card form { display: grid; gap: 19px; margin-top: 21px; }
.contact-card input,
.contact-card textarea {
  width: 383px;
  padding: 13px;
  border: 2px solid var(--green);
  background: transparent;
  color: var(--ink);
  font: 15px/1.4 var(--font);
}
.contact-card textarea { height: 105px; resize: none; }
.contact-card input::placeholder,
.contact-card textarea::placeholder { color: #7f808a; opacity: 1; }
.contact-card input.is-invalid,
.contact-card textarea.is-invalid {
  border-color: #b94b32;
  box-shadow: 0 0 0 3px rgba(185, 75, 50, .14);
}
.contact-card button { width: 176px; height: 51px; }
.form-privacy { width: 375px; margin: 0; font-size: 14px; line-height: 1.4; }
.contact-media { width: 476px; height: 697px; overflow: hidden; }
.contact-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Inline form confirmation (replaces a full page navigation). */
.form-message {
  display: none;
  margin: 20px 0 18px;
  padding: 22px 24px;
  max-width: 520px;
  border: 3px solid var(--green);
  border-radius: 18px;
  background: linear-gradient(135deg, #e9fff8 0%, #f7fffd 100%);
  box-shadow: 0 16px 42px rgba(34, 104, 84, .24), 0 0 0 6px rgba(139, 213, 195, .24);
  color: var(--green-dark);
  font: 700 24px/1.25 var(--font);
  text-align: center;
}
/* .contact-card p sets a 16px body font and outranks a single class, so the
   confirmation needs to match that specificity to keep its own size. */
.contact-card .form-message { font: 700 24px/1.25 var(--font); }
.form-message.is-visible { display: block; }
.form-message::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-right: 10px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  vertical-align: middle;
}
.form-message.is-error {
  border-color: #b94b32;
  background: #fff4f0;
  box-shadow: 0 14px 34px rgba(185, 75, 50, .18), 0 0 0 6px rgba(185, 75, 50, .1);
  color: #7b2d1d;
}
.form-message.is-error::before { content: "!"; background: #b94b32; }

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

.site-footer { background: var(--green); color: #fff; }
.footer-inner {
  display: flex;
  width: calc(100% - var(--footer-gutter) * 2);
  min-width: var(--site-min);
  margin: 0 auto;
}
.footer-col-1 { flex: 326 1 0; }
.footer-col-2,
.footer-col-3 { flex: 327 1 0; }
.site-footer section { margin: 62px 0; }
.footer-col-1 section { width: 256px; margin-left: calc((100% - 326px) * .5 + 50px); }
.footer-col-2 section { width: 261px; margin-left: calc((100% - 327px) * .5 + 65px); }
.footer-col-3 section { width: 294px; margin-left: calc((100% - 327px) * .5 + 12px); }
.site-footer h2 { margin: 0 0 11px; color: #fff; font: 700 30px/1.4 var(--font); }
.site-footer p,
.site-footer a { margin: 0; color: #fff; font: 400 16px/1.4 var(--font); text-decoration: none; }
.site-footer a { display: block; }
.site-footer a:hover { opacity: .88; }

/* Back to top. */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font: 700 20px/1 var(--font);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .18s ease;
}
.to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover { background: var(--green-dark); }


/* --------------------------------------------------------------------------
   Homepage
   -------------------------------------------------------------------------- */

.home-hero { display: flex; width: 100%; min-width: var(--site-min); height: 781px; }
.home-hero-text {
  flex: 0 0 40%;
  min-width: 0;
  background: var(--pale);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: flex-start;
  padding: 256px 60px 0;
  text-align: center;
}
.home-hero-media { flex: 0 0 60%; min-width: 0; overflow: hidden; }
.home-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hero-quote {
  min-height: 90px;
  color: var(--ink);
  font: 700 25px/30px var(--font);
  transition: opacity .35s ease;
}
.hero-quote.is-switching { opacity: 0; }
.hero-welcome { width: 321px; margin: 33px 0 10px; color: var(--green); font: 700 35px/56px var(--font); }

/* The band under the hero: white on green, with a quote mark low on the left
   and high on the right, the way the original set it. */
.band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 166px;
  padding: 0 24px;
  background: var(--green);
}
.band p { color: #fff; font: 400 30px/39px var(--font); text-align: center; }
.band-mark { flex: 0 0 auto; width: 30px; height: 26px; color: var(--lime); }
.band-mark svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.band-mark--open { transform: translateY(20px); }
.band-mark--close { transform: translateY(-21px); }

/* Which of the rotating hero quotes is showing. Decorative: the quote itself
   is the content, so these carry no text and are hidden from assistive tech. */
.quote-dots {
  display: flex;
  justify-content: center;
  gap: 13px;
  /* 63px below the quote and 33px above the heading: the 96px the heading
     used to carry on its own, now split around the dots. */
  margin: 63px 0 0;
  padding: 0;
  list-style: none;
}
.quote-dots li {
  width: 8px;
  height: 8px;
  border: 1px solid var(--green);
  border-radius: 50%;
  background: var(--green);
}
.quote-dots li.is-current { background: transparent; }

.offers { position: relative; height: 551px; background: var(--pale); overflow: hidden; }
.offers > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.offers-inner { position: relative; z-index: 1; padding-top: 104px; text-align: center; }
.offers h2 { color: var(--green); font: 700 30px/36px var(--font); }
.offer-grid {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 64px;
}
.offer {
  /* Larger than the original 178px tiles, as asked, while five still fit
     the 980px minimum strip. */
  width: clamp(178px, 17.5vw, 262px);
  color: var(--ink);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.offer img { display: block; width: 100%; height: auto; aspect-ratio: 178 / 150; object-fit: cover; }
.offer span { display: block; margin-top: 14px; font: 400 16px/1.4 var(--font); }
.offer:hover { transform: translateY(-2px); }
.offer:hover span { color: var(--green); }

/* --------------------------------------------------------------------------
   Directions block (kontakt / danke) and legal page
   -------------------------------------------------------------------------- */

.directions { padding: 36px 0 21px; }
.directions-inner {
  display: grid;
  grid-template-columns: 477px 476px;
  align-items: start;
  width: 953px;
  margin: 0 auto;
}
.directions h2 { margin: 0 0 30px; color: var(--green); font: 700 30px/36px var(--font); }
.directions-lead { margin: 0 0 22px; font: 700 20px/28px var(--font); }
.directions p { font: 400 16px/22.4px var(--font); }
.directions-media { width: 475px; overflow: hidden; }
.directions-media img { display: block; width: 100%; height: auto; }

.legal { width: 980px; margin: 0 auto; padding: 120px 0 100px; }
.legal h1 { margin: 0 0 22px; color: var(--green); font: 700 30px/36px var(--font); }
.legal h2 { margin: 34px 0 12px; color: var(--green); font: 700 22px/28px var(--font); }
.legal p { margin: 0 0 12px; font: 400 16px/22.4px var(--font); }
.legal a { color: var(--green); }

/* --------------------------------------------------------------------------
   Über mich: portrait, qualifications, certificates
   -------------------------------------------------------------------------- */

.about { padding: 100px 0 88px; }
.about-inner {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 76px;
  align-items: start;
  width: min(1180px, 100% - 40px);
  margin: 0 auto;
}
.about-portrait { width: 480px; height: 725px; object-fit: cover; object-position: center top; display: block; }
.about-text { max-width: 520px; }
.about-text h2 { color: var(--green); font: 700 34px/1.1 var(--font); letter-spacing: .02em; text-transform: uppercase; }
.about-text .lead { margin: 9px 0 36px; font-size: 18px; color: #333; }
.about-text p { margin: 0 0 20px; font: 400 16px/1.48 var(--font); }
.about-text .btn { margin-top: 16px; }

.education { position: relative; height: 482px; overflow: hidden; background: var(--green); color: #fff; }
.education > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.education::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(34,104,84,.84) 0%, rgba(34,104,84,.78) 48%, rgba(34,104,84,.18) 100%);
}
.education-inner {
  position: relative;
  z-index: 1;
  width: 640px;
  min-width: 640px;
  padding: 108px 0 0 max(24px, calc((100vw - 1180px) / 2 + 24px));
}
.education h2 { margin: 0 0 24px; color: #fff; font: 700 29px/1.2 var(--font); text-transform: uppercase; white-space: nowrap; }
.education p { margin: 0 0 23px; font-size: 18px; }
.education ul { margin: 0; padding: 0; list-style: none; }
.education li { position: relative; margin: 0 0 9px; padding-left: 32px; font-size: 17px; line-height: 1.45; white-space: nowrap; }
.education li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 13px solid #fff;
}

.certificates { padding: 84px 0 96px; text-align: center; overflow: hidden; }
.certificates h2 { margin: 0 0 56px; color: var(--green); font: 700 34px/1.2 var(--font); letter-spacing: .02em; text-transform: uppercase; }
/* The four certificates keep their original relative widths and scale to the
   available space; the old layout fixed their height and clipped the first one. */
.certificate-row { display: grid; grid-template-columns: 344fr 332fr 370fr 332fr; gap: 29px;
  align-items: start; width: min(1400px, 100% - 40px); margin: 0 auto; }
.certificate-row a { display: block; cursor: zoom-in; }
.certificate-row img { display: block; width: 100%; height: auto; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 58px 18px 24px;
  background: rgba(12, 20, 18, .94);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox figure { margin: 0; text-align: center; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 132px); object-fit: contain; background: #fff; box-shadow: 0 18px 48px rgba(0,0,0,.35); }
.lightbox figcaption { margin-top: 14px; color: #fff; font-size: 15px; }
.lightbox-close {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--green-dark);
  font: 700 32px/1 var(--font);
  cursor: pointer;
}
body.is-lightbox-open { overflow: hidden; }
.lightbox-nav {
  position: fixed;
  top: 50%;
  z-index: 2;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--green-dark);
  font: 700 36px/1 var(--font);
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
}
.lightbox-nav:hover { background: #fff; }
.lightbox-nav[hidden] { display: none; }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }

.split-actions { margin-top: 24px; }
.split-actions + * { margin-top: 28px; }

/* --------------------------------------------------------------------------
   Mobile — single codebase, no user-agent switching
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .topbar { display: none; }

  .site-header { height: 124px; box-shadow: 0 2px 14px rgba(0, 0, 0, .05); }
  .header-inner {
    display: block;
    position: relative;
    width: 100%;
    min-width: 0;
    height: 124px;
    padding: 0 20px;
  }
  .brand-col { display: block; }
  /* Stop short of the burger so a thumb aiming at the menu cannot land on
     the home link instead. */
  .brand { width: auto; max-width: calc(100% - 76px); margin: 0; padding-top: 20px; }
  .brand { padding-top: 22px; }
  .brand-name { font-size: clamp(25px, 7.8vw, 32px); line-height: 1.1; letter-spacing: .03em; }
  .brand-claim { margin-top: 3px; font-size: clamp(15px, 4.6vw, 19px); line-height: 1.25; }
  .nav-col { display: none; }

  /* The bars stay 22x18 where they were; the padding grows the area a thumb
     has to hit to 46x44 without moving them, which is what the old mobile
     header gave it (a 50x50 target around a 22x20 glyph). The offsets are
     reduced by the padding so the glyph lands in the same place. */
  .burger {
    display: flex;
    position: absolute;
    right: 8px;
    top: 40px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 22px;
    height: 18px;
    padding: 13px 12px;
    box-sizing: content-box;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .burger span {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: #111;
    transition: transform .25s ease, opacity .2s ease;
    transform-origin: center;
  }
  /* Open: the outer bars swing into an X over the hidden middle one. The
     gap is 5px and a bar 2px, so each outer bar sits 7px from the centre. */
  .menu-toggle:checked + .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle:checked + .burger span:nth-child(2) { opacity: 0; }
  .menu-toggle:checked + .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    display: none;
    position: absolute;
    top: 124px;
    left: 0;
    right: 0;
    z-index: 999;
    min-height: calc(100vh - 124px);
    padding: 48px 28px 40px;
    background: var(--green);
    overflow: auto;
  }
  .mobile-menu a {
    display: block;
    padding: 15px 0;
    color: #fff;
    font: 400 23px/1.3 var(--font);
    text-align: center;
    text-decoration: none;
  }
  .mobile-menu a[aria-current="page"],
  .mobile-menu a:hover { color: #cfd942; }
  .menu-toggle:checked ~ .mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .hero { height: 310px; }
  .hero h1,
  .hero h2 { font-size: 36px; line-height: 1.2; padding: 0 20px; }
  .hero--tinted h1,
  .hero--tinted h2 { font-size: 36px; }

  /* One column, in source order: photograph then its text. That is the order
     the old mobile homepage uses. The old mobile service pages are a separate,
     reduced design that drops some of the photographs altogether, so there is
     no consistent order there to copy — see review/README.md. */
  .split {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0 20px;
  }
  .page-body { padding: 44px 0 40px; }
  .split + .split { margin-top: 40px; }
  .split-media img { width: 100%; height: auto; max-height: 420px; }
  .rte ul { padding-left: 32px; padding-right: 10px; }
  .rte li { padding-left: 5px; }
  .split-body-inner,
  .split:not(.split--flip) .split-body-inner,
  .split--flip .split-body-inner { width: auto; margin: 28px 0 0; }
  /* The stacked halves need air between them in both orders; without this the
     row's button sits flush against the photograph that follows it. */
  .split-body + .split-media { display: block; margin-top: 28px; }
  /* Rows whose photograph sits on the right on desktop still put it above
     the text on a phone, so every photograph introduces its own section
     instead of trailing the previous one. */
  .split--flip { display: flex; flex-direction: column; }
  .split--flip .split-media { order: -1; flex: none; margin-top: 0; }
  .split--flip .split-body { order: 0; flex: none; }
  .section-title { font-size: 25px; line-height: 1.2; }
  /* 16px is comfortable in a 478px column and cramped in a 350px one. */
  .rte, .rte p, .about-text p { font-size: 18px; line-height: 1.55; }
  body:not(.page-home) .rte,
  body:not(.page-home) .rte p,
  body:not(.page-home) .rte li,
  body:not(.page-home) .about-text p { font-size: 20px; line-height: 1.55; }
  .rte p + p { margin-top: 20px; }
  .rte .lead-question { font-weight: 700; }

  .cta-band { height: auto; padding: 44px 20px; }
  .cta-band h2 { font-size: 24px; line-height: 1.25; }
  .cta-band .btn { width: 100%; min-width: 0; }

  .contact { padding: 48px 20px; background: #fff; }
  .contact-inner { display: block; width: 100%; }
  /* The old mobile pages show this photograph below the form; it was hidden
     here, which lost it on phones only. It keeps its own proportions and is
     capped so it cannot take over the screen. */
  .contact-media {
    width: 100%;
    height: auto;
    max-height: 460px;
    margin-top: 28px;
  }
  .contact-media img { height: auto; max-height: 460px; object-position: 50% 20%; }
  body.page-home .contact-media,
  body.page-about .contact-media { display: none; }
  .contact-card {
    width: auto;
    min-height: 0;
    padding: 24px 20px;
    background: var(--pale);
  }
  .contact-card h2 { font-size: 27px; white-space: normal; }
  .contact-card input,
  .contact-card textarea { width: 100%; }
  .form-privacy { width: 100%; }
  .contact-card button { width: 100%; }
  .form-message,
  .contact-card .form-message { font-size: 21px; margin: 20px auto 18px; padding: 20px 16px; }

  .footer-inner {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 42px 24px;
  }
  .footer-col-1,
  .footer-col-2,
  .footer-col-3 { width: auto; }
  .site-footer section,
  .footer-col-1 section,
  .footer-col-2 section,
  .footer-col-3 section { width: auto; margin: 0 0 28px; }
  .site-footer h2 { font-size: 25px; }

  /* The narrow layout leads with the photograph, as the old mobile site did;
     the desktop layout has it beside the text on the right. */
  .home-hero { display: flex; flex-direction: column; height: auto; min-width: 0; }
  .home-hero-media { order: -1; }
  .home-hero-text { padding: 44px 20px; }
  .hero-quote { font-size: 20px; line-height: 26px; }
  .quote-dots { margin-top: 26px; }
  .hero-welcome { margin: 26px 0 28px; font-size: 28px; line-height: 1.2; }
  .home-hero-media img { height: 320px; }

  .to-top { width: 50px; height: 50px; font-size: 24px; }

  body.page-einzeltherapie img[src*="einzeltherapie-portrait"] { object-position: 25% center; }
  /* Phone banners are about a third as wide as the photograph, so each one
     is pointed at the people in it. */
  body.page-paarberatung .hero img { object-position: 26% 50%; }
  body.page-einzeltherapie .hero img { object-position: 4% 40%; }
  body.page-berufscoaching .hero img { object-position: 92% 50% !important; }
  body.page-traumatherapie .hero img { object-position: 35% 50%; }
  body.page-berufscoaching img[src*="berufscoaching-desk"] { display: none; }
  /* Shown whole on a phone: the hand at the window, both people on the
     sofa and both in the bed. These are uncropped landscape originals. */
  body.page-weitere img[src*="weitere-trauer"],
  body.page-weitere img[src*="weitere-trennung"],
  body.page-weitere img[src*="weitere-sexual"] { height: auto; max-height: none; object-fit: contain; }

  .band { height: auto; padding: 34px 20px; }
  .band p { font-size: 22px; line-height: 1.3; }

  .offers { height: auto; padding-bottom: 44px; }
  .offers-inner { padding-top: 44px; }
  .offers h2 { font-size: 25px; }
  .offer-grid { flex-wrap: wrap; gap: 18px; margin-top: 32px; padding: 0 20px; }
  /* One offer per row, as the old mobile pages list them. */
  .offer { width: 100%; }
  .offer img { width: 100%; height: 240px; aspect-ratio: auto; }

  .directions { padding: 34px 0 40px; }
  .directions-inner { display: block; width: 100%; padding: 0 20px; }
  .directions-media { width: 100%; margin-top: 24px; }

  .legal { width: 100%; padding: 44px 20px 60px; }

  .about { padding: 46px 0; }
  .about-inner { display: block; width: 100%; padding: 0 20px; }
  .about-portrait { width: 100%; height: auto; max-height: 560px; }
  .about-text { max-width: none; padding-top: 28px; }
  .about-text h2 { font-size: 28px; }

  .education { height: auto; min-height: 0; }
  .education::after { background: rgba(34, 104, 84, .78); }
  .education-inner { width: auto; min-width: 0; padding: 58px 34px; }
  .education h2 { font-size: 25px; white-space: normal; }
  .education li { white-space: normal; font-size: 16px; padding-left: 38px; }

  .certificates { padding: 54px 0 62px; }
  .certificates h2 { font-size: 30px; margin-bottom: 30px; }
  .certificate-row { grid-template-columns: 1fr; gap: 22px; width: 100%; padding: 0 34px; }
  .certificate-row img { width: 100%; height: auto; }
  .lightbox { padding: 64px 8px 24px; }
  .lightbox-nav { width: 44px; height: 44px; font-size: 30px; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}