/* =========================================================
   CARLOVE4WHEELS - Anna Elfgen
   Automobilfotografie und Videografie
   Editorial dark theme, monochromes Interface, farbige Bilder
   ========================================================= */

/* ---------- Fonts (self hosted, DSGVO-konform) ---------- */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('../fonts/oswald-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;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('../fonts/oswald-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: 'Jost';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('../fonts/jost-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;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('../fonts/jost-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;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #101011;
  --bg-raise: #17171a;
  --line: rgba(255, 255, 255, 0.16);
  --line-soft: rgba(255, 255, 255, 0.08);
  --fg: #f4f4f5;
  --fg-muted: #a0a0a4;
  /* 4.6:1 gegen den Hintergrund. Der vorherige Ton lag bei 3.75:1 und
     damit unter dem Mindestwert für Text unter 18px. */
  --fg-dim: #8b8b91;

  --display: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --shell: 1440px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --nav-h: 68px;

  /* Typo-Skala: sieben Stufen, jede mit einer Aufgabe. Neue Elemente
     bekommen eine dieser Stufen, keine eigene Größe. */
  --fs-display: clamp(2.4rem, 1.1rem + 5.4vw, 5.6rem); /* H1, Kontakt */
  --fs-h2: clamp(1.9rem, 1.2rem + 2.9vw, 3.6rem);      /* Sektionen, Manifest, Zitat */
  --fs-h3: clamp(1.35rem, 1rem + 1.3vw, 2.1rem);       /* Leistungen */
  --fs-h4: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);       /* Ablaufschritte, Kontaktwege */
  --fs-lede: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);    /* Vorspann */
  --fs-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --fs-label: 0.72rem;

  /* Zwei Sperrungen statt acht: eine für Labels, eine für Bedienelemente */
  --ls-label: 0.22em;
  --ls-ui: 0.16em;

  /* Rhythmus an der Breite, nicht an vh: sonst springt er auf dem Handy
     mit der ein- und ausfahrenden Adressleiste. --step-lg markiert
     Kapitelwechsel, --step steht innerhalb eines Themas. */
  --step: clamp(3.5rem, 7vw, 7rem);
  --step-lg: clamp(5rem, 10vw, 10rem);
  --gap-head: 1.5rem;    /* Headline zu Folgetext, überall gleich */
  --gap-eyebrow: 0.9rem; /* Label zu Headline */

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.5s;        /* eine Dauer für alle Hover- und Zustandswechsel */
  --dur-media: 0.7s;  /* Bildbewegungen dürfen etwas träger sein */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
  margin: 0;
}

p { margin: 0; }

::selection { background: #f4f4f5; color: #101011; }

:focus-visible {
  outline: 2px solid #f4f4f5;
  outline-offset: 3px;
  /* dunkler Gegenring, sonst verschwindet der Fokus auf hellen Fotos */
  box-shadow: 0 0 0 5px rgba(16, 16, 17, 0.85);
}

/* ---------- Layout-Primitives ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--step); }
/* Kapitelwechsel bekommen mehr Luft davor als Sektionen innerhalb eines Themas */
.section--break { padding-top: var(--step-lg); }

.rule {
  height: 1px;
  background: var(--line-soft);
  border: 0;
  margin: 0;
}

.label {
  font-family: var(--body);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-dim);
}

