/* Dr. Sabine Schönwälder: Coming-Soon-Seite nach Design von Laura Willem (Desktop 1440, Mobil 390) */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-latin.woff2') format('woff2');
}

:root {
  --green: #174538;
  --lime: #def299;
  --cream: #fffcf7;
  --white: #fff;
  --line: rgba(23, 69, 56, 0.6);

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --gutter: 20px;
  --content: 1200px;
}

@media (min-width: 768px) {
  :root {
    --gutter: clamp(40px, 8.334vw, 120px);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

/* iOS-Safari färbt Statusleiste und den Bereich unter dem Seitenende mit dem body-Hintergrund,
   oben und unten immer in derselben Farbe: Dunkelgrün wie der Footer. Die Inhalte haben deshalb
   alle eine eigene Hintergrundfarbe. */
body {
  margin: 0;
  background: var(--green);
  color: var(--green);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 28px;
  font-optical-sizing: none;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Inhalt füllt den Bildschirm, der Footer sitzt auch auf kurzen Seiten unten */
body > main,
.hero--fill {
  flex: 1 0 auto;
}

body > main {
  background: var(--cream);
}

.site-footer {
  flex-shrink: 0;
}

@media (max-width: 899px) {
  body {
    letter-spacing: -0.004em;
  }
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
}

/* Hochgestelltes Sternchen (EMDR), ohne den Zeilenabstand zu verändern */
sup {
  position: relative;
  top: -0.35em;
  font-size: 0.85em;
  line-height: 0;
  vertical-align: baseline;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--green);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 10px;
}

.container {
  width: min(var(--content), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.br-desktop {
  display: none;
}

@media (min-width: 900px) {
  .br-desktop {
    display: inline;
  }
}

/* Button */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--green);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn:hover {
  background: #d2ea7f;
}

/* Weiß auf Dunkelgrün wirkt fetter: Medium und etwas Laufweite (mit Laura abgestimmt) */
.btn--dark {
  background: var(--green);
  color: var(--white);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.btn--dark:hover {
  background: #0f3329;
}

.hero__cta {
  margin-top: 36px;
}

@media (min-width: 900px) {
  .btn {
    font-size: 18px;
  }
}

/* Kopfbereich */

.hero {
  background: var(--lime);
  padding: 16.5px 0 52px;
}

.site-header {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.site-header__brand {
  font-family: var(--serif);
  letter-spacing: 0;
  font-size: 21px;
  font-weight: 600;
  line-height: 26px;
  text-decoration: none;
}

.site-header__link {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-decoration: none;
}

.site-header__link:hover,
.site-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero__title {
  margin-top: 164px;
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 56px;
  letter-spacing: 0;
}

.hero__lead {
  margin-top: 30px;
  font-size: 20px;
  line-height: 32px;
}

@media (min-width: 900px) {
  .hero {
    padding: 74px 0 109px;
  }

  .site-header {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }

  .site-header__brand {
    font-size: 35px;
    line-height: 44px;
  }

  .site-header__link {
    font-size: 18px;
    line-height: 24px;
  }

  .hero__title {
    margin-top: 188px;
    font-size: clamp(56px, 6.112vw, 88px);
    line-height: 1.091;
    letter-spacing: -0.009em;
  }

  .hero__lead {
    margin-top: 33px;
    font-size: 28px;
    line-height: 40px;
    letter-spacing: -0.005em;
  }
}

/* Einstieg Startseite: Der Bildschirmrand soll beim Öffnen nie durch Sabines Foto laufen.
   Mobil rückt der Claim so weit hoch, dass das Gesicht ganz zu sehen ist. Wo das nicht passt, endet
   das Lindgrün knapp über dem Bildschirmrand: Unten ist schon das Dunkelgrün zu sehen, das Foto
   kommt erst beim Scrollen. Ab 1240 px Höhe passt am Desktop das ganze Foto, dann bleibt alles wie entworfen. */

.hero--start {
  /* sichtbarer Streifen Dunkelgrün unter dem Lindgrün, kleiner als der Abstand bis zum Foto */
  --peek: 14px;
}

@media (min-width: 900px) {
  .hero--start {
    --peek: 72px;
  }
}

@media (max-width: 899px) {
  .hero--start {
    padding-bottom: 40px;
    /* Header, Claim, Text und Abstände bis zum Foto, abzüglich der 10 px, die unter 100svh
       noch frei sichtbar sind (in iOS-Safari gemessen) */
    --hero-rest: 406px;
  }

  /* Kinn liegt bei 67,5 % der Fotobreite unter der Fotokante */
  .hero--start .hero__title {
    margin-top: clamp(40px, 100svh - 0.675 * min(100vw - 2 * var(--gutter), 520px) - var(--hero-rest), 164px);
  }
}

@media (max-width: 899px) and (max-height: 670px), (min-width: 900px) and (max-height: 1240px) {
  .hero--start {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--peek));
    min-height: calc(100svh - var(--peek));
  }

  /* zusätzliches Lindgrün: ein Drittel über den Claim, zwei Drittel darunter */
  .hero--start .hero__body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
  }

  .hero--start .hero__body::before,
  .hero--start .hero__body::after {
    content: '';
    flex: 1;
  }

  .hero--start .hero__body::after {
    flex-grow: 2;
  }
}

/* Niedrige Handys (mini, SE): Unter 100svh zeigt iOS-Safari noch rund 100 px Seite hinter der
   Leiste. Das Foto rückt dort weiter nach unten, damit es nicht hinter der Leiste anfängt. */
@media (max-width: 899px) and (max-height: 670px) {
  .hero--start {
    padding-bottom: 52px;
  }

  .hero--start .hero__title {
    margin-top: 164px;
  }

  .hero--start + main .intro {
    padding-top: 110px;
  }
}

/* Vorstellung */

.intro {
  background: var(--green);
  color: var(--white);
  padding: 20px 0 60px;
}

.intro__photo {
  max-width: 520px;
}

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

.intro__text {
  margin-top: 34.5px;
}

.intro__name {
  font-size: 17px;
  font-weight: 700;
  line-height: 28px;
}

.intro__bio {
  margin-top: 28px;
}

.intro .btn {
  margin-top: 42.5px;
}

@media (min-width: 900px) {
  .intro {
    padding: 114px 0 123px;
  }

  .intro__grid {
    display: grid;
    grid-template-columns: 42.5% 1fr;
    align-items: end;
  }

  .intro__photo {
    width: 282px;
    max-width: 100%;
  }

  .intro__text {
    margin-top: 0;
    font-size: 22px;
    line-height: 34px;
  }

  .intro__name {
    font-size: 22px;
    line-height: 34px;
  }

  .intro__bio {
    margin-top: 25px;
    letter-spacing: -0.005em;
  }

  .intro .btn {
    margin-top: 34px;
    min-width: 282px;
  }
}

/* Somatic Leadership */

.leadership {
  padding: 52px 0 56.5px;
  scroll-margin-top: 0;
}

.section-title {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
  letter-spacing: 0;
}

.leadership__sub {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}

.leadership__blocks {
  margin-top: 36.5px;
}

.label {
  font-size: 17px;
  font-weight: 700;
  line-height: 28px;
  text-transform: uppercase;
}

.leadership__text {
  margin-top: 3px;
}

.leadership__text + .label {
  margin-top: 17px;
}

.leadership__text a {
  text-decoration: none;
}

.footnote {
  margin-top: 19px;
  font-size: 13px;
  line-height: 20px;
}

@media (min-width: 900px) {
  .leadership {
    padding: 150px 0 159px;
  }

  .leadership__grid {
    display: grid;
    grid-template-columns: 42.5% 1fr;
  }

  .leadership__grid > :first-child {
    padding-right: 24px;
  }

  .section-title {
    font-size: 40px;
    line-height: 50px;
  }

  .leadership__sub {
    margin-top: 3px;
    font-size: 22px;
    line-height: 34px;
  }

  .leadership__blocks {
    margin-top: 0;
    padding-top: 2px;
    font-size: 18px;
    line-height: 30px;
  }

  .label {
    font-size: 18px;
    line-height: 30px;
  }

  .leadership__text {
    margin-top: 4px;
  }

  .leadership__text + .label {
    margin-top: 46px;
  }

  .footnote {
    margin-top: 28px;
    font-size: 14px;
  }
}

/* Mein Angebot */

.offer__grid {
  border-top: 1px solid var(--line);
}

.offer__title {
  padding: 19px 0 18.5px;
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  text-transform: uppercase;
}

.offer__list {
  border-top: 1px solid var(--line);
}

.offer__item {
  display: grid;
  grid-template-columns: 91.5px 1fr;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.offer__icon {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 45.6px;
  margin-left: 15px;
  padding-top: 8px;
}

.offer__icon svg {
  width: 45.6px;
  height: auto;
  fill: currentColor;
}

.offer__item h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 28px;
}

@media (min-width: 900px) {
  .offer__grid {
    display: grid;
    grid-template-columns: 42.5% 1fr;
    align-items: start;
  }

  .offer__title {
    padding: 43px 0 0;
  }

  .offer__list {
    border-top: 0;
  }

  .offer__item {
    grid-template-columns: 29.565% 1fr;
    padding: 41px 0;
    font-size: 18px;
    line-height: 30px;
  }

  .offer__icon {
    width: 64.6px;
    margin-left: 0;
    padding-top: 7px;
  }

  .offer__icon svg {
    width: 64.6px;
  }

  .offer__item h3 {
    font-size: 22px;
    line-height: 34px;
  }
}

/* Abschluss */

.closing {
  padding: 52px 0 59.5px;
}

.closing .btn {
  margin-top: 23.5px;
  min-width: 258px;
}

@media (min-width: 900px) {
  .closing {
    padding: 89px 0 157px;
  }

  .closing__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    font-size: 18px;
  }

  .closing .btn {
    margin-top: 0;
    min-width: 282px;
  }
}

/* Footer */

.site-footer {
  background: var(--green);
  color: var(--white);
  padding: 56px 0 23px;
  font-size: 14px;
  line-height: 24px;
}

.site-footer a {
  text-decoration: none;
}

.site-footer__name {
  margin-bottom: 19px;
  font-family: var(--serif);
  letter-spacing: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-style: normal;
  font-weight: 500;
}

.site-footer__sep {
  display: none;
}

.site-footer__linkedin {
  margin-top: 9.5px;
}

.site-footer__linkedin svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.site-footer__legal {
  display: flex;
  gap: 20px;
  margin-top: 53.5px;
}

@media (min-width: 900px) {
  .site-footer {
    padding: 112px 0 116px;
    font-size: 16px;
  }

  .site-footer__inner {
    display: grid;
    grid-template-columns: 1fr 282px;
    align-items: start;
    gap: 32px;
  }

  .site-footer__contact {
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .site-footer__contact > :not(.site-footer__linkedin) {
    padding-top: 8px;
  }

  .site-footer__name {
    margin-bottom: 0;
  }

  .site-footer__sep {
    display: inline;
    padding: 0 9px;
  }

  .site-footer__name + .site-footer__sep {
    padding-right: 12px;
  }

  .site-footer__linkedin {
    margin: 0 0 0 17px;
  }

  .site-footer__linkedin svg {
    width: 31.5px;
    height: 31.5px;
  }

  .site-footer__legal {
    margin-top: 0;
    padding-top: 8px;
    gap: 19px;
  }
}

/* Rechtliche Seiten und 404 */

.page-head {
  background: var(--lime);
  padding: 20px 0 40px;
}

.page-head .section-title {
  margin-top: 64px;
}

@media (min-width: 900px) {
  .page-head {
    padding: 74px 0 72px;
  }

  .page-head .section-title {
    margin-top: 110px;
  }
}

.legal {
  padding: 48px 0 72px;
}

.legal__body {
  max-width: 690px;
}

.legal__body h2 {
  margin-top: 40px;
  font-size: 17px;
  font-weight: 700;
  line-height: 28px;
  text-transform: uppercase;
}

.legal__body h3 {
  margin-top: 24px;
  font-size: 17px;
  font-weight: 600;
  line-height: 28px;
}

.legal__body h4 {
  margin-top: 20px;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
}

.legal__body h2:first-child {
  margin-top: 0;
}

.legal__body p,
.legal__body ul {
  margin-top: 8px;
}

.legal__body ul {
  padding-left: 1.2em;
  list-style: disc;
}

.legal__body a {
  overflow-wrap: anywhere;
}

.legal .btn {
  margin-top: 32px;
}

@media (min-width: 900px) {
  .legal {
    padding: 96px 0 140px;
  }

  .legal__grid {
    display: grid;
    grid-template-columns: 42.5% 1fr;
  }

  .legal__body {
    grid-column: 2;
    font-size: 18px;
    line-height: 30px;
  }

  .legal__body h2,
  .legal__body h3 {
    font-size: 18px;
    line-height: 30px;
  }
}