/* Entwurf E "Mandat": Schweizer Raster mit kräftigem Ultramarin statt gedecktem Navy.
   Schwarzweiss-Porträt wie im Geschäftsbericht, Ergebnisse als Tombstones (die Kacheln, mit
   denen Investmentbanken abgeschlossene Mandate ausweisen; Vorbild Perella Weinberg, Lazard).
   Ein feines Spaltenraster liegt sichtbar unter den hellen Abschnitten, wie ein Tabellenblatt.
   Eine Schrift: Archivo (variabel in Gewicht und Breite). */

@font-face {
  font-family: "Archivo";
  src: url("../../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --ultra: #1c3f94;
  --ultra-deep: #132e6f;
  --sky: #c7d5f5;
  --ink: #0c1424;
  --muted: #4b5568;
  --paper: #ffffff;
  --mist: #f4f6fa;
  --grid: #e9edf3;
  --rule: #d6dce6;
  --on-ultra-rule: rgba(255, 255, 255, 0.22);

  --sans: "Archivo", Arial, sans-serif;

  --step--1: 0.9375rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.1rem, 1.04rem + 0.25vw, 1.22rem);
  --step-2: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem);
  --step-3: clamp(1.7rem, 1.35rem + 1.2vw, 2.35rem);
  --step-4: clamp(2.2rem, 1.5rem + 2.3vw, 3.35rem);

  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --section: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --measure: 36rem;
  --header-h: 4.25rem;
  /* Überall so viele Linien wie Inhaltsspalten, sonst laufen sie durch Text. Jeder Block
     setzt --cols passend zu seinen eigenen Umbrüchen, siehe unten. */
  --cols: 1;
  /* Abstand zwischen Rasterlinie und Spaltenbeginn. Das Raster ist um diesen Wert nach links
     versetzt, damit jede Spalte (Hälften, Drittel, Viertel) knapp rechts einer Linie beginnt. */
  --inset: 0.9rem;
}

.credentials-bar { --cols: 2; }

@media (min-width: 40em) {
  .situations__list,
  .ledger { --cols: 2; }
}

@media (min-width: 56em) {
  .credentials-bar { --cols: 4; }
  .ledger { --cols: 3; }
}

@media (min-width: 60em) {
  .offer__grid { --cols: 3; }
}

@media (min-width: 64em) {
  .situations__list { --cols: 3; }
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

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

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

a {
  color: var(--ultra);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--ultra-deep);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--ultra);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  font-stretch: 90%;
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-1);
  font-weight: 620;
  line-height: 1.3;
}

p {
  text-wrap: pretty;
}

strong {
  font-weight: 620;
}

.wrap {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  background: var(--paper);
  color: var(--ink);
  font-weight: 620;
}

.skip-link:focus {
  top: 1rem;
}

.section {
  padding-block: var(--section);
}

.section__head {
  max-width: 40rem;
}

.intro {
  margin-top: 0.9rem;
  color: var(--muted);
  max-width: 30rem;
}

.split {
  display: grid;
  gap: 2rem;
}

@media (min-width: 56em) {
  .split {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: 0;
  }

  .split > :first-child {
    padding-right: 3rem;
  }
}

/* ------------------------------------------------------------------ Raster */

/* Feine Spaltenlinien unter den hellen Abschnitten, exakt auf den Inhaltsspalten
   (Drittel auf dem Desktop, Viertel bei den Qualifikationen, Hälften darunter). Rein dekorativ,
   daher als Hintergrund-Pseudoelement. Bei Abschnitten mit Titel und Einleitung beginnt das
   Raster erst beim Inhalt, wie eine Tabelle unter ihrer Überschrift, und läuft bis zum
   Abschnittsende. So kreuzt keine Linie einen Titel. Die Fragen bleiben ohne Raster, weil
   die aufgeklappten Antworten über zwei Spalten laufen. */
.credentials-bar,
.situations__list,
.offer__grid,
.ledger {
  position: relative;
  isolation: isolate;
}

.credentials-bar::before,
.situations__list::before,
.offer__grid::before,
.ledger::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: min(100% - 2 * var(--gutter), 76rem - 2 * var(--gutter));
  margin-inline: auto;
  /* Schlusslinie als eigene Ebene statt border-right, damit die Spaltenlinien die volle Breite
     teilen und genau auf den Kachelrahmen liegen. */
  background:
    linear-gradient(to left, var(--grid) 0 1px, transparent 1px),
    repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px calc(100% / var(--cols)));
  transform: translateX(calc(-1 * var(--inset)));
  pointer-events: none;
}

/* Im Inhalt: Breite der Inhaltsspalte, nach unten bis zum Abschnittsende verlängert. */
.situations__list::before,
.offer__grid::before,
.ledger::before {
  bottom: calc(-1 * var(--section));
  width: 100%;
}

/* Die Kacheln sind schon um --inset nach links versetzt, ihr Raster nicht noch einmal. */
.ledger::before {
  transform: none;
}

/* ------------------------------------------------------------------ Kopf */