.lede {
  font-size: var(--fs-lede);
  color: var(--fg-muted);
  max-width: 46ch;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #f4f4f5;
  color: #101011;
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Grain ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(16, 16, 17, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.75rem; /* Trefferfläche, das Logo allein ist nur 17px hoch */
  text-decoration: none;
}
/* Die Bildmarke wird über die Höhe skaliert, das Seitenverhältnis liegt
   bei etwa 2.2:1 (Fahrzeugfront ohne Wortmarke, die steht daneben als Text) */
.brand img { width: auto; height: 36px; }
/* Die Wortmarke steht in der Display-Schrift, damit sie sich von den
   Navigationslinks absetzt. Die sind bewusst fein und gesperrt, die Marke
   ist keine Navigation. */
.brand span {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-muted);
  transition: color var(--dur) var(--ease);
  white-space: nowrap;
}
.nav__links a:hover { color: var(--fg); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  color: var(--fg-muted);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__icon:hover { color: var(--fg); border-color: #f4f4f5; }
.nav__icon:active { transform: translateY(1px); }

/* Social-Link mit Marken-Icon */
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: color var(--dur) var(--ease);
}
.social-link:hover { color: var(--fg); }

.social-link__icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}
.nav__icon .social-link__icon { width: 18px; height: 18px; }

.nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  text-decoration: none;
  color: #101011;
  background: #f4f4f5;
  padding: 0 1.25rem;
  transition: transform 0.2s var(--ease), background var(--dur) var(--ease);
  white-space: nowrap;
}
.nav__cta:hover { background: #fff; }
.nav__cta:active { transform: translateY(1px); }

.nav__toggle { display: none; }

@media (max-width: 900px) {
  :root { --nav-h: 60px; }

  .nav__links,
  .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }

  /* Mobil trägt die Wortmarke die Erkennung, das Signet begleitet nur */
  .brand img { height: 26px; }
  .brand span { font-size: 1.05rem; }

  .nav--open .nav__links {
    display: flex;
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line-soft);
    padding: 0.5rem var(--gutter) 1.5rem;
  }
  .nav--open .nav__links a {
    display: block;
    padding: 0.95rem 0;
    font-size: 0.82rem;
    letter-spacing: 0.22em;
    color: var(--fg);
  }
  /* Trennlinien nur zwischen den Einträgen, nicht am Rand */
  .nav--open .nav__links li + li a { border-top: 1px solid var(--line-soft); }

  /* Haupt-CTA am Fuß des Menüs, auf Desktop sitzt er in der Leiste */
  .nav--open .nav__links-cta { margin-top: 1.25rem; }
  .nav--open .nav__links-cta a {
    display: flex;
    border-top: 0;
    justify-content: center;
    padding: 1rem 1.7rem;
    font-size: 0.76rem;
    letter-spacing: 0.2em;
    color: #101011;
  }
}

.nav__links-cta { display: none; }
@media (max-width: 900px) {
  .nav--open .nav__links-cta { display: block; }
}

@media (max-width: 380px) {
  .brand img { height: 23px; }
  .brand span { font-size: 0.95rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 45%;
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(16, 16, 17, 0.96) 4%, rgba(16, 16, 17, 0.35) 48%, rgba(16, 16, 17, 0.7) 100%),
    linear-gradient(to right, rgba(16, 16, 17, 0.8), rgba(16, 16, 17, 0.05) 65%);
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(3rem, 8vh, 6rem);
}

.hero__social {
  margin-bottom: 1.5rem;
  padding-block: 0.75rem; /* größere Trefferfläche auf dem Handy */
  color: var(--fg);
}
.hero__social:hover { color: var(--fg-muted); }

.hero__title {
  font-size: var(--fs-display);
  font-weight: 500;
  max-width: 22ch;
}
.hero__title em {
  font-style: normal;
  font-weight: 300;
  color: var(--fg-muted);
}

.hero__sub {
  margin-top: 1.5rem;
  max-width: 42ch;
  color: var(--fg-muted);
  font-size: var(--fs-lede);
}

