/* ============================================================
   FONTS . eine variable Schrift, selbst gehostet
   Instrument Sans, Achsenbereich 400 bis 600. Geometrisch, weit und
   mit flachen Schnitten, also dieselbe Bauart wie die Wortmarke.
   Zwei Dateien, zusammen 41 KB, nichts wird von Dritten geladen.
   ============================================================ */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Nicola Jansen . nicolajansen.com
   Shared stylesheet for index, impressum and datenschutz.

   THEME: the page commits deliberately to one visual world,
   black on white, per the brand brief. Every colour is painted
   explicitly so nothing borrows a host background.
   ============================================================ */

:root{
  color-scheme: light;

  /* Neutrale Graustufen ohne Farbstich: Schwarz, Weiß und dazwischen.
     Die einzige Farbe der Seite ist das Blau darunter. */
  --ink:      #101010;
  --ink-70:   #454545;
  --muted:    #6b6b6b;   /* 5.7:1 auf Weiß, erfüllt AA */
  --paper:    #ffffff;   /* es gibt nur Schwarz und Weiß, keine Zwischenfläche */
  --rule:     #dcdcdc;   /* Haarlinie */
  --frame:    #e9e9e9;   /* Bildfläche */

  /* Die eine Farbe der Marke. Royales Blau, satt genug, um zu tragen,
     dunkel genug, um Weiß mit 9:1 zu kontrastieren. Sie erscheint nur
     dort, wo etwas anklickbar, ausgewählt oder eine Ordnungszahl ist. */
  --accent:      #1f3ba8;
  --accent-deep: #16297a;   /* Hover und Aktiv */
  --accent-soft: #eef1fb;   /* zarter Fond hinter einer Auswahl */

  /* Eine Familie für alles. Der Unterschied zwischen Aussage und Text
     entsteht über Größe, Gewicht und Laufweite, nicht über zwei
     Schriften. Das ist die heute übliche und ruhigere Lösung. */
  --sans:    "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: var(--sans);

  /* Ein Radius-System mit zwei Stufen und einer Regel: Flächen und
     Medien tragen den großen Radius, Bedienelemente den kleinen,
     durchgehende Linien und Bänder bleiben kantig. */
  --r:    14px;   /* Flächen und Medien */
  --r-sm: 9px;    /* Bedienelemente */
  --r-xs: 5px;    /* kleine Marker und Kontrollkästchen */

  --pad:  clamp(20px, 5.2vw, 88px);
  --maxw: 1440px;
  --sect: clamp(72px, 11vw, 152px);

  --ease: cubic-bezier(.16,1,.3,1);
}

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

/* hidden schlaegt jede eigene display-Regel, sonst blieben die versteckten
   Formularschritte und Schaltflaechen sichtbar */
[hidden]{ display:none !important; }

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

/* Wechsel zwischen den drei Seiten als weiche Blende. Browser ohne
   Unterstützung springen wie bisher, nichts geht verloren. */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation:nj-out .28s var(--ease) both; }
  ::view-transition-new(root){ animation:nj-in .42s var(--ease) both; }
}
@keyframes nj-out{ to{ opacity:0; } }
@keyframes nj-in{ from{ opacity:0; transform:translateY(10px); } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  letter-spacing:-.003em;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

section[id]{ scroll-margin-top:104px; }  /* Platz für die schwebende Leiste */

a{ color:inherit; }

::selection{ background:var(--accent); color:var(--paper); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-xs); }

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--accent); color:var(--paper);
  padding:12px 20px; z-index:100;
  font:500 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{ left:0; }