.site-header {
  position: relative;
  z-index: 10;
  background: var(--ultra);
  color: var(--paper);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  padding-block: 0.9rem;
}

.wordmark {
  display: block;
  flex: none;
  line-height: 0;
}

.wordmark img {
  display: block;
  width: auto;
  /* 36 px, auf schmalen Handys kleiner, damit Logo und Kontakt-Knopf nebeneinander passen */
  height: clamp(1.75rem, 1.2rem + 3vw, 2.25rem);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1.4rem;
  font-size: var(--step--1);
  font-weight: 500;
}

.site-header a {
  color: inherit;
  text-decoration: none;
}

.nav a:hover {
  color: var(--sky);
}

.nav .nav__cta {
  padding: 0.4rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav .nav__cta:hover {
  background: var(--paper);
  color: var(--ultra);
}

.site-header :focus-visible,
.hero :focus-visible,
.contact :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--paper);
}

@media (max-width: 39.99em) {
  .site-header__inner {
    flex-wrap: nowrap;
  }

  .nav li:not(:last-child) {
    display: none;
  }
}

@media (min-width: 48em) {
  html {
    scroll-padding-top: calc(var(--header-h) + 0.5rem);
  }

  .site-header {
    position: sticky;
    top: 0;
  }

  .site-header__inner {
    min-height: var(--header-h);
    padding-block: 0;
  }
}

/* ------------------------------------------------------------------ Hero */

/* Ultramarin-Feld; das Foto steht wie ein Abzug auf seiner Unterkante. */
.hero {
  background: var(--ultra);
  color: var(--paper);
}

.hero__inner {
  display: grid;
  gap: 2rem;
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.hero__text {
  padding-bottom: 0.5rem;
}

.hero h1 {
  font-size: var(--step-4);
  font-stretch: 88%;
  font-weight: 640;
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 16ch;
}

.hero__lead {
  margin-top: 1.25rem;
  max-width: 34rem;
  color: var(--sky);
  font-size: var(--step-1);
  line-height: 1.55;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
  margin-top: 1.75rem;
}

.button {
  display: inline-block;
  padding: 0.8rem 1.3rem;
  background: var(--paper);
  color: var(--ultra);
  font-weight: 640;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.button:hover {
  background: var(--sky);
  color: var(--ultra-deep);
  text-decoration: none;
}

.link-quiet {
  color: var(--paper);
  font-weight: 500;
  font-size: 1rem;
}

.link-quiet:hover {
  color: var(--sky);
}

.hero__photo {
  align-self: end;
}

/* Desktop: das Foto reicht von der Oberkante des Titels bis auf die Unterkante des Felds. */
@media (min-width: 56em) {
  .hero__photo {
    align-self: stretch;
    display: flex;
  }

  .hero__photo picture {
    display: block;
    width: 100%;
  }

  .hero__photo img {
    height: 100%;
    min-height: 18rem;
    aspect-ratio: auto;
  }
}

.hero__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 56em) {
  .hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 3rem;
    align-items: center;
  }

  .hero__text {
    padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  }
}

/* ------------------------------------------------------------------ Qualifikationen */

.credentials-bar {
  border-bottom: 1px solid var(--rule);
}

.credentials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 0;
  padding-block: 1.2rem;
  font-size: var(--step--1);
  line-height: 1.4;
}

.credentials li {
  padding-right: calc(2 * var(--inset));
}

.credentials strong {
  display: block;
}

.credentials span {
  color: var(--muted);
}

@media (min-width: 56em) {
  .credentials {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ Wann Sie mich beiziehen */

.situations__list {
  display: grid;
  gap: 1.75rem 0;
  margin-top: 2.25rem;
}

/* Spalten ohne Zwischenraum: Sie beginnen genau auf den Drittel- und Viertellinien, der
   Abstand zur nächsten Spalte entsteht durch Innenabstand rechts. Die obere Linie ist ein
   Hintergrund, damit sie vor der nächsten Spalte endet. */
.situations__list li,
.offer__item {
  padding-top: 1rem;
  padding-right: calc(2 * var(--inset));
  background: linear-gradient(var(--ink), var(--ink)) top left / calc(100% - 2 * var(--inset)) 2px no-repeat;
}

.situations__list p {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: var(--step--1);
  max-width: 32rem;
}

@media (min-width: 40em) {
  .situations__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .situations__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ Leistungen */

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

.offer__grid {
  display: grid;
  gap: 2.5rem 0;
  margin-top: 2.5rem;
}

.offer__item h3 {
  font-size: var(--step-2);
}

.offer__item > p {
  margin-top: 0.7rem;
  max-width: var(--measure);
}

.tasks {
  display: grid;
  gap: 0.3rem;
  margin-top: 1rem;
  font-size: var(--step--1);
  color: var(--muted);
}

.tasks li {
  position: relative;
  padding-left: 1.1rem;
}

.tasks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--ultra);
}

.offer__item > .offer__ref {
  margin-top: 1.1rem;
  font-size: var(--step--1);
  color: var(--muted);
}

.offer__ref strong {
  color: var(--ink);
}

@media (min-width: 60em) {
  .offer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ Ergebnisse als Tombstones */

/* Kopf oben, darunter eine Reihe Kacheln. Jede Kachel: Kennzahl gross, Erläuterung klein. */
.results .split {
  display: block;
}

/* Die Kacheln sitzen um --inset nach links versetzt, so liegen ihre Rahmen genau auf den
   Rasterlinien; der Innenabstand bringt den Text zurück auf die Spaltenkante. */
.ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;  /* sonst verbreitert der negative Rand den Block und verschiebt die Spalten */
  margin-top: 2.25rem;
  margin-left: calc(-1 * var(--inset));
}

.ledger > div {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 10.5rem;
  margin: 0 -1px -1px 0;
  padding: 1.25rem calc(2 * var(--inset)) 1.4rem var(--inset);
  border: 1px solid var(--rule);
  background: var(--paper);
}

.ledger dt {
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem);
  font-stretch: 80%;
  font-weight: 640;
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--ultra);
}