.hero__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--body);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.7rem;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), background var(--dur) var(--ease),
    color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--solid { background: #f4f4f5; color: #101011; }
.btn--solid:hover { background: #fff; }

.btn--ghost {
  border-color: var(--line);
  color: var(--fg);
  background: rgba(16, 16, 17, 0.35);
}
.btn--ghost:hover { border-color: #f4f4f5; background: rgba(244, 244, 245, 0.06); }

.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- Manifest ---------- */
.manifest {
  border-bottom: 1px solid var(--line-soft);
}
.manifest__text {
  font-family: var(--display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: var(--fs-h2);
  line-height: 1.12;
  max-width: 20ch;
  text-wrap: balance;
}
.manifest__text strong { font-weight: 500; }

.manifest__meta {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem 4rem;
}
.manifest__meta div { min-width: 8rem; }
.manifest__meta dt {
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1;
}
.manifest__meta dd {
  margin: 0.5rem 0 0;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ---------- Split (Über mich) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 0.85fr 1fr; }
  .split--offset .split__media { margin-top: -3rem; margin-bottom: 3rem; }
}

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

.split__body h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--gap-head);
}
.split__body p + p { margin-top: 1.1rem; }
.split__body p {
  color: var(--fg-muted);
  max-width: 52ch;
}
.split__sign {
  margin-top: 2.25rem;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ---------- Leistungen (Bento) ---------- */
.services__head {
  font-size: var(--fs-h2);
  margin-bottom: 2.5rem;
}

.services {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .services { grid-template-columns: 1.35fr 1fr; }
  .services__item--lead { grid-row: span 2; }
}

.services__item {
  position: relative;
  background: var(--bg);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.services__item--lead { min-height: 26rem; }

.services__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.services__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-media) var(--ease);
}
.services__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16, 16, 17, 0.94) 8%, rgba(16, 16, 17, 0.55) 65%, rgba(16, 16, 17, 0.35));
}
.services__item:hover .services__bg img { transform: scale(1.04); }

.services__item h3 {
  font-size: var(--fs-h3);
  font-weight: 400;
}
.services__item p {
  margin-top: 0.8rem;
  color: var(--fg-muted);
  font-size: var(--fs-body);
  max-width: 38ch;
}
.services__item--plain { background: var(--bg-raise); }

/* ---------- Galerie ---------- */
.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.gallery__head h2 {
  font-size: var(--fs-h2);
  margin-top: var(--gap-eyebrow);
}
.gallery__note { max-width: 32ch; }

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.5rem, 1.4vw, 1.1rem);
}
@media (min-width: 860px) {
  .gallery { grid-template-columns: repeat(6, 1fr); }
  .gallery__tile:nth-child(1) { grid-column: span 4; }
  .gallery__tile:nth-child(2) { grid-column: span 2; }
  .gallery__tile:nth-child(3) { grid-column: span 2; }
  .gallery__tile:nth-child(4) { grid-column: span 2; }
  .gallery__tile:nth-child(5) { grid-column: span 2; }
  .gallery__tile:nth-child(6) { grid-column: span 3; }
  .gallery__tile:nth-child(7) { grid-column: span 3; }

  /* Querformate flacher, das nimmt der Sektion rund 150px Höhe,
     ohne die Hochformate zu beschneiden */
  .gallery__tile:nth-child(1),
  .gallery__tile:nth-child(6),
  .gallery__tile:nth-child(7) { aspect-ratio: 16 / 9; }
}

.gallery__tile {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: var(--bg-raise);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 5;
}
.gallery__tile:nth-child(1),
.gallery__tile:nth-child(6),
.gallery__tile:nth-child(7) { aspect-ratio: 3 / 2; }

/* Tablet: gleichmäßiges Raster ohne Löcher */
@media (min-width: 600px) and (max-width: 859px) {
  .gallery__tile:nth-child(6),
  .gallery__tile:nth-child(7) { aspect-ratio: 4 / 5; }
  .gallery__tile:nth-child(1) { grid-column: span 2; }
}

/* Handy: versetztes Zweierraster über CSS-Spalten. Der Versatz entsteht aus
   zwei Dingen: die linke Spalte startet um --gallery-offset höher als die
   rechte (Padding am Container, negativer Margin an der ersten Kachel), und
   die Kacheln haben unterschiedliche Seitenverhältnisse. Dadurch enden die
   Spalten auch unten versetzt, ohne dass ein Abschlussbild nötig ist. */