.wrap{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ---------------------------------------------------- type roles */

.label{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}

.display{
  font-family:var(--display);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.032em;
  line-height:1.06;
  text-wrap:balance;
  margin:0;
}

.body-lg{
  font-size:clamp(16px, 1.2vw, 18.5px);
  line-height:1.65;
  text-wrap:pretty;
  color:var(--ink-70);
  max-width:52ch;
  margin:0;
}

.rule{ border:0; border-top:1px solid var(--rule); margin:0; }

.section-title{
  font-size:clamp(29px,3.8vw,52px);
  margin-bottom:clamp(36px,4.4vw,62px);
}

/* ---------------------------------------------------- buttons */

.btn{
  display:inline-block;
  background:var(--accent);
  color:var(--paper);
  border:1px solid var(--accent);
  text-decoration:none;
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:17px 32px;
  border-radius:var(--r-sm);
  white-space:nowrap;          /* a wrapped CTA is a broken CTA */
  cursor:pointer;
  transition:background .28s var(--ease), color .28s var(--ease),
             transform .28s var(--ease), box-shadow .28s var(--ease);
}
.btn:hover{
  background:var(--accent-deep);
  border-color:var(--accent-deep);
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(31,59,168,.24);   /* im Farbton des Buttons */
}
.btn:active{ transform:translateY(0); box-shadow:none; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }

.btn--ghost{
  background:transparent;
  color:var(--accent);
  border-color:var(--rule);
}
.btn--ghost:hover{ background:transparent; border-color:var(--accent); box-shadow:none; }

.btn--sm{ padding:13px 24px; font-size:11px; }

/* ---------------------------------------------------- logo marks
   The real artwork lives in images/. The typographic stand-ins stay in
   the markup only as a fallback: if a file ever goes missing the page
   still reads, it does not show a broken image.                     */

.mark{ display:block; line-height:0; flex:none; }
.mark img{ width:auto; }
.mark img ~ .monogram{ display:none; }

.monogram{ display:block; }
.monogram circle{ fill:none; stroke:var(--ink); }
.monogram text{
  fill:var(--ink);
  font-family:var(--display);
  font-weight:500;
}

/* ============================================================
   NAV
   ============================================================ */

/* Die Leiste schwebt über dem Inhalt, statt eine eigene Zeile zu
   belegen. Der Kontakt-Button sitzt abgesetzt rechts und bleibt auf
   jeder Scrollhöhe erreichbar. */
.nav{
  position:fixed;
  top:clamp(10px,1.4vw,20px);
  left:0; right:0;
  z-index:60;
  pointer-events:none;              /* nur die Leiste selbst fängt Klicks */
}
.nav__inner{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.nav__bar{ pointer-events:auto; }

.nav__bar{
  flex:1;                            /* eine Leiste über die volle Satzbreite */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(18px,2.4vw,38px);
  height:clamp(52px,4.4vw,62px);
  padding-inline:clamp(18px,1.8vw,26px);
  background:rgba(255,255,255,.76);
  border:1px solid var(--rule);
  border-radius:var(--r);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-stuck .nav__bar{
  background:rgba(255,255,255,.93);
  box-shadow:0 10px 30px rgba(0,0,0,.07);
}

/* Beim Pfeil geht es um die Richtung, nicht um Dekoration */
.arrow{ display:inline-block; margin-left:.5em; transition:transform .28s var(--ease); }
.btn:hover .arrow{ transform:translate(2px,-2px); }

@media (prefers-reduced-transparency: reduce){
  .nav__bar{ background:var(--paper); backdrop-filter:none; -webkit-backdrop-filter:none; }
}

.nav__brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
  flex:none;
}
.nav__brand .monogram{ width:34px; height:34px; }
.nav__brand .mark img{ height:34px; }

.nav__brand-name{
  display:block;
  font-family:var(--display);
  font-weight:500;
  font-size:19px;
  letter-spacing:-.03em;
  line-height:1;
  white-space:nowrap;
}
.nav__brand-name img{ height:19px; width:auto; }
.nav__brand-name img ~ .nav__brand-text{ display:none; }

.nav__links{
  display:flex; align-items:center; gap:clamp(16px,2.3vw,34px);
  list-style:none; margin:0; padding:0;
}
.nav__links a{
  text-decoration:none;
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-70);
  white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav__links a:hover{ color:var(--accent); }

@media (max-width:880px){
  .nav__links{ display:none; }
  .nav__bar{ gap:12px; }
}
/* Auf schmalen Geräten teilen sich Leiste und Button die Zeile. Die
   Wortmarke weicht, das Monogramm trägt die Marke allein. */
@media (max-width:640px){
  .nav__bar{ padding-inline:16px; height:50px; }
  .nav__brand .monogram,
  .nav__brand .mark img{ height:30px; width:30px; }
}

/* ============================================================
   IMAGE FRAMES
   A frame renders a labelled placeholder until a real photo is
   dropped into /images. The <img> removes itself if the file is
   absent, so the layout never shows a broken-image icon.
   ============================================================ */

.frame{
  position:relative;
  border-radius:var(--r);
  background:var(--frame);
  overflow:hidden;
  aspect-ratio:var(--ar, 4 / 5);
}
.frame img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.frame__note{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:6px;
  text-align:center;
  padding:16px;
  color:#8a8a8a;
  font-size:10px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.frame__note::before{
  content:"";
  width:26px; height:1px;
  background:#c2c2c2;
  margin-bottom:4px;
}
.frame img + .frame__note{ display:none; }

/* ============================================================
   HERO . full-bleed image band, then the thesis
   ============================================================ */

.hero{ padding-bottom:clamp(44px, 5.5vw, 84px); }

/* Aussage links, Bild rechts. Die Leiste schwebt darüber, deshalb
   trägt der Hero oben den Platz für sie selbst. */
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px, 4.4vw, 72px);
  align-items:center;
  padding-top:clamp(96px, 11vw, 148px);
}

.hero__lede{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(22px, 2.6vw, 32px);
}

/* the thesis of the page: what she does, in the brand's display face.
   Largest type on the page, everything below steps down from here. */
.hero__title{
  font-size:clamp(30px, 4.1vw, 60px);
  line-height:1.12;
  letter-spacing:-.022em;
  margin:0;
}

@media (max-width:900px){
  .hero__grid{
    grid-template-columns:1fr;
    gap:clamp(28px,5vw,40px);
    align-items:start;
    padding-top:clamp(88px,20vw,120px);
  }
}

/* ============================================================
   BRAND WALL
   ============================================================ */

/* Der eine bewusste Farbwechsel der Seite: ein dunkles Band, in dem die
   Logos weiß stehen. Alles andere bleibt schwarz auf weiß. */
.brands{
  background:var(--ink);
  color:var(--paper);
  padding-block:clamp(56px,7vw,104px) clamp(26px,3vw,44px);
  margin-block:0 clamp(20px,3vw,44px);
  overflow:hidden;
}

.brands__claim{
  font-size:clamp(27px,3.9vw,56px);
  margin:0 0 clamp(20px,2.2vw,30px);
  color:var(--paper);
}

/* Fußnote: steht nach dem Laufband klein in der rechten unteren Ecke des
   Bandes, damit die Marken selbst die Fläche tragen. */
.brands__note{
  text-wrap:pretty;
  margin:clamp(38px,4.8vw,72px) 0 0 auto;
  max-width:34ch;
  font-size:9.5px;
  line-height:1.62;
  letter-spacing:.01em;
  text-align:right;
  color:#6a6a6a;
}
@media (max-width:640px){
  .brands__note{ margin-left:0; text-align:left; max-width:none; }
}

/* ---- Laufband
   Zwei identische Reihen wandern um genau eine Reihenbreite, dadurch
   entsteht ein nahtloser Kreis. Bewegt wird nur transform. */
.marquee{ overflow:hidden; }
.marquee__track{ display:flex; width:max-content; }
.marquee__row{
  display:flex;
  align-items:center;
  gap:clamp(52px,6.5vw,110px);
  /* halber Abstand an beiden Enden: das Band bleibt nahtlos und das
     erste Logo klebt nicht am Bildschirmrand */
  padding-inline:clamp(26px,3.25vw,55px);
}

@media (prefers-reduced-motion: no-preference){
  .marquee__track{ animation:nj-marquee 52s linear infinite; }
  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track{ animation-play-state:paused; }
}
@keyframes nj-marquee{ to{ transform:translateX(-50%); } }
@keyframes nj-rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes nj-unmask{
  from{ clip-path:inset(-15% 0 102% 0); transform:translateY(.1em); }
  to{ clip-path:inset(-15% 0 -18% 0); transform:none; }
}
@keyframes nj-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes nj-zoom{ from{ transform:scale(1.07); } to{ transform:none; } }

.brand{
  flex:none;
  display:flex;
  flex-direction:column;      /* name over qualifier, not beside it */
  align-items:center;
  justify-content:center;
  min-height:56px;
  color:var(--paper);
  text-align:center;
  opacity:.9;
  transition:opacity .3s var(--ease);
}
.brand{ transition:opacity .3s var(--ease), transform .3s var(--ease); }
.marquee:hover .brand{ opacity:.35; }
.marquee:hover .brand:hover{ opacity:1; transform:scale(1.06); }

/* Die Dateien sind schwarze Zeichnung auf Transparenz. Umgekehrt ergibt
   das exakt die weiße Variante, auch bei den Flächenlogos, deren
   Schrift ausgespart ist. */
.brand img{ filter:invert(1); }

.brand b{ font-weight:inherit; display:block; }
.brand small{ font-size:inherit; }

/* Jede Datei ist beschnitten und auf dieselbe Fläche normiert. Gesetzt wird
   die HÖHE, die Breite folgt dem Seitenverhältnis. Das ist der Punkt:
   Mit einer blossen Maximalbreite bliebe der Kasten so breit wie die
   ungebremste Zeichnung, und neben einer sehr flachen Wortmarke wie MORPHE
   (Verhältnis 9:1) klaffte eine Lücke von zweihundert Pixeln.
   Die Höhen sind einzeln gesetzt: ein Kreis trägt bei gleicher Fläche
   weniger weit als ein breiter Schriftzug. */
.brand img{
  width:auto;
  object-fit:contain;
}
.b-nivea img    { height:clamp(32px,3.45vw,50px); }
.b-t3 img       { height:clamp(31px,3.3vw,48px); }
.b-acqua img    { height:clamp(27px,2.9vw,42px); }
.b-thisplace img{ height:clamp(26px,2.75vw,40px); }
.b-baileys img  { height:clamp(22px,2.35vw,34px); }
.b-zacapa img   { height:clamp(21px,2.2vw,32px); }
.b-kiss img     { height:clamp(21px,2.2vw,32px); }
.b-toofaced img { height:clamp(19px,2.05vw,30px); }
.b-morphe img   { height:clamp(12px,1.3vw,19px); }
.brand img ~ b,
.brand img ~ small{ display:none; }

.b-nivea      { font:700 clamp(17px,1.55vw,23px)/1 var(--sans); letter-spacing:.02em; }
.b-morphe     { font:400 clamp(13px,1.15vw,17px)/1 var(--sans); letter-spacing:.4em; text-indent:.4em; }
.b-baileys    { font:500 clamp(15px,1.35vw,21px)/1 var(--display); font-style:italic; letter-spacing:.01em; }
.b-zacapa     { font:400 clamp(14px,1.3vw,20px)/1 var(--display); letter-spacing:.06em; }
.b-kiss       { font:600 clamp(15px,1.4vw,21px)/1.05 var(--sans); letter-spacing:.09em; }
.b-kiss small { display:block; font-size:.5em; font-weight:400; letter-spacing:.34em; text-indent:.34em; margin-top:3px; }
.b-baobab     { font:400 clamp(12.5px,1.15vw,17px)/1.1 var(--sans); letter-spacing:.3em; text-indent:.3em; }
.b-baobab small{ display:block; font-size:.58em; letter-spacing:.26em; text-indent:.26em; margin-top:4px; color:var(--muted); }
.b-acqua      { font:600 clamp(12px,1.12vw,16px)/1.18 var(--sans); letter-spacing:.19em; text-indent:.19em; }
.b-toofaced   { font:400 clamp(16px,1.5vw,23px)/1 var(--display); font-style:italic; letter-spacing:-.01em; }
.b-thisplace  { font:400 clamp(12.5px,1.18vw,17px)/1.18 var(--display); letter-spacing:.13em; text-indent:.13em; }
.b-t3         { font:600 clamp(17px,1.6vw,24px)/1 var(--sans); letter-spacing:-.02em; }
.b-t3 small   { display:block; font-size:.44em; font-weight:500; letter-spacing:.24em; text-indent:.24em; margin-top:3px; }

@media (max-width:520px){
  .marquee__row{ gap:44px; padding-inline:22px; }
}

/* ============================================================
   ABOUT
   ============================================================ */

.about{ padding-block:var(--sect); }

.about__grid{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(32px,5.5vw,96px);
  align-items:start;          /* portrait tops out with the headline */
}

.about__title{
  font-size:clamp(29px,3.8vw,52px);
  margin-bottom:clamp(22px,2.6vw,34px);
}
/* Bündig mit dem Bild, oben wie unten.
   Oben: die Zeilenbox beginnt rund .27em über der Versalhöhe, das wird
   zurückgenommen, damit die Oberkante von "S" und die Oberkante des
   Porträts auf einer Linie liegen.
   Unten: das Porträt läuft über die volle Höhe der Textspalte, statt auf
   halber Strecke aufzuhören. Deshalb fällt hier das Seitenverhältnis weg
   und die Spalte wird gestreckt. */
@media (min-width:861px){
  .about__title{ margin-top:-.27em; }
  .about__grid{ align-items:stretch; }
  .about__grid > .frame{ aspect-ratio:auto; }
  .about__grid > .frame img{ object-position:50% 45%; }
}

.about__quote{
  text-wrap:pretty;
  font-size:clamp(15.5px,1.22vw,18px);
  line-height:1.78;
  color:var(--ink-70);
  max-width:46ch;
  margin:0 0 clamp(22px,2.4vw,30px);
}

.about__meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  padding-top:22px;
  border-top:1px solid var(--rule);
}
.about__meta span{
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

@media (max-width:860px){ .about__grid{ grid-template-columns:1fr; gap:36px; } }

/* ============================================================
   SERVICES . numbered editorial register, not equal tiles
   ============================================================ */

.services{ padding-block:var(--sect); }

.service{
  display:grid;
  grid-template-columns:clamp(70px,7.5vw,116px) minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(16px,3vw,52px);
  align-items:start;
  padding-block:clamp(26px,3.2vw,42px);
  border-top:1px solid var(--rule);
}
.service:last-child{ border-bottom:1px solid var(--rule); }

/* Beim Überfahren rücken Ziffer und Name gemeinsam ein Stück ein. Die
   Haarlinie bleibt stehen, sonst würde das Raster wackeln. */
.service__num,
.service__name{ transition:transform .4s var(--ease), color .4s var(--ease); }
.service:hover .service__num,
.service:hover .service__name{ transform:translateX(5px); }
.service:hover .service__num{ color:var(--accent-deep); }

.service__num{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(19px,2vw,28px);
  line-height:1.1;
  color:var(--accent);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

.service__name{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(19px,1.9vw,27px);
  line-height:1.18;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}

.service--lead{ padding-block:clamp(32px,4vw,56px); }
.service--lead .service__num,
.service--lead .service__name{ font-size:clamp(21px,2.2vw,31px); }

.service__body{ display:flex; flex-direction:column; gap:clamp(14px,1.6vw,18px); }

.service__lede{
  text-wrap:pretty;
  margin:0;
  font-size:clamp(14px,1.05vw,15.5px);
  line-height:1.72;
  color:var(--ink-70);
  max-width:48ch;
}

/* Die konkreten Punkte je Leistung. Der Marker ist das einzige Blau hier
   und markiert, dass es sich um Aufzählungen handelt, nicht um Fließtext. */
.slist{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(6px,0.7vw,9px);
}
.slist li{
  position:relative;
  padding-left:19px;
  font-size:clamp(13.5px,1.02vw,15px);
  line-height:1.5;
  color:var(--ink);
}
.slist li::before{
  content:"";
  position:absolute;
  left:0;
  top:.52em;
  width:5px; height:5px;
  background:var(--accent);
}

@media (max-width:860px){
  .service{ grid-template-columns:clamp(48px,13vw,70px) minmax(0,1fr); }
  .service__body{ grid-column:2; margin-top:12px; }
}

/* ============================================================
   BENEFITS . der schwarze Abschnitt
   Vier kurze Punkte in einem Zweierraster. Was sie tut, steht in den
   Leistungen darüber, hier steht nur, was dafür spricht.
   ============================================================ */

.benefits{
  background:var(--ink);
  color:var(--paper);
  padding-block:clamp(56px,7vw,104px);

  /* Im dunklen Abschnitt gelten dieselben Rollen mit anderen Werten. */
  --rule:   #2e2e2e;
  --ink-70: #b3b3b3;
  --muted:  #9a9a9a;
}

.benefits__head{
  margin-bottom:clamp(28px,3.4vw,46px);
  text-align:center;
}

.benefits__title{
  font-size:clamp(28px,3.6vw,50px);
  margin:0 0 clamp(12px,1.4vw,18px);
  color:var(--paper);
}
.benefits__lede{
  text-wrap:pretty;
  margin:0 auto;
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.7;
  color:var(--ink-70);
  max-width:54ch;
}

/* Vier Punkte, jeder unter einer eigenen Haarlinie, geschlossen durch
   eine Linie unter dem Raster. */
.benefits-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(28px,4vw,72px);
  max-width:1000px;
  margin-inline:auto;          /* zum mittigen Kopf darüber */
  border-bottom:1px solid var(--rule);
}

.benefit{
  padding:15px 0 clamp(18px,2.2vw,26px);
  border-top:1px solid var(--rule);
}

.benefit__name{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(15.5px,1.35vw,19px);
  line-height:1.25;
  letter-spacing:-.012em;
  margin:0 0 7px;
  text-wrap:balance;
}
.benefit__text{
  text-wrap:pretty;
  margin:0;
  font-size:clamp(13.5px,1vw,14.5px);
  line-height:1.65;
  color:var(--ink-70);
  max-width:42ch;
}

@media (max-width:620px){
  .benefits-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   CONTACT + MULTISTEP FORM
   ============================================================ */

.contact{ padding-block:var(--sect); }

.contact__grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(36px,5.5vw,96px);
  align-items:start;
}

.contact__title{
  font-size:clamp(29px,3.8vw,50px);
  margin:0 0 clamp(18px,2vw,26px);
}

.contact__mark{ margin-bottom:clamp(24px,3vw,38px); }
.contact__mark .monogram{ width:clamp(64px,7vw,96px); height:clamp(64px,7vw,96px); }
.contact__mark .mark img{ height:clamp(64px,7vw,96px); }

.contact__mail{
  display:inline-block;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(17px,1.65vw,23px);
  line-height:1.2;
  letter-spacing:-.02em;
  margin-top:clamp(22px,2.6vw,32px);
  text-decoration:none;
  color:var(--accent);
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 1px;
  padding-bottom:4px;
  transition:background-size .45s var(--ease);
  overflow-wrap:anywhere;
}
.contact__mail:hover{ background-size:0% 1px; background-position:100% 100%; }

/* WhatsApp, Telefon und LinkedIn: klein und versal, wie die Sektorzeile
   im Über-mich-Teil. Blau nur auf dem, was anklickbar ist. */
.contact__more{
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  margin:clamp(20px,2.4vw,30px) 0 0;
  padding:18px 0 0;
  list-style:none;
  border-top:1px solid var(--rule);
}
.contact__more a{
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.contact__more a:hover{ color:var(--accent-deep); border-bottom-color:currentColor; }


@media (max-width:900px){
  .contact__grid{ grid-template-columns:1fr; gap:44px; }
}

/* ---- the form shell ---- */

.form{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:clamp(24px,3.4vw,44px);
}

.form__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
}
.form__step-of{
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.form__legend{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(18px,1.8vw,25px);
  line-height:1.2;
  letter-spacing:-.015em;
  margin:0;
}

.form__bar{
  height:1px;
  background:var(--rule);
  margin:18px 0 clamp(24px,3vw,34px);
  position:relative;
  overflow:hidden;
}
.form__bar span{
  position:absolute; inset:0 auto 0 0;
  background:var(--accent);
  width:33.33%;
  transition:width .45s var(--ease);
}

.step{ border:0; margin:0; padding:0; min-width:0; }

.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }

.field > label:not(.check),
.choice-set > legend{
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
}
.field__hint{ font-size:12.5px; color:var(--muted); margin:0; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  padding:13px 15px;
  width:100%;
  transition:border-color .25s var(--ease);
  appearance:none;
}
.field textarea{ min-height:118px; resize:vertical; }
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                   linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 19px) 55%, calc(100% - 13px) 55%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:42px;
}
.field input:focus,
.field select:focus,
.field textarea:focus{ border-color:var(--accent); outline:none; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--muted); }