.ledger dd {
  margin-top: auto;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--muted);
}

.ledger dd strong {
  color: var(--ink);
}

@media (min-width: 40em) {
  .ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 56em) {
  .ledger {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ Bildband */

.landscape img {
  width: 100%;
  height: clamp(10rem, 22vw, 19rem);
  object-fit: cover;
  object-position: 50% 60%;
}

/* ------------------------------------------------------------------ Über mich */

.about__grid {
  display: grid;
  gap: 2.5rem;
}

.about__photo img {
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.about__text h2 {
  margin-bottom: 1.25rem;
}

.about__text > p {
  font-size: var(--step-1);
  line-height: 1.6;
  max-width: 38rem;
}

.about__text > p + p {
  margin-top: 0.9em;
}

.about__facts {
  display: grid;
  gap: 1.75rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--ink);
}

.about__facts h3 {
  margin-bottom: 0.6rem;
  font-size: var(--step--1);
}

.stations {
  font-size: var(--step--1);
  line-height: 1.5;
}

.stations li {
  display: grid;
  grid-template-columns: 7.25rem 1fr;
  gap: 1rem;
}

.stations li + li {
  margin-top: 0.55rem;
}

.year {
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  color: var(--ultra);
  white-space: nowrap;
}

.languages {
  font-size: var(--step--1);
  color: var(--muted);
}

.languages strong {
  color: var(--ink);
}

@media (min-width: 56em) {
  .about__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: 4rem;
    align-items: start;
  }

  .about__photo {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

/* ------------------------------------------------------------------ Fragen */

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq details:first-child {
  border-top: 2px solid var(--ink);
}

.faq summary {
  position: relative;
  padding: 1rem 2.5rem 1rem 0;
  font-size: var(--step-1);
  font-weight: 560;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 0.85rem;
  height: 2px;
  background: var(--ultra);
  transition: transform 0.25s ease;
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::after {
  transform: rotate(0deg);
}

.faq summary:hover {
  color: var(--ultra);
}

.faq details p {
  padding-bottom: 1.3rem;
  max-width: var(--measure);
  color: var(--muted);
}

/* ------------------------------------------------------------------ Kontakt */

.contact {
  padding-block: var(--section);
  background: var(--ultra);
  color: var(--paper);
}

.contact__grid {
  display: grid;
  gap: 2.5rem;
}

.contact__intro {
  margin-top: 0.9rem;
  max-width: 30rem;
  color: var(--sky);
}

.steps {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.25rem;
}

.steps li {
  padding-top: 0.9rem;
  border-top: 2px solid var(--paper);
}

.steps p {
  margin-top: 0.35rem;
  font-size: var(--step--1);
  color: var(--sky);
}

.contact a {
  color: var(--paper);
}

.contact a:hover {
  color: var(--sky);
}

.contact__card {
  align-self: start;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border: 1px solid var(--on-ultra-rule);
}

.contact__person {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--on-ultra-rule);
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--sky);
}

.contact__person picture {
  flex: none;
}

.contact__person img {
  width: 3.5rem;
  height: 3.5rem;
}

.contact__person strong {
  color: var(--paper);
}

.contact__list > div + div {
  margin-top: 1rem;
}

.contact__list dt {
  font-size: 0.875rem;
  color: var(--sky);
}

.contact__list dd {
  margin-top: 0.1rem;
  font-size: var(--step-1);
  font-weight: 560;
  line-height: 1.45;
}

.contact__list dd a {
  text-decoration: none;
  border-bottom: 1px solid var(--on-ultra-rule);
}

.contact__list dd a:hover {
  border-bottom-color: var(--paper);
}

.contact__card .button {
  margin-top: 1.75rem;
}

.contact .button,
.contact .button:hover {
  color: var(--ultra);
}

@media (min-width: 40em) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 56em) {
  .contact__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 4.5rem;
  }
}

/* ------------------------------------------------------------------ Fuss */

.site-footer {
  background: var(--ultra-deep);
  color: var(--sky);
  font-size: 0.875rem;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  padding-block: 1.6rem;
}

.site-footer a {
  color: var(--paper);
}

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