/* ============================================================
   JACQUELINE — STYLESHEET
   ============================================================
   Kurzer Überblick, damit du dich hier zurechtfindest:

   1. Ganz unten in :root stehen alle Farben und Grundwerte als
      Variablen (--ink, --bg, --txt, ...). Das ist der schnellste
      Weg, das Farbschema der ganzen Seite zu ändern — einmal hier
      anpassen, wirkt überall, wo die Variable benutzt wird.
   2. Danach kommen kleine Grundregeln (Reset), die du normalerweise
      nicht anfassen musst.
   3. Danach folgt ein Block pro Seitenabschnitt, in derselben
      Reihenfolge wie im HTML: Hero, About, Career, Reach, Approach,
      Footer. Jeder Block ist mit einer Überschrift markiert.
   4. Ganz unten stehen zwei @media-Blöcke — das sind die Anpassungen
      für Tablet (unter 1200px) und Handy (unter 720px). Wenn du am
      Desktop-Layout etwas änderst, lohnt sich ein Blick, ob dieselbe
      Regel auch dort unten nochmal auftaucht und angepasst werden muss.

   Die grosse Wellen-/Pfeil-Grafik im Hero (die orange "Welle") wird
   nicht hier, sondern per JavaScript in main.js gezeichnet (Canvas/
   WebGL). Diese Datei bestimmt nur, wie Text und Layout DARÜBER liegen.
   ============================================================ */

:root {
  --bg: #ffffff;
  --card: #ffffff;
  --ink: #FC8A2D;
  --ink-d: #C42B34;
  --txt: #221a12;
  --dark: #C42B34;
  --dark2: #C42B34;
  --g300: #e4d8c6;
  --g400: #b9a891;
  --g500: #8a7a64;
  --g700: #4c3d2c;
  --g800: #2c2116;
  --rule: rgba(34,26,18,.15);
  --ruleD: rgba(255,255,255,.32);
  --pad: 64px;
  --gap: 8px;
  --r: 24px;
  --serif: 'Sora', ui-sans-serif, system-ui, sans-serif; /* Überschriften */
  --in: 'Inter', system-ui, sans-serif;                   /* Fliesstext */
}

/* Grund-Reset: Standard-Abstände und -Stile der Browser ausschalten,
   damit wir bei null anfangen. Hier normalerweise nichts ändern. */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--in);
  font-size: 14px;
  line-height: 20px;
  color: var(--txt);
  background: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button, input, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  outline: 0;
}
button {
  cursor: pointer;
}
ul {
  list-style: none;
}
svg {
  display: block;
}
sup {
  font-size: .75em;
  line-height: 0;
  position: relative;
  top: -.3em;
  vertical-align: baseline;
  margin-left: 1px;
}
em {
  font-style: italic;
}
/* ------------------------------------------------------------
   SEKTIONEN — Grundgerüst
   Jeder Seitenabschnitt hat die Klasse .sec plus entweder
   .sec--light (heller Papierton) oder .sec--dark (Orange).
   .sec--round* rundet die Ecken dort, wo zwei Abschnitte mit
   unterschiedlicher Hintergrundfarbe aufeinandertreffen.
   ------------------------------------------------------------ */
.sec {
  position: relative;
  padding: 128px var(--pad);
  overflow: clip;
}
.sec--light {
  background: var(--bg);
  z-index: 1;
}
.sec--dark {
  background: var(--dark);
  color: #fafafa;
  z-index: 0;
  overflow: visible;
}
.sec--dark::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -80px;
  bottom: -80px;
  background: var(--dark);
  z-index: -1;
}
.sec--round {
  border-radius: 48px;
}
.sec--round-b {
  border-radius: 0 0 48px 48px;
}
.sec--round-t {
  border-radius: 48px 48px 0 0;
}
/* ------------------------------------------------------------
   ÜBERSCHRIFTEN-GRÖSSEN
   .h-xl / .h-l / .h-m / .h-s sind fertige Textgrössen zum
   Wiederverwenden. Aktuell ist nur .h-l im Einsatz (die grosse
   Überschrift in About/Career/Reach/Approach).
   ------------------------------------------------------------ */