/* Der Fehlerzustand kommt ohne Rot aus: schwarzer Rahmen gegen die
   graue Ruhelage, blauer Rahmen bleibt der Fokus. */
.field--invalid input,
.field--invalid select,
.field--invalid textarea{ border-color:var(--ink); }
.field__error{
  font-weight:600;
  font-size:12.5px;
  color:var(--ink);
  margin:0;
}
.field:not(.field--invalid) .field__error,
.choice-set:not(.field--invalid) .field__error{ display:none; }
.choice-set.field--invalid .choice{ border-color:var(--ink); }

/* the step-one choices: hairline blocks, not pills */
.choice-set{ border:0; margin:0 0 4px; padding:0; }
.choice-grid{ display:grid; gap:10px; margin-top:12px; }
@media (min-width:560px){ .choice-grid{ grid-template-columns:1fr 1fr; } }

.choice{
  position:relative;
  display:block;
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  background:var(--paper);
  padding:16px 18px;
  cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.choice:hover{ border-color:#b4b4b4; }
.choice input{
  position:absolute; opacity:0; width:0; height:0;
}
.choice__name{
  display:block;
  font-size:14px;
  font-weight:500;
  line-height:1.35;
  color:var(--ink);
}
.choice__note{
  display:block;
  font-size:12.5px;
  line-height:1.5;
  color:var(--muted);
  margin-top:3px;
}
.choice input:checked ~ .choice__name{ font-weight:600; }
.choice:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.choice input:focus-visible ~ .choice__name{ outline:2px solid var(--accent); outline-offset:3px; }

/* consent checkbox */
.check{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:11px;
  align-items:start;
  font-size:13px;
  line-height:1.6;
  color:var(--ink-70);
  cursor:pointer;
}
.check input{
  appearance:none;
  width:18px; height:18px;
  margin-top:2px;
  border:1px solid var(--rule);
  border-radius:var(--r-xs);
  background:var(--paper);
  display:grid; place-content:center;
  cursor:pointer;
}
.check input:checked{ background:var(--accent); border-color:var(--accent); }
.check input:checked::after{
  content:"";
  width:9px; height:5px;
  border:solid var(--paper);
  border-width:0 0 1.5px 1.5px;
  transform:rotate(-45deg) translate(1px,-1px);
}
.check a{ color:var(--accent); }

.form__nav{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:clamp(22px,2.6vw,30px);
  padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid var(--rule);
}
.form__nav .btn{ flex:none; }

.form__status{
  margin:14px 0 0;
  font-size:13.5px;
  line-height:1.6;
}
.form__status--err{ color:var(--ink); font-weight:600; }

/* the sent state replaces the form body */
.form__done{ text-align:left; }
.form__done h3{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(20px,1.95vw,27px);
  line-height:1.2;
  margin:0 0 10px;
}
.form__done p{ margin:0; color:var(--ink-70); font-size:15px; line-height:1.7; }

/* the honeypot: a real field, hidden from people, filled only by bots */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer{ padding-block:clamp(34px,4vw,52px); }

.footer__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px 32px;
  padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--rule);
}