@media (max-width: 599px) {
  .gallery {
    --gallery-offset: 5rem;
    display: block;
    columns: 2;
    column-gap: 10px;
    padding-top: var(--gallery-offset);
  }
  .gallery__tile {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    break-inside: avoid;
  }
  .gallery__tile:first-child { margin-top: calc(var(--gallery-offset) * -1); }

  .gallery__tile:nth-child(1) { aspect-ratio: 4 / 5; }
  .gallery__tile:nth-child(2) { aspect-ratio: 3 / 4; }
  .gallery__tile:nth-child(3) { aspect-ratio: 4 / 5; }
  .gallery__tile:nth-child(4) { aspect-ratio: 1 / 1; }
  .gallery__tile:nth-child(5) { aspect-ratio: 4 / 5; }
  .gallery__tile:nth-child(6) { aspect-ratio: 3 / 4; }
  .gallery__tile:nth-child(7) { aspect-ratio: 4 / 5; }
}

.gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-media) var(--ease), opacity var(--dur) var(--ease);
}
.gallery__tile:hover img { transform: scale(1.04); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(9, 9, 10, 0.985);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[open],
.lightbox.is-open { display: flex; }

.lightbox img {
  max-width: min(100%, 1400px);
  max-height: 84dvh;
  object-fit: contain;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: none;
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: var(--body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { border-color: #f4f4f5; background: rgba(244, 244, 245, 0.08); }

.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__nav--prev { left: clamp(0.75rem, 3vw, 2rem); }
.lightbox__nav--next { right: clamp(0.75rem, 3vw, 2rem); }
.lightbox__nav { top: 50%; transform: translateY(-50%); }

.lightbox__count {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--fg-dim);
}

/* ---------- Ablauf ---------- */
.flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
}
@media (min-width: 900px) {
  .flow { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
  .flow__head { position: sticky; top: 6rem; }
}
.flow h2 {
  font-size: var(--fs-h2);
}
.flow__intro { margin-top: var(--gap-head); }

.flow__list { margin: 0; padding: 0; list-style: none; }
.flow__list li {
  padding-block: clamp(1.4rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line-soft);
}
.flow__list li:last-child { border-bottom: 1px solid var(--line-soft); }
.flow__list h3 {
  font-size: var(--fs-h4);
  font-weight: 400;
}
.flow__list p {
  margin-top: 0.6rem;
  color: var(--fg-muted);
  max-width: 50ch;
  font-size: var(--fs-body);
}

/* ---------- Zitat fullbleed ---------- */
.quote {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.quote__media { position: absolute; inset: 0; z-index: 0; }
.quote__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.quote__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(16, 16, 17, 0.92), rgba(16, 16, 17, 0.55) 70%, rgba(16, 16, 17, 0.75));
}
/* Schmal liegt der Text über der ganzen Bildbreite, also vertikal abdunkeln */
@media (max-width: 860px) {
  .quote__media::after {
    background: linear-gradient(to bottom, rgba(16, 16, 17, 0.7), rgba(16, 16, 17, 0.88) 55%, rgba(16, 16, 17, 0.94));
  }
}
.quote__body {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-block: var(--step);
}
.quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: var(--fs-h2);
  line-height: 1.15;
  max-width: 22ch;
}
.quote figcaption {
  margin-top: 2.5rem;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ---------- Kontakt ---------- */
.contact h2 {
  font-size: var(--fs-display);
  margin-top: var(--gap-eyebrow);
  max-width: 14ch;
  text-wrap: balance;
}
.contact__lede { margin-top: var(--gap-head); }
.contact__actions { margin-top: 2.5rem; }

.contact__channels {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}
@media (min-width: 760px) {
  .contact__channels { grid-template-columns: repeat(3, 1fr); }
}
.contact__channel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
  color: var(--fg);
}
@media (min-width: 760px) {
  .contact__channel { padding-inline-end: 2rem; }
}
.contact__channel span:last-child {
  font-family: var(--display);
  font-size: var(--fs-h4);
  text-transform: none;
  letter-spacing: 0.01em;
  word-break: break-word;
}
.contact__channel:hover { color: var(--fg-muted); }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

/* Markenabschluss: die Wortmarke einmal groß, statt die Seite mit einer
   Linkzeile ausklingen zu lassen */
/* Spezifischer als die allgemeine .footer a Regel, sonst gewinnt deren
   Labelgröße */
.footer a.footer__mark {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(2rem, 8.5vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--fg);
  text-decoration: none;
}
.footer a.footer__mark:hover { color: var(--fg-muted); }

.footer__divider {
  height: 1px;
  background: var(--line-soft);
  border: 0;
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer a {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-muted);
  transition: color var(--dur) var(--ease);
}
.footer a:hover { color: var(--fg); }
.footer__note {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ---------- Rechtstexte ---------- */
.legal { padding-block: clamp(3rem, 8vh, 6rem); }
.legal h1 {
  font-size: var(--fs-h2);
  margin-bottom: 2.5rem;
}
.legal h2 {
  font-size: var(--fs-h4);
  font-weight: 500;
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
}
.legal p,
.legal li {
  color: var(--fg-muted);
  max-width: 68ch;
}
.legal p + p { margin-top: 0.9rem; }
.legal ul { padding-left: 1.1rem; }
.legal li { margin-block: 0.35rem; }
.legal .todo {
  border-left: 2px solid var(--line);
  padding: 0.9rem 1.1rem;
  background: var(--bg-raise);
  color: var(--fg);
  font-size: var(--fs-body);
  max-width: 68ch;
}

/* ---------- Handy-Anpassungen ---------- */
@media (max-width: 700px) {
  /* Lightbox: Steuerung an den unteren Rand, das Bild bekommt die Fläche */
  .lightbox { padding: 0.75rem; }
  .lightbox img { max-height: 72dvh; }
  .lightbox__nav {
    top: auto;
    bottom: 1rem;
    transform: none;
    min-width: 56px;
    padding: 0.85rem 1rem;
  }
  .lightbox__nav--prev { left: 1rem; }
  .lightbox__nav--next { right: 1rem; }
  .lightbox__count { bottom: 1.9rem; }
  .lightbox__close { padding: 0.85rem 1rem; }
}

@media (max-width: 559px) {
  /* Gestapelte Buttons wirken als Paar, wenn sie gleich breit sind */
  .hero__actions { gap: 0.7rem; }
  .hero__actions .btn,
  .contact__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Footer: untereinander mit voller Trefferfläche statt 17px hoher Textzeilen */
  .footer__inner { gap: 2rem; }
  .footer__links {
    width: 100%;
    flex-direction: column;
    gap: 0;
  }
  .footer__links a {
    display: block;
    padding-block: 0.9rem;
  }
  .footer__links li + li a { border-top: 1px solid var(--line-soft); }

  .contact__channel { padding-block: 1.35rem; }
}

/* ---------- Ladezustand für Bilder ----------
   Die Medienflächen tragen den Rahmenton, damit bei langsamer Verbindung
   keine schwarzen Löcher entstehen. Das Bild blendet ein, sobald es da ist. */
.hero__media,
.quote__media,
.split__media,
.services__bg,
.gallery__tile { background-color: var(--bg-raise); }

.js .media-fade {
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.js .media-fade.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .media-fade { opacity: 1; transition: none; }
}

/* ---------- Reveal-Animation ----------
   Greift nur, wenn JavaScript läuft. Ohne JS bleibt der Inhalt sichtbar. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}
.js .reveal[data-delay='1'] { transition-delay: 0.08s; }
.js .reveal[data-delay='2'] { transition-delay: 0.16s; }
.js .reveal[data-delay='3'] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .gallery__tile img,
  .services__bg img { transition: none; }
  .gallery__tile:hover img,
  .services__item:hover .services__bg img { transform: none; }
}