.h-xl {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 88px;
  line-height: .98;
  letter-spacing: -.01em;
}
.h-l {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -.01em;
}
.h-m {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.h-s {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.01em;
}
h2 em {
  font-weight: 500;
}
.sec--light h2 em {
  color: var(--ink);
}
/* vertical spine label, used at the top-left of every section header */
.tag {
  position: absolute;
  left: 0;
  top: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  font-weight: 500;
  color: var(--g500);
}
.tag::before {
  content: '';
  width: 1px;
  height: 26px;
  background: currentColor;
  opacity: .5;
}
.sec--dark .tag {
  color: rgba(255,255,255,.72);
}
/* ------------------------------------------------------------
   SCROLL-EINBLENDEN
   Jedes Element mit dem HTML-Attribut data-r startet unsichtbar
   und leicht nach unten verschoben. main.js beobachtet die Seite
   und hängt die Klasse "in" an, sobald das Element im Bildschirm
   auftaucht — das blendet es sanft ein.
   ------------------------------------------------------------ */
[data-r] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);
}
[data-r].in {
  opacity: 1;
  transform: none;
}
/* logo */
.logo {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0;
  line-height: 1;
}
.logo--sm {
  font-size: 17px;
  display: inline-block;
}
/* nav */
.nav {
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}
.nav__pill {
  width: 280px;
  height: 60px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 20px;
  background: rgba(246,241,232,.6);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 0 2px 12px rgba(34,26,18,.08);
  color: var(--ink);
}
.nav__btn {
  width: 18px;
  height: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.nav__btn i {
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s;
}
.nav__btn[aria-expanded=true] i:nth-child(1) {
  transform: translate(-1px,-1px);
}
.nav__btn[aria-expanded=true] i:nth-child(4) {
  transform: translate(1px,1px);
}
.nav__menu {
  position: absolute;
  top: 68px;
  left: 0;
  width: 280px;
  padding: 12px;
  border-radius: 20px;
  background: rgba(246,241,232,.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(34,26,18,.12);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .3s,transform .3s;
}
.nav.open .nav__menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.nav__menu a {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 24px;
  color: var(--txt);
}
.nav__menu a:hover {
  background: rgba(34,26,18,.06);
}
/* ------------------------------------------------------------
   HERO — der erste Bildschirm
   .hero__bg und .hero__mask sind <canvas>-Elemente, die von
   main.js mit der Wellen-/Pfeil-Grafik bemalt werden. Der Text
   liegt in .hero__display (normal orange) UND, unsichtbar
   übereinandergelegt, noch einmal in .hero__white — dort wird er
   weiss, genau dort, wo die orange Welle drunter liegt. Deshalb
   taucht der Hero-Text im HTML zweimal auf; das ist Absicht.
   ------------------------------------------------------------ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg);
  color: #f5f5f5;
  overflow: hidden;
  z-index: 1;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero__display {
  position: relative;
  z-index: 2;
}
.hero__white {
  position: absolute;
  inset: 0;
  padding: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 3;
  background: #000;
  mix-blend-mode: screen;
  isolation: isolate;
  pointer-events: none;
}
.hero__white .hero__display {
  z-index: auto;
}
.hero__white .hero__title {
  color: #fff;
}
.hero__mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: multiply;
}
.hero__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px,5.1vw,76px);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--ink);
}
.hero__title .l0 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px,1.4vw,21px);
  line-height: 1.4;
  letter-spacing: 0;
  margin-bottom: 20px;
}
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 8px;
  margin-bottom: -8px;
}
.hero__title .line>span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.hero__title .l0, .hero__title .l1 {
  margin-left: 0;
}
.hero__title .l2 {
  margin-left: 7%;
}
.hero__title .l3 {
  margin-left: 3%;
}
body.ready .hero__title .line>span {
  transform: none;
}
body.ready .hero__title .l2>span {
  transition-delay: .12s;
}
body.ready .hero__title .l3>span {
  transition-delay: .24s;
}
.hero__bottom {
  position: absolute;
  left: 64px;
  right: 64px;
  bottom: 64px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  column-gap: 56px;
  color: #f5f5f5;
  opacity: 0;
  transition: opacity 1s ease .6s;
}
body.ready .hero__bottom, body.ready .hero__arrow {
  opacity: 1;
}
.hero__bottom p {
  font-size: 14px;
  line-height: 20px;
}
.t-strong {
  font-weight: 500;
  color: #f5f5f5;
}
.t-soft {
  font-weight: 400;
  color: var(--g300);
}
.hero__arrow {
  position: absolute;
  right: 76px;
  bottom: 60px;
  color: #f5f5f5;
  z-index: 2;
  opacity: 0;
  transition: opacity 1s ease .8s;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
    50% {
    transform: translateY(-6px);
  }
}
/* ------------------------------------------------------------
   "TRIO" — die dreispaltige Liste mit Nummerierung (01/02/03)
   Ein Baustein, der an drei Stellen wiederverwendet wird: die drei
   Themen in About, die drei Fakten in Reach, die drei Prinzipien
   in Approach. Einmal hier ändern, wirkt an allen drei Stellen.
   ------------------------------------------------------------ */
.trio {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  column-gap: 32px;
}
.trio>li+li {
  border-left: 1px solid var(--rule);
  padding-left: 32px;
}
.trio b {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 14px;
}
.trio h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -.005em;
  margin-bottom: 8px;
  color: var(--txt);
}
.trio p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--g700);
  max-width: 280px;
}
.sec--dark .trio>li+li {
  border-left-color: var(--ruleD);
}
.sec--dark .trio b {
  color: #fff;
}
.sec--dark .trio h3 {
  color: #fff;
}
.sec--dark .trio p {
  color: rgba(255,255,255,.82);
}
/* ------------------------------------------------------------
   ABOUT — Überschrift, Text + Porträtfoto, dann die "Trio"-Liste
   .about__top ist zweispaltig: links Überschrift + Text (.about__col),
   rechts das Foto — beide Spalten oben bündig (align-items:start),
   damit das Foto auf Höhe der Überschrift beginnt statt erst weiter
   unten. Ganz normaler Textfluss, nichts freischwebend oder gedreht.
   ------------------------------------------------------------ */