.footer__id{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}

.footer__links{
  display:flex;
  flex-wrap:wrap;
  gap:14px 26px;
  list-style:none;
  margin:0;
  padding:0;
}
.footer__links a,
.footer__links button{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  transition:color .25s var(--ease);
}
.footer__links a:hover,
.footer__links button:hover{ color:var(--accent); }

/* ============================================================
   LEGAL PAGES
   ============================================================ */

.legal{ padding-top:clamp(118px,13vw,180px); padding-bottom:clamp(48px,7vw,104px); }

.legal__inner{ max-width:74ch; }

.legal__title{
  font-size:clamp(30px,4vw,52px);
  margin:0 0 clamp(28px,3.4vw,44px);
}

.legal h2{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(20px,2vw,27px);
  line-height:1.25;
  letter-spacing:-.015em;
  margin:clamp(38px,4vw,56px) 0 12px;
  padding-top:clamp(24px,2.6vw,32px);
  border-top:1px solid var(--rule);
}
.legal h3{
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:26px 0 8px;
  color:var(--ink);
}
.legal p,
.legal li{
  font-size:15px;
  line-height:1.78;
  color:var(--ink-70);
}
.legal p{ margin:0 0 14px; }
.legal ul{ margin:0 0 14px; padding-left:20px; }
.legal li{ margin-bottom:5px; }
.legal a{ color:var(--accent); }
.legal address{ font-style:normal; }
.legal code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.92em;
  border:1px solid var(--rule);
  border-radius:var(--r-xs);
  padding:0 5px;
}