.about {
  padding-top: 116px;
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 52px;
}
.about__top {
  display: grid;
  grid-template-columns: 1fr 360px;
  align-items: start;
  column-gap: 56px;
}
.about__col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.about__head {
  position: relative;
  padding-left: 48px;
  max-width: 660px;
}
.about__lede {
  max-width: 800px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--g700);
}
.about__portrait {
  border-radius: 14px;
  overflow: hidden;
}
.about__portrait img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
/* ------------------------------------------------------------
   CAREER — die ansteigende Linie mit den vier Stationen
   ------------------------------------------------------------ */
.career {
  padding-top: 116px;
  padding-bottom: 116px;
}
.career__head {
  position: relative;
  padding-left: 48px;
  max-width: 620px;
  margin-bottom: 64px;
}
/* The four chapters sit in a normal 2-column grid, so they can hold any
   amount of text without ever overlapping each other. Only used above
   1200px; below that, .timeline__stops becomes the simple one-column
   list you see on tablet/mobile (see the @media blocks further down). */
.timeline {
  width: 100%;
}
.timeline__stops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  row-gap: 40px;
}
.timeline__stops li {
  position: relative;
  padding-left: 26px;
  border-left: 1px solid var(--ruleD);
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transition: opacity .7s ease;
}
.timeline.in .timeline__stops li {
  opacity: 1;
}
.timeline__stops li:nth-child(1) {
  transition-delay: .4s;
}
.timeline__stops li:nth-child(2) {
  transition-delay: .8s;
}
.timeline__stops li:nth-child(3) {
  transition-delay: 1.2s;
}
.timeline__stops li:nth-child(4) {
  transition-delay: 1.6s;
}
.timeline__stops li::before, .timeline__stops li::after {
  content: '';
  position: absolute;
  left: -1px;
  top: 7px;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
}
.timeline__stops li::before {
  background: #fff;
}
.timeline__stops li::after {
  border: 1px solid rgba(255,255,255,.6);
  animation: tlPulse 2.6s ease-out infinite;
}
@keyframes tlPulse {
    0% {
    transform: scale(.7);
    opacity: .8;
  }
    70% {
    opacity: 0;
  }
    100% {
    transform: scale(2.3);
    opacity: 0;
  }
}
.timeline__stops b {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  color: rgba(255,255,255,.72);
}
.timeline__stops h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  color: #fff;
}
.timeline__stops p {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.82);
}
/* ------------------------------------------------------------
   REACH — Überschrift + der 3D-Globus (siehe globe.js) + "Trio"
   Alles mit .gm* gehört zu den Ortsmarkierungen auf dem Globus.
   ------------------------------------------------------------ */
.reach {
  padding-top: 112px;
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.reach__head {
  position: relative;
  padding-left: 48px;
  max-width: 640px;
}
.globe {
  position: relative;
  height: 680px;
  border-radius: var(--r);
  background: var(--card);
  overflow: hidden;
  cursor: grab;
  user-select: none;
}
.globe.is-drag {
  cursor: grabbing;
}
.globe__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
}
.globe__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.globe__hint {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;
  font-size: 12px;
  line-height: 16px;
  color: var(--g500);
  pointer-events: none;
}
.gm {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  will-change: transform,opacity;
  pointer-events: none;
}
.gm__wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
  transform: translate(-50%,-14px);
  pointer-events: auto;
  cursor: pointer;
}
.gm__pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 11px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 4px 16px rgba(244,83,15,.35);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .3px;
  white-space: nowrap;
  transition: box-shadow .45s cubic-bezier(.16,1,.3,1);
}
.gm__dot {
  position: relative;
  width: 12px;
  height: 12px;
  flex: none;
}
.gm__dot i {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%,-50%);
}
.gm__halo {
  width: 12px;
  height: 12px;
  animation: beacon 2s ease-out infinite;
}
.gm__core {
  width: 7px;
  height: 7px;
  box-shadow: 0 0 8px #fff;
  transition: width .4s cubic-bezier(.16,1,.3,1),height .4s cubic-bezier(.16,1,.3,1);
}
.gm__card {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height .55s cubic-bezier(.16,1,.3,1),opacity .45s cubic-bezier(.16,1,.3,1),margin-top .55s cubic-bezier(.16,1,.3,1);
}
.gm__card>div {
  width: 224px;
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 12px 34px rgba(244,83,15,.4);
}
.gm__card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 9px;
  display: block;
}
.gm__card p {
  font-size: 12px;
  line-height: 17px;
  white-space: normal;
}
.gm.open .gm__card {
  max-height: 300px;
  opacity: 1;
  margin-top: 8px;
}
.gm.open .gm__halo {
  animation: none;
}
.gm.open .gm__core {
  width: 10px;
  height: 10px;
}
@keyframes beacon {
    0% {
    transform: translate(-50%,-50%) scale(.5);
    opacity: .7;
  }
    70% {
    opacity: 0;
  }
    100% {
    transform: translate(-50%,-50%) scale(2.8);
    opacity: 0;
  }
}
/* ------------------------------------------------------------
   APPROACH — Überschrift, das grosse Zitat, dann die "Trio"-Liste
   ------------------------------------------------------------ */