/* was Nicola noch eintragen muss, in der Markenfarbe statt in Gelb */
.todo{
  display:inline-block;
  background:var(--accent-soft);
  border:1px solid #c3ccea;
  color:var(--accent-deep);
  padding:1px 7px;
  border-radius:var(--r-xs);
  font-size:13px;
  font-weight:500;
}

/* ============================================================
   COOKIE BANNER + SETTINGS
   ============================================================ */

.cc{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:80;
  background:var(--paper);
  border-top:1px solid var(--rule);
  box-shadow:0 -10px 34px rgba(0,0,0,.06);
  padding:clamp(18px,2.4vw,26px) 0;
}
.cc[hidden]{ display:none; }

.cc__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(18px,3vw,44px);
  align-items:center;
}
.cc__text{ margin:0; font-size:13.5px; line-height:1.7; color:var(--ink-70); max-width:74ch; }
.cc__text b{ color:var(--ink); font-weight:600; }
.cc__text a{ color:var(--accent); }

.cc__actions{ display:flex; flex-wrap:wrap; gap:10px; }

@media (max-width:820px){
  .cc__inner{ grid-template-columns:1fr; }
  .cc__actions .btn{ flex:1 1 auto; text-align:center; }
}

dialog.cc-dialog{
  border:0;
  border-radius:var(--r);
  overflow:hidden;
  padding:0;
  max-width:min(560px, calc(100vw - 32px));
  width:100%;
  background:var(--paper);
  color:var(--ink);
}
dialog.cc-dialog::backdrop{ background:rgba(0,0,0,.45); }

.cc-dialog__body{ padding:clamp(24px,3.4vw,38px); }
.cc-dialog__title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(20px,1.95vw,27px);
  line-height:1.2;
  margin:0 0 10px;
}
.cc-dialog__lede{ margin:0 0 22px; font-size:13.5px; line-height:1.7; color:var(--ink-70); }

.cc-cat{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:start;
  padding:18px 0;
  border-top:1px solid var(--rule);
}
.cc-cat:last-of-type{ border-bottom:1px solid var(--rule); margin-bottom:22px; }
.cc-cat h3{
  margin:0 0 4px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.cc-cat p{ margin:0; font-size:13px; line-height:1.6; color:var(--muted); }

/* a switch, square like everything else */
.sw{ position:relative; flex:none; }
.sw input{ position:absolute; opacity:0; width:0; height:0; }
.sw span{
  display:block;
  width:44px; height:24px;
  border:1px solid var(--rule);
  border-radius:999px;
  background:var(--paper);
  position:relative;
  cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.sw span::after{
  content:"";
  position:absolute;
  top:3px; left:3px;
  width:16px; height:16px;
  border-radius:50%;
  background:#b4b4b4;                       /* aus liest sich als aus */
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.sw input:checked + span{ background:var(--accent); border-color:var(--accent); }
.sw input:checked + span::after{ transform:translateX(20px); background:var(--paper); }
.sw input:disabled + span{ opacity:.45; cursor:not-allowed; }
.sw input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:3px; }

.cc-dialog__actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* ============================================================
   MOTION
   Sections rise in as they enter the viewport. The hidden state is
   only ever applied when scripting is on AND motion is welcome, and
   a safety timer reveals everything if an observer never fires, so
   the page can never end up stuck blank.
   ============================================================ */

@media (prefers-reduced-motion: no-preference){

  /* Der Hero baut sich beim Laden gestaffelt auf. Das ist keine
     Dekoration: die Reihenfolge ist die Lesereihenfolge. */
  .js .hero__lede > *{ animation:nj-rise .8s var(--ease) both; }
  .js .hero__title{ animation:nj-unmask 1.05s var(--ease) both; }
  .js .hero__lede > *:nth-child(1){ animation-delay:.06s; }
  .js .hero__lede > *:nth-child(2){ animation-delay:.14s; }
  .js .hero__lede > *:nth-child(3){ animation-delay:.24s; }
  .js .hero__lede > *:nth-child(4){ animation-delay:.34s; }
  .js .hero__media{ animation:nj-fade 1s var(--ease) .12s both; }
  .js .hero__media img{ animation:nj-zoom 1.6s var(--ease) .12s both; }

  /* Überschriften schieben sich hinter einer Kante hervor, statt nur
     einzublenden. Das ist der Übergang, der die Abschnitte verbindet. */
  .js .reveal .display,
  .js .reveal.display{
    clip-path:inset(-15% 0 102% 0);
    transform:translateY(.1em);
    transition:clip-path .95s var(--ease) .08s, transform .95s var(--ease) .08s;
  }
  .js .reveal.is-in .display,
  .js .reveal.is-in.display{
    clip-path:inset(-15% 0 -18% 0);
    transform:none;
  }

  /* Bilder in den unteren Abschnitten fahren beim Erscheinen leicht
     aus der Vergrößerung zurück. Der Ausschnitt kommt zur Ruhe. */
  .js .reveal .frame img{
    transform:scale(1.05);
    transition:transform 1.3s var(--ease);
  }
  .js .reveal.is-in .frame img{ transform:none; }

  .js .reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .75s var(--ease), transform .75s var(--ease);
  }
  .js .reveal.is-in{ opacity:1; transform:none; }

  /* children of a revealed block follow in sequence */
  .js .reveal-stagger > *{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay:calc(var(--i, 0) * 70ms);
  }
  .js .reveal-stagger.is-in > *{ opacity:1; transform:none; }
}

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