/* CLIENT — direkt unter dem Hero: Kundenfokus gleich zu Beginn */
.client {
  padding-top: 112px;
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.client__head {
  position: relative;
  padding-left: 48px;
  max-width: 760px;
}
.client__lede {
  max-width: 560px;
  margin-top: 24px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--g700);
}
.sec--dark .client__lede {
  color: rgba(255,255,255,.85);
}
.approach {
  padding-top: 112px;
  padding-bottom: 112px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.approach__head {
  position: relative;
  padding-left: 48px;
  max-width: 560px;
}
.quote {
  max-width: 900px;
}
.quote__q {
  width: 30px;
  height: 22px;
  color: rgba(255,255,255,.85);
  margin-bottom: 18px;
}
.quote blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 44px;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: #fff;
}
.quote figcaption {
  margin-top: 22px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255,255,255,.7);
}
.quote figcaption b {
  color: #fff;
  font-weight: 600;
}
.quote figcaption i {
  font-style: normal;
  margin: 0 8px;
}
/* ------------------------------------------------------------
   FOOTER — Kontakt-Zeile, Navigation, der riesige Name als
   Hintergrundgrafik (.giant), rechtlicher Kleingedruckt-Text
   ------------------------------------------------------------ */
.contact {
  padding: 104px 64px 56px;
  margin-top: 0;
}
.contact__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.contact__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact__lead {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.35;
  color: var(--ink);
  max-width: 520px;
  margin-bottom: 16px;
}
.contact__mail {
  display: inline-block;
  width: max-content;
  font-size: 20px;
  font-weight: 500;
  border-bottom: 1px solid var(--txt);
  padding-bottom: 2px;
  transition: opacity .3s;
}
.contact__mail:hover {
  opacity: .6;
}
.contact__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.small {
  font-size: 12px;
  line-height: 16px;
  color: var(--g500);
}
.contact__nav .small {
  margin-bottom: 8px;
}
.contact__nav a {
  font-size: 16px;
  line-height: 24px;
  width: max-content;
  transition: opacity .3s;
}
.contact__nav a:hover {
  opacity: .5;
}
.giant {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  font-size: calc((100vw - 128px) / 5.4);
  line-height: .86;
  letter-spacing: -.01em;
  margin: 88px 0 0;
  user-select: none;
}
/* ============================================================
   RESPONSIVE ANPASSUNGEN
   Alles unterhalb einer bestimmten Fensterbreite wird hier
   überschrieben. Wenn du oben eine Regel änderst, prüfe, ob sie
   hier unten mit denselben Klassennamen erneut auftaucht.
   ============================================================ */
@media (max-width: 1200px) { /* Tablet und kleinere Laptops */
    .br-d {
    display: none;
  }
    :root {
    --pad: 32px;
  }
    .h-xl {
    font-size: 64px;
    line-height: 1;
  }
    .h-l {
    font-size: 42px;
    line-height: 1.12;
  }
    .hero {
    padding: 32px;
  }
    .hero__bottom {
    left: 32px;
    right: 32px;
  }
    .about__head, .career__head, .reach__head, .approach__head, .client__head {
    padding-left: 40px;
    max-width: none;
  }
    .about__top {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
    .about__portrait {
    width: 220px;
  }
    .about__lede {
    max-width: none;
  }
    .career__head {
    margin-bottom: 40px;
  }
    .timeline__stops {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
    .timeline__stops li, .timeline__stops li.up {
    /* relative statt static: der Punkt (::before/::after) ist absolut
       positioniert und braucht sein eigenes li als Bezugspunkt — bei
       static rutschen alle vier Punkte an den Seitenanfang. */
    position: relative;
    transform: none;
    width: auto;
    padding: 0 0 0 26px;
    align-items: flex-start;
    text-align: left;
    opacity: 1;
    border-left: 1px solid var(--ruleD);
  }
    .timeline__stops li::before, .timeline__stops li::after, .timeline__stops li.up::before, .timeline__stops li.up::after {
    left: -1px;
    top: 6px;
    margin: -5.5px 0 0 -5.5px;
  }
    .globe {
    height: 560px;
  }
    .trio {
    grid-template-columns: 1fr 1fr;
    row-gap: 28px;
  }
    .trio>li:nth-child(2) {
    border-left: 1px solid var(--rule);
    padding-left: 32px;
  }
    .trio>li:nth-child(3) {
    border-left: 0;
    padding-left: 0;
    grid-column: 1 / -1;
    border-top: 1px solid var(--rule);
    padding-top: 26px;
    margin-top: 2px;
  }
    .sec--dark .trio>li:nth-child(2) {
    border-left-color: var(--ruleD);
  }
    .sec--dark .trio>li:nth-child(3) {
    border-top-color: var(--ruleD);
  }
    .quote blockquote {
    font-size: 32px;
    line-height: 1.3;
  }
    .contact {
    padding: 88px 32px 48px;
  }
    .contact__lead {
    font-size: 22px;
  }
}
@media (max-width: 720px) { /* Handy */
    :root {
    --pad: 16px;
  }
    body {
    font-size: 14px;
  }
    .sec {
    padding-top: 80px;
    padding-bottom: 80px;
  }
    .h-xl {
    font-size: 44px;
    line-height: 1.05;
  }
    .h-l {
    font-size: 32px;
    line-height: 1.15;
  }
    .nav {
    top: 16px;
  }
    .hero, .hero__white {
    /* Titel unten statt in der Mitte: so bleibt oben Platz für den
       Wachstumspfeil, statt dass sich beide in der Mitte in die Quere
       kommen. Muss an beiden Stellen gleich sein — .hero__white ist die
       zweite (unsichtbare) Textkopie für den Welleneffekt, siehe HERO
       weiter oben in dieser Datei bzw. in index.html. */
    justify-content: flex-end;
  }
    .hero {
    padding: 16px;
    min-height: 640px;
    padding-bottom: 48px;
  }
    .hero__title .l0, .hero__title .l1 {
    margin-left: 0;
  }
    .hero__title .l2 {
    margin-left: 8%;
  }
    .hero__title .l3 {
    margin-left: 0;
  }
    .hero__bottom {
    left: 16px;
    right: 16px;
    bottom: 24px;
    grid-template-columns: 1fr 1fr;
    row-gap: 16px;
    column-gap: 16px;
  }
    .hero__arrow {
    display: none;
  }
    .about, .reach, .approach, .career, .client {
    padding-top: 72px;
    padding-bottom: 72px;
  }
    .about {
    gap: 40px;
  }
    .reach {
    gap: 36px;
  }
    .approach {
    gap: 36px;
  }
    .about__head, .career__head, .reach__head, .approach__head, .client__head {
    padding-left: 0;
  }
    .tag {
    position: static;
    writing-mode: horizontal-tb;
    transform: none;
    margin-bottom: 14px;
    gap: 8px;
  }
    .tag::before {
    width: 16px;
    height: 1px;
  }
    /* Foto ans Ende der Sektion statt zwischen Text und Themen-Liste:
       .about__top "verschwindet" als Box (display:contents), damit
       .about__col und .about__portrait direkte Kinder von .about
       werden und sich per order neben .about__pillars und dem
       Schlusssatz (.about__close) einreihen lassen. */
    .about__top {
    display: contents;
  }
    .about__col {
    order: 1;
  }
    .about__pillars {
    order: 2;
  }
    .about__close {
    order: 3;
  }
    .about__portrait {
    order: 4;
    width: 100%;
  }
    .trio {
    grid-template-columns: 1fr;
    row-gap: 22px;
  }
    .trio>li {
    border-left: 0!important;
    padding-left: 0!important;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
  }
    .sec--dark .trio>li {
    border-top-color: var(--ruleD);
  }
    .trio>li:first-child {
    border-top: 0;
    padding-top: 0;
  }
    .globe {
    height: 420px;
  }
    .globe__hint {
    left: 16px;
    bottom: 16px;
  }
    .quote blockquote {
    font-size: 26px;
    line-height: 1.35;
  }
    .contact {
    padding: 72px 16px 32px;
  }
    .contact__top {
    flex-direction: column;
  }
    .contact__lead {
    font-size: 22px;
    line-height: 30px;
  }
}