@charset "UTF-8";

/* =========================================================================
   JL-Creative
   Eine Datei, klar gegliedert. Kein Build, kein Preprozessor, ein Request.

   1  Schriften
   2  Tokens
   3  Grundlagen
   4  Hilfsklassen
   5  Bausteine (Buttons, Links, Bilder, Abschnittsköpfe)
   6  Kopfbereich und Navigation
   7  Startseite
   8  Leistungsseiten
   9  Projekte
   10 Team
   11 Kontakt und Formular
   12 Rechtstexte und Fehlerseite
   13 Abschluss und Fußbereich
   14 Bewegung
   ========================================================================= */


/* 1  Schriften
   -------------------------------------------------------------------------
   Selbst gehostet, nur die tatsächlich verwendeten Schnitte.
   Cabinet Grotesk trägt die Überschriften, Switzer den Rest.
   Beide decken die deutschen Umlaute vollständig ab, geprüft.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/assets/fonts/cabinet-grotesk-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/assets/fonts/cabinet-grotesk-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/assets/fonts/cabinet-grotesk-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/assets/fonts/switzer-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/assets/fonts/switzer-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/assets/fonts/switzer-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* 2  Tokens
   -------------------------------------------------------------------------
   Papier als Grundfläche, Tiefschwarz als Akzent- und Bildfläche.
   Das Violett ist der einzige Farbwert, den alle vier Marken des Hauses
   teilen. Es wird ausschließlich für Fokus, aktive Zustände und einzelne
   Auszeichnungen verwendet, nie als Fläche.
   ------------------------------------------------------------------------- */

:root {
  --ink: #0B0B0C;
  --ink-2: #17171A;
  --ink-3: #26262A;

  --paper: #EFEFED;
  --paper-2: #E4E4E0;
  --paper-3: #D2D2CD;

  --grey: #6B6B6E;
  --grey-2: #97979B;

  --accent: #5A18C8;
  --accent-on-dark: #A177F5;

  --font-display: 'Cabinet Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Switzer', 'Helvetica Neue', Arial, sans-serif;

  /* Typografische Skala, fließend zwischen 320 und 1600 Pixeln */
  --t--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --t-0:  clamp(1rem, 0.97rem + 0.15vw, 1.09rem);
  --t-1:  clamp(1.15rem, 1.08rem + 0.34vw, 1.35rem);
  --t-2:  clamp(1.4rem, 1.24rem + 0.78vw, 1.85rem);
  --t-3:  clamp(1.75rem, 1.42rem + 1.62vw, 2.7rem);
  --t-4:  clamp(2.15rem, 1.55rem + 2.98vw, 3.9rem);
  --t-5:  clamp(2.6rem, 1.4rem + 6.0vw, 6.1rem);

  --wrap: 86rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section: clamp(4.5rem, 9vw, 9rem);
  --gap: clamp(1.25rem, 2.6vw, 2.25rem);

  --border: 1px solid var(--paper-3);
  --border-dark: 1px solid rgba(255, 255, 255, 0.14);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* 3  Grundlagen
   ------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Der Kopfbereich überlagert Sprungziele, deshalb Versatz beim Ankersprung. */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-0);
  line-height: 1.6;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Verhindert waagrechtes Scrollen durch randabfallende Elemente.
     clip statt hidden: hidden macht den Körper zu einem eigenen
     Scrollbereich, und in mobilen Browsern werden dann die letzten Pixel
     des Fußbereichs unerreichbar. clip beschneidet nur und lässt das
     Dokument scrollen. */
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

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

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

button {
  font: inherit;
  color: inherit;
}

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

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

.is-dark :focus-visible,
.site-footer :focus-visible,
.flow :focus-visible,
.cta-band :focus-visible,
.hero :focus-visible {
  outline-color: var(--accent-on-dark);
}


/* 4  Hilfsklassen
   ------------------------------------------------------------------------- */

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

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.85rem 1.4rem;
  font-weight: 500;
  text-decoration: none;
  transition: top 0.15s var(--ease);
}

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


/* 5  Bausteine
   ------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 3rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-0);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.button--solid {
  background: var(--ink);
  color: var(--paper);
}

.button--solid:hover {
  background: var(--accent);
}

.button--ghost {
  border-color: currentColor;
  background: transparent;
}

.button--ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.button--light.button--solid {
  background: var(--paper);
  color: var(--ink);
}

.button--light.button--solid:hover {
  background: var(--accent-on-dark);
  color: var(--ink);
}

.button--light.button--ghost {
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.4);
}

.button--light.button--ghost:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15em;
}

.link-arrow span {
  transition: transform 0.2s var(--ease);
  display: inline-block;
}

.link-arrow:hover {
  color: var(--accent);
}

.link-arrow:hover span {
  transform: translateX(0.25em);
}

/* Bilder sind randscharf gesetzt, ohne Rahmen und ohne Rundung.
   Das Bild selbst ist der Rahmen. */
.media {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
}

.media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--placeholder {
  display: grid;
  place-content: center;
  gap: 0.75rem;
  padding: 2rem;
  text-align: center;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--paper-2) 0 10px,
      var(--paper-3) 10px 20px
    );
  color: var(--grey);
}

.media__placeholder-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-3);
  letter-spacing: -0.04em;
  color: var(--ink);
  opacity: 0.25;
}

.media__placeholder-text {
  font-size: var(--t--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  max-width: 22ch;
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head--split {
  display: grid;
  gap: clamp(1rem, 3vw, 2.5rem);
  max-width: none;
  align-items: end;
}

.section-head__eyebrow {
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 0.9rem;
}

.section-head__title {
  font-size: var(--t-4);
}

.section-head__lead {
  margin-top: 1.1rem;
  font-size: var(--t-1);
  color: var(--grey);
  max-width: 42ch;
}

.section-head__aside {
  color: var(--grey);
  max-width: 40ch;
}

.section-head--light .section-head__eyebrow,
.section-head--light .section-head__lead {
  color: var(--grey-2);
}

@media (min-width: 56rem) {
  .section-head--split {
    grid-template-columns: 1fr auto;
  }
}


/* 6  Kopfbereich und Navigation
   -------------------------------------------------------------------------
   Über dem Hero liegt der Kopfbereich transparent auf dem Bild, danach
   wechselt er auf Papier. Der Wechsel wird per data-Attribut gesteuert,
   ohne JavaScript bleibt der helle Zustand aktiv und ist lesbar.
   ------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: var(--border);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

/* Über dem Hero liegt die Kopfzeile auf derselben schwarzen Fläche wie der
   Hero-Text. Transparent auf dem Foto wäre in der linken Bildhälfte nicht
   zuverlässig lesbar, und Lesbarkeit geht vor Effekt. */
.is-home .site-header[data-state='over-hero'] {
  background: var(--ink);
  border-bottom-color: transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.9rem var(--gutter);
}

.site-header__logo {
  display: block;
  flex: none;
}

.site-header__logo img {
  width: auto;
  height: clamp(1.5rem, 2.6vw, 1.9rem);
}

.site-header__logo [data-logo-light] {
  display: none;
}

.is-home .site-header[data-state='over-hero'] .site-header__logo [data-logo-light] {
  display: block;
}

.is-home .site-header[data-state='over-hero'] .site-header__logo [data-logo-dark] {
  display: none;
}

.is-home .site-header[data-state='over-hero'] {
  color: var(--paper);
}

.site-header__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.5rem 0.25rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.site-header__toggle-bars {
  display: grid;
  gap: 5px;
  width: 22px;
}

.site-header__toggle-bars span {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-bars span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-bars span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

.site-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--ink);
  color: var(--paper);
  overflow-y: auto;
  /* Ohne JavaScript ist die Navigation über den Anker erreichbar und sichtbar. */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.22s var(--ease), visibility 0.22s var(--ease);
}

.site-nav[data-open='true'] {
  visibility: visible;
  opacity: 1;
}

.site-nav__panel {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(5.5rem, 12vw, 8rem) var(--gutter) clamp(3rem, 8vw, 5rem);
}

.site-nav__caption {
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-2);
  margin-bottom: 1rem;
}

.site-nav__list a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.3rem 0;
  font-family: var(--font-display);
  font-size: var(--t-3);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
  transition: color 0.18s var(--ease);
}

.site-nav__list a:hover,
.site-nav__list a[aria-current='page'] {
  color: var(--accent-on-dark);
}

.site-nav__ext {
  font-size: 0.5em;
  transform: translateY(-0.9em);
}

.site-nav__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  border-top: var(--border-dark);
}

.site-nav__cta .button--solid {
  background: var(--paper);
  color: var(--ink);
}

.site-nav__cta .button--solid:hover {
  background: var(--accent-on-dark);
}

.site-nav__contact {
  font-size: var(--t--1);
  line-height: 1.9;
  color: var(--grey-2);
}

.site-nav__contact a {
  color: inherit;
}

/* Ab Tablettbreite liegt die Navigation offen in der Kopfzeile. */
@media (min-width: 62rem) {
  .site-header__toggle {
    display: none;
  }

  .site-nav {
    position: static;
    visibility: visible;
    opacity: 1;
    background: none;
    color: inherit;
    overflow: visible;
  }

  .site-nav__panel {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    padding: 0;
    max-width: none;
  }

  .site-nav__group {
    display: flex;
    align-items: center;
  }

  .site-nav__caption {
    display: none;
  }

  .site-nav__list {
    display: flex;
    gap: clamp(1rem, 2vw, 1.75rem);
  }

  .site-nav__list a {
    font-family: var(--font-body);
    font-size: var(--t-0);
    font-weight: 500;
    letter-spacing: 0;
    padding: 0.25rem 0;
    border-bottom: 1px solid transparent;
  }

  .site-nav__list a:hover {
    color: inherit;
    border-bottom-color: currentColor;
  }

  .site-nav__list a[aria-current='page'] {
    color: inherit;
    border-bottom-color: var(--accent);
  }

  .is-home .site-header[data-state='over-hero'] .site-nav__list a[aria-current='page'] {
    border-bottom-color: var(--accent-on-dark);
  }

  /* Die eigenen Websites setzen sich durch eine feine Trennung ab,
     damit der Wechsel der Domain sichtbar ist. */
  .site-nav__list--external {
    padding-left: clamp(1rem, 2vw, 1.75rem);
    border-left: var(--border);
  }

  .is-home .site-header[data-state='over-hero'] .site-nav__list--external {
    border-left-color: rgba(255, 255, 255, 0.25);
  }

  .site-nav__list--external a {
    color: var(--grey);
  }

  .is-home .site-header[data-state='over-hero'] .site-nav__list--external a {
    color: rgba(255, 255, 255, 0.72);
  }

  .site-nav__list--external a:hover {
    color: inherit;
  }

  .site-nav__contact {
    display: none;
  }

  .site-nav__cta {
    padding-top: 0;
    border-top: 0;
  }

  .site-nav__cta .button {
    min-height: 2.6rem;
    padding: 0.55rem 1.15rem;
    background: var(--ink);
    color: var(--paper);
  }

  .is-home .site-header[data-state='over-hero'] .site-nav__cta .button {
    background: var(--paper);
    color: var(--ink);
  }
}


/* 7  Startseite
   ------------------------------------------------------------------------- */

/* --- Hero --- */

/* Der Hero ist zweigeteilt statt überlagert.
   Ein Text auf einem abgedunkelten Foto kostet immer beides: das Foto wird
   flau und der Text bleibt grenzwertig lesbar. Hier bekommt jedes seine
   eigene Fläche. Das Bild ist unverstellt und randabfallend, der Text steht
   auf ruhigem Schwarz. */
.hero {
  position: relative;
  display: grid;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}

.hero__media {
  position: relative;
  order: -1;
  /* Auf schmalen Fenstern hätte das Querformat sonst nur rund 250 Pixel
     Höhe und damit zu wenig Präsenz für einen Einstieg. */
  aspect-ratio: 1 / 1;
}

@media (min-width: 34rem) {
  .hero__media {
    aspect-ratio: 3 / 2;
  }
}

/* picture ist von Haus aus inline und ignoriert dann die Höhe. */
.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Schmale Abdunklung am unteren Bildrand, damit die Bildunterzeile in
   jedem Motiv lesbar bleibt. Das Motiv selbst bleibt unangetastet. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 6rem;
  background: linear-gradient(to top, rgba(11, 11, 12, 0.6) 0%, rgba(11, 11, 12, 0) 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  align-self: center;
  padding-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.hero__kicker {
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}

/* Eigene Größe statt der allgemeinen Skalenstufe: die Headline steht ab
   der Zweispaltigkeit in der halben Fensterbreite und muss dort noch
   zweizeilig umbrechen. */
.hero__title {
  font-size: clamp(2.5rem, 1.6rem + 4.4vw, 4.6rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  max-width: 15ch;
}

.hero__title span {
  display: block;
}

/* Die Headline bleibt einfarbig. Eine halbe Überschrift in der Markenfarbe
   würde die Zurückhaltung aufgeben, die den Rest der Seite trägt.
   Der Akzent sitzt stattdessen als schmale Linie über dem Kicker. */
.hero__kicker::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--accent-on-dark);
  margin-bottom: 1.1rem;
}

.hero__lead {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  max-width: 46ch;
  font-size: var(--t-1);
  color: rgba(255, 255, 255, 0.85);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

.hero__credit {
  position: absolute;
  left: var(--gutter);
  bottom: 1.1rem;
  z-index: 2;
  margin: 0;
  font-size: var(--t--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  text-shadow: 0 1px 12px rgba(11, 11, 12, 0.85);
}

/* Ab zwei Spalten steht der Text links, das Bild füllt die rechte Hälfte
   bis zum Fensterrand. Die Bildunterzeile wandert an den Bildrand. */
@media (min-width: 62rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: min(94svh, 56rem);
  }

  .hero__media {
    order: 0;
  }

  .hero__inner {
    /* Der Text richtet sich am linken Satzspiegel aus, nicht an der Spalte. */
    max-width: none;
    padding-right: clamp(2rem, 4vw, 4rem);
    padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
    margin-inline: 0;
  }

  .hero__credit {
    left: auto;
    right: var(--gutter);
    bottom: 1.4rem;
  }
}

@media (min-width: 62rem) and (max-width: 74rem) {
  .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

/* --- Positionierung --- */

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

.stance__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}

.stance__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-3);
  line-height: 1.24;
  letter-spacing: -0.02em;
  max-width: 30ch;
}

.stance__facts {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  align-self: end;
}

.stance__facts div {
  padding-top: 0.9rem;
  border-top: var(--border);
}

.stance__facts dt {
  font-size: var(--t--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 0.35rem;
}

.stance__facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-2);
  letter-spacing: -0.02em;
}

@media (min-width: 56rem) {
  .stance__inner {
    grid-template-columns: 1.35fr 1fr;
  }

  .stance__facts {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

@media (min-width: 56rem) and (max-width: 74rem) {
  .stance__facts {
    grid-template-columns: 1fr;
  }
}

/* --- Bereiche --- */

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

.areas__grid {
  display: grid;
  gap: var(--gap);
}

.area__link {
  display: grid;
  gap: 1.25rem;
  text-decoration: none;
  height: 100%;
}

.area__media {
  transition: transform 0.5s var(--ease);
}

.area__media .media__img {
  transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
}

.area__link:hover .media__img {
  transform: scale(1.03);
}

.area__eyebrow {
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 0.5rem;
}

.area__title {
  font-size: var(--t-3);
}

.area--wide .area__title {
  font-size: var(--t-4);
}

.area__lead {
  margin-top: 0.7rem;
  max-width: 44ch;
}

.area__meta {
  margin-top: 0.55rem;
  font-size: var(--t--1);
  color: var(--grey);
  max-width: 48ch;
}

.area__cta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  margin-top: 1.1rem;
  font-weight: 500;
  border-bottom: 1px solid var(--paper-3);
  padding-bottom: 0.3em;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.area__link:hover .area__cta {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.area__arrow {
  display: inline-block;
  transition: transform 0.2s var(--ease);
}

.area__link:hover .area__arrow {
  transform: translateX(0.25em);
}

@media (min-width: 44rem) {
  .areas__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .areas__grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .area {
    grid-column: span 2;
  }

  /* Die beiden tragenden Bereiche bekommen die dreifache Breite.
     Das Raster bildet damit die Auftragslage ab. */
  .area--wide {
    grid-column: span 3;
  }
}

/* --- Ausgewählte Projekte --- */

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

.work__grid {
  display: grid;
  gap: var(--gap) clamp(1.25rem, 2.6vw, 2.25rem);
}

.work__more {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 44rem) {
  .work__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .work__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Versetzte Anordnung, damit kein gleichförmiges Kartenraster entsteht.
     Die mittlere Spalte sitzt tiefer und trägt ein hochformatiges Bild. */
  .work__item--1 {
    margin-top: clamp(2rem, 5vw, 4.5rem);
  }
}

/* --- Warum ein Team --------------------------------------------------
   Vier belegbare Gründe statt einer Reihe aus Icons. Die Marke links ist
   eine Zahl oder ein kurzes Stichwort und trägt eine echte Aussage,
   deshalb steht sie ausgezeichnet und nicht nur als Aufzählungszeichen. */

.reasons {
  padding-block: var(--section);
  background: var(--ink);
  color: var(--paper);
}

.reasons__list {
  display: grid;
  gap: 0;
}

.reasons__item {
  display: grid;
  gap: 0.5rem 2rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: var(--border-dark);
}

.reasons__item:last-child {
  border-bottom: var(--border-dark);
}

.reasons__marker {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-2);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-on-dark);
  white-space: nowrap;
}

.reasons__title {
  font-size: var(--t-2);
  margin-bottom: 0.4rem;
}

.reasons__text {
  color: var(--grey-2);
  max-width: 60ch;
}

@media (min-width: 50rem) {
  .reasons__item {
    grid-template-columns: 11rem 1fr;
    align-items: baseline;
  }
}


/* --- Verweis auf die persönliche Marke -------------------------------
   Klar abgesetzt von den Leistungen: schmaler, ruhiger, mit eigener
   Fläche. TSCHOLENE ist keine fünfte Leistung von JL-Creative. */

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

.sister__inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.sister__eyebrow {
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 0.9rem;
}

.sister__title {
  font-size: var(--t-3);
  max-width: 18ch;
}

.sister__text {
  margin-top: 1rem;
  color: var(--grey);
  max-width: 46ch;
}

.sister__note {
  margin-block: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  max-width: 44ch;
}

@media (min-width: 56rem) {
  .sister__inner {
    grid-template-columns: 1fr 0.85fr;
  }
}


/* --- Team --- */

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

.team-teaser__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.team-teaser__text {
  margin-top: 1.1rem;
  max-width: 48ch;
  color: var(--grey);
}

.team-teaser__people {
  display: grid;
  gap: 0;
  margin-block: clamp(1.75rem, 4vw, 2.5rem);
}

.team-teaser__people li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  justify-content: space-between;
  align-items: baseline;
  padding-block: 0.85rem;
  border-top: var(--border);
}

.team-teaser__people li:last-child {
  border-bottom: var(--border);
}

.team-teaser__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-1);
  letter-spacing: -0.02em;
}

.team-teaser__role {
  font-size: var(--t--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
}

@media (min-width: 56rem) {
  .team-teaser__inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Arbeitsorte --- */

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

.places__list {
  display: grid;
  gap: 0;
}

.places__item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding-block: clamp(0.7rem, 1.6vw, 1rem);
  border-top: var(--border);
}

.places__item:last-child {
  border-bottom: var(--border);
}

.places__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-2);
  letter-spacing: -0.025em;
}

.places__city {
  font-size: var(--t--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

@media (min-width: 62rem) {
  .places__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(2rem, 5vw, 5rem);
  }

  /* In der zweiten Spalte fehlt sonst die obere Linie beim ersten Eintrag. */
  .places__item:nth-child(2) {
    border-top: var(--border);
  }

  .places__item:nth-last-child(2):nth-child(even),
  .places__item:last-child {
    border-bottom: var(--border);
  }
}


/* 8  Leistungsseiten
   ------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) 0;
}

.page-hero__inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.page-hero__title {
  font-size: var(--t-4);
  max-width: 18ch;
}

.page-hero__lead {
  font-size: var(--t-1);
  color: var(--grey);
  max-width: 46ch;
}

.page-hero__media {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

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

/* Ohne Kopfbild braucht der Seitenkopf unten eigenen Abstand. */
.page-hero--text {
  padding-bottom: clamp(1rem, 3vw, 2rem);
}

.page-intro__text {
  display: grid;
  gap: 1.25rem;
  max-width: 34rem;
  font-size: var(--t-1);
}

.page-intro__text p:first-child {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-2);
  line-height: 1.28;
  letter-spacing: -0.02em;
}

@media (min-width: 56rem) {
  .page-hero__inner {
    grid-template-columns: 1.2fr 1fr;
    align-items: end;
  }
}

.blocks {
  display: grid;
  gap: clamp(3rem, 8vw, 7rem);
  padding-bottom: var(--section);
}

.block {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  scroll-margin-top: 6rem;
}

.block__title {
  font-size: var(--t-3);
}

.block__text {
  margin-top: 1rem;
  color: var(--grey);
  max-width: 46ch;
}

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

.block__points li {
  padding-block: 0.8rem;
  padding-left: 1.75rem;
  border-top: var(--border);
  position: relative;
}

.block__points li:last-child {
  border-bottom: var(--border);
}

/* Die Marke im Listenpunkt ist eine schmale Linie in der Markenfarbe,
   kein Häkchen-Symbol. */
.block__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.5em;
  width: 0.85rem;
  height: 2px;
  background: var(--accent);
}

.block__link {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin-top: 1.5rem;
}

@media (min-width: 56rem) {
  .block {
    grid-template-columns: 1fr 1fr;
  }

  /* Jeder zweite Block spiegelt die Anordnung, damit die Seite nicht
     in eine Spaltenkante läuft. */
  .block:nth-child(even) .block__media {
    order: 2;
  }
}

/* Textvariante der Leistungsblöcke, wenn es für einen Bereich noch keine
   eigenen Aufnahmen gibt. Gleiche Gliederung wie beim Ablauf: Überschrift
   links, Inhalt rechts. */
.blocks--text {
  gap: 0;
  padding-bottom: 0;
}

.block--text {
  display: grid;
  gap: 0.75rem 2rem;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  border-top: var(--border);
  align-items: start;
}

.blocks--text .block--text:last-child {
  border-bottom: var(--border);
}

.block--text > .block__title {
  font-size: var(--t-2);
  align-self: start;
}

.block--text .block__text {
  margin-top: 0;
  max-width: 58ch;
}

.block--text .block__points {
  margin-top: 1.25rem;
}

@media (min-width: 50rem) {
  .block--text {
    grid-template-columns: 16rem 1fr;
  }
}

/* Die Zweispaltigkeit der Bildblöcke darf die Textvariante nicht
   überschreiben, sie erscheint im Stylesheet vorher. */
@media (min-width: 56rem) {
  .block--text {
    grid-template-columns: 16rem 1fr;
  }
}

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

.process__list {
  display: grid;
  gap: 0;
}

.process__step {
  display: grid;
  gap: 0.35rem 2rem;
  padding-block: clamp(1.25rem, 3vw, 1.9rem);
  border-top: var(--border);
}

.process__step:last-child {
  border-bottom: var(--border);
}

.process__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-1);
  letter-spacing: -0.02em;
}

.process__text {
  color: var(--grey);
  max-width: 58ch;
}

@media (min-width: 50rem) {
  .process__step {
    grid-template-columns: 12rem 1fr;
    align-items: baseline;
  }
}


/* 9  Projekte
   ------------------------------------------------------------------------- */

.project__link {
  display: grid;
  gap: 1rem;
  text-decoration: none;
  height: 100%;
}

.project__media .media__img {
  transition: transform 0.6s var(--ease);
}

.project__link:hover .media__img {
  transform: scale(1.03);
}

.project__brand {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}

.project__on {
  color: var(--accent);
  font-weight: 500;
}

.project__title {
  font-size: var(--t-2);
}

.project__subtitle {
  display: block;
  font-weight: 500;
  font-size: 0.62em;
  letter-spacing: -0.01em;
  color: var(--grey);
  margin-top: 0.25rem;
}

.project__excerpt {
  color: var(--grey);
  max-width: 44ch;
}

.project__meta {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: var(--t--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
}

.project__ext {
  transition: transform 0.2s var(--ease);
  display: inline-block;
}

.project__link:hover .project__ext {
  transform: translate(0.15em, -0.15em);
}

.project__link:hover .project__title {
  color: var(--accent);
}

/* Projektübersicht */

.projects-page {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section);
}

.projects-page__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 2.6vw, 2.25rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 44rem) {
  .projects-page__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .projects-page__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Einzelnes Projekt */

.project-page__hero {
  padding-top: clamp(2rem, 5vw, 3.5rem);
}

.project-page__title {
  font-size: var(--t-4);
  max-width: 20ch;
}

.project-page__subtitle {
  display: block;
  font-weight: 500;
  font-size: 0.5em;
  color: var(--grey);
  margin-top: 0.5rem;
}

.project-page__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 1.25rem;
  border-top: var(--border);
}

.project-page__facts div {
  display: grid;
  gap: 0.2rem;
}

.project-page__facts dt {
  font-size: var(--t--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}

.project-page__facts dd {
  margin: 0;
  font-weight: 500;
}

.project-page__media {
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.project-page__body {
  max-width: 34rem;
  margin-block: var(--section);
  font-size: var(--t-1);
}

.project-page__body p + p {
  margin-top: 1.2rem;
}

.project-page__more {
  padding-block: var(--section);
  border-top: var(--border);
}

.project-page__more-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.6vw, 2.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 44rem) {
  .project-page__more-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* 10  Team
   ------------------------------------------------------------------------- */

.team-page {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section);
}

.team-page__list {
  display: grid;
  gap: clamp(3rem, 8vw, 6rem);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.member {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.member__name {
  font-size: var(--t-3);
}

.member__role {
  margin-top: 0.6rem;
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.member__bio {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  color: var(--grey);
  max-width: 52ch;
}

.member__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

@media (min-width: 50rem) {
  .member {
    grid-template-columns: minmax(0, 20rem) 1fr;
    gap: clamp(2rem, 5vw, 4rem);
  }
}


/* 11  Kontakt und Formular
   ------------------------------------------------------------------------- */

.contact {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section);
}

.contact__inner {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

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

.contact__block h2 {
  font-size: var(--t-1);
  margin-bottom: 0.7rem;
}

.contact__block p,
.contact__block li {
  color: var(--grey);
}

.contact__block ul {
  display: grid;
  gap: 0.4rem;
}

.contact__direct {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-2);
  letter-spacing: -0.025em;
}

.contact__direct a {
  text-decoration: none;
  border-bottom: 2px solid var(--paper-3);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.contact__direct a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (min-width: 62rem) {
  .contact__inner {
    grid-template-columns: 1.35fr 1fr;
  }
}

.form {
  display: grid;
  gap: 1.5rem;
  scroll-margin-top: 6rem;
}

.form__row {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 40rem) {
  .form__row--two {
    grid-template-columns: repeat(2, 1fr);
  }
}

.field {
  display: grid;
  gap: 0.5rem;
}

.field__label {
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field__optional {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--grey);
}

.field__control {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.85rem 1rem;
  background: transparent;
  border: 1px solid var(--paper-3);
  border-radius: 2px;
  font: inherit;
  color: inherit;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.field__control:hover {
  border-color: var(--grey-2);
}

.field__control:focus {
  border-color: var(--accent);
  background: #fff;
}

textarea.field__control {
  min-height: 11rem;
  resize: vertical;
  line-height: 1.6;
}

select.field__control {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1.25rem) calc(50% + 2px),
    calc(100% - 1rem) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}

.field__error {
  font-size: var(--t--1);
  font-weight: 500;
  color: #A5121C;
  display: flex;
  align-items: baseline;
  gap: 0.4em;
}

/* Fehler werden nicht nur über Farbe ausgezeichnet, sondern zusätzlich
   über einen kräftigen Rahmen und einen Text mit Zeichen davor. */
.field--error .field__control {
  border-color: #A5121C;
  border-width: 2px;
}

.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__note {
  font-size: var(--t--1);
  color: var(--grey);
  max-width: 52ch;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.alert {
  display: grid;
  gap: 0.4rem;
  padding: 1.15rem 1.35rem;
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
}

.alert--error {
  border-left-color: #A5121C;
}

.alert__title {
  font-weight: 600;
}

.alert p {
  color: var(--grey);
}


/* 12  Rechtstexte und Fehlerseite
   ------------------------------------------------------------------------- */

.breadcrumbs {
  padding-top: clamp(1.25rem, 3vw, 2rem);
  font-size: var(--t--1);
  color: var(--grey);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.breadcrumbs li + li::before {
  content: '/';
  margin-right: 0.5rem;
  color: var(--paper-3);
}

.prose-page {
  padding-block: clamp(2rem, 5vw, 3.5rem) var(--section);
}

.prose-page__head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.prose-page__title {
  font-size: var(--t-4);
}

.prose-page__lead {
  margin-top: 1rem;
  font-size: var(--t-1);
  color: var(--grey);
  max-width: 48ch;
}

.prose-page__updated {
  margin-top: 1.25rem;
  font-size: var(--t--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

.prose {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  max-width: 42rem;
}

.prose section {
  display: grid;
  gap: 0.9rem;
}

.prose h2 {
  font-size: var(--t-2);
  padding-top: 1.25rem;
  border-top: var(--border);
}

.prose p,
.prose li {
  color: var(--ink);
}

.prose ul {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.2rem;
  list-style: disc;
}

.prose a {
  color: var(--accent);
  text-decoration-color: var(--paper-3);
}

.prose a:hover {
  text-decoration-color: currentColor;
}

.error-page {
  padding-block: clamp(4rem, 12vw, 9rem) var(--section);
}

.error-page__code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-5);
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--paper-3);
}

.error-page__title {
  font-size: var(--t-4);
  margin-top: 1rem;
  max-width: 18ch;
}

.error-page__text {
  margin-top: 1.25rem;
  font-size: var(--t-1);
  color: var(--grey);
  max-width: 46ch;
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.error-page__suggestions {
  margin-top: var(--section);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: var(--border);
}

.error-page__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.6vw, 2.25rem);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

@media (min-width: 44rem) {
  .error-page__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* 13  Abschluss und Fußbereich
   ------------------------------------------------------------------------- */

.cta-band {
  padding-block: clamp(4rem, 9vw, 8rem);
  background: var(--ink);
  color: var(--paper);
}

.cta-band__heading {
  font-size: var(--t-4);
  max-width: 16ch;
}

.cta-band__text {
  margin-top: 1.25rem;
  font-size: var(--t-1);
  color: var(--grey-2);
  max-width: 46ch;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.site-footer {
  /* Unten deutlich mehr Luft als früher: mit nur zwei Rem endete die
     letzte Zeile praktisch an der Fensterkante und war je nach Fenster,
     Zoom und Browserleiste nicht mehr zu sehen. */
  padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 5vw, 4rem);
  background: var(--ink-2);
  color: var(--paper);
}

.site-footer__top {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: var(--border-dark);
}

.site-footer__brand img {
  width: auto;
  height: 1.9rem;
}

.site-footer__claim {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-1);
  letter-spacing: -0.015em;
  color: var(--grey-2);
  /* Der Claim besteht aus zwei Sätzen und soll auch zwischen ihnen brechen. */
  max-width: 17ch;
  text-wrap: balance;
}

.site-footer__columns {
  display: grid;
  gap: 2.25rem;
}

.site-footer__caption {
  font-family: var(--font-body);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-2);
  margin-bottom: 1rem;
}

.site-footer__col ul {
  display: grid;
  gap: 0.6rem;
}

.site-footer__col a {
  text-decoration: none;
  color: var(--paper);
  transition: color 0.18s var(--ease);
}

.site-footer__col a:hover {
  color: var(--accent-on-dark);
  text-decoration: underline;
}

.site-footer__social {
  margin-top: 1.5rem;
  display: flex !important;
  flex-wrap: wrap;
  gap: 1.25rem !important;
}

.site-footer__social a {
  color: var(--grey-2);
  font-size: var(--t--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer__bottom {
  display: grid;
  gap: 1.25rem;
  padding-top: 2rem;
  font-size: var(--t--1);
  color: var(--grey-2);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
}

.site-footer__legal a,
.site-footer__note a {
  color: var(--paper);
}

@media (min-width: 44rem) {
  .site-footer__columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 62rem) {
  .site-footer__top {
    grid-template-columns: 1fr 2fr;
    gap: clamp(3rem, 6vw, 6rem);
  }

  /* Die Zeile zur persönlichen Marke steht auf einer eigenen Zeile.
     Rechts neben dem Copyright war sie die unauffälligste Stelle der
     ganzen Seite und wurde übersehen. */
  .site-footer__bottom {
    grid-template-columns: 1fr;
  }
}


/* 14  Bewegung
   -------------------------------------------------------------------------
   Ein einziger Bewegungstyp auf der ganzen Website: Inhalte erscheinen beim
   ersten Sichtbarwerden leicht versetzt. Kein Parallax, kein Scrollhijacking,
   keine Dauerbewegung. Ohne JavaScript und bei reduzierter Bewegung ist alles
   von Anfang an sichtbar.
   ------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Der Hero wird nicht per Beobachter aufgedeckt, sondern beim Laden.
   Sonst blitzt beim ersten Bild eine leere Fläche auf. */
.hero__kicker,
.hero__title span,
.hero__lead,
.hero__actions {
  animation: rise 0.7s var(--ease) backwards;
}

.hero__title span:nth-child(1) { animation-delay: 0.05s; }
.hero__title span:nth-child(2) { animation-delay: 0.12s; }
.hero__lead { animation-delay: 0.19s; }
.hero__actions { animation-delay: 0.26s; }

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}


/* --- Seitenverhältnisse und Fokuspunkte als Klassen ---------------------
   Die Content Security Policy verbietet Inline-Styles. Beides kommt deshalb
   über Klassen. Der Fokuspunkt läuft in Fünferschritten, das reicht für
   einen Bildausschnitt und hält das Stylesheet klein. --------------------- */

.ar-4-5 { aspect-ratio: 4 / 5; }
.ar-3-4 { aspect-ratio: 3 / 4; }
.ar-16-9 { aspect-ratio: 16 / 9; }
.ar-16-10 { aspect-ratio: 16 / 10; }
.ar-4-3 { aspect-ratio: 4 / 3; }
.ar-1-1 { aspect-ratio: 1 / 1; }
.ar-3-2 { aspect-ratio: 3 / 2; }
.ar-2-3 { aspect-ratio: 2 / 3; }

.fx-0 { object-position: 0% var(--focal-y, 50%); }
.fx-5 { object-position: 5% var(--focal-y, 50%); }
.fx-10 { object-position: 10% var(--focal-y, 50%); }
.fx-15 { object-position: 15% var(--focal-y, 50%); }
.fx-20 { object-position: 20% var(--focal-y, 50%); }
.fx-25 { object-position: 25% var(--focal-y, 50%); }
.fx-30 { object-position: 30% var(--focal-y, 50%); }
.fx-35 { object-position: 35% var(--focal-y, 50%); }
.fx-40 { object-position: 40% var(--focal-y, 50%); }
.fx-45 { object-position: 45% var(--focal-y, 50%); }
.fx-50 { object-position: 50% var(--focal-y, 50%); }
.fx-55 { object-position: 55% var(--focal-y, 50%); }
.fx-60 { object-position: 60% var(--focal-y, 50%); }
.fx-65 { object-position: 65% var(--focal-y, 50%); }
.fx-70 { object-position: 70% var(--focal-y, 50%); }
.fx-75 { object-position: 75% var(--focal-y, 50%); }
.fx-80 { object-position: 80% var(--focal-y, 50%); }
.fx-85 { object-position: 85% var(--focal-y, 50%); }
.fx-90 { object-position: 90% var(--focal-y, 50%); }
.fx-95 { object-position: 95% var(--focal-y, 50%); }
.fx-100 { object-position: 100% var(--focal-y, 50%); }

.fy-0 { --focal-y: 0%; }
.fy-5 { --focal-y: 5%; }
.fy-10 { --focal-y: 10%; }
.fy-15 { --focal-y: 15%; }
.fy-20 { --focal-y: 20%; }
.fy-25 { --focal-y: 25%; }
.fy-30 { --focal-y: 30%; }
.fy-35 { --focal-y: 35%; }
.fy-40 { --focal-y: 40%; }
.fy-45 { --focal-y: 45%; }
.fy-50 { --focal-y: 50%; }
.fy-55 { --focal-y: 55%; }
.fy-60 { --focal-y: 60%; }
.fy-65 { --focal-y: 65%; }
.fy-70 { --focal-y: 70%; }
.fy-75 { --focal-y: 75%; }
.fy-80 { --focal-y: 80%; }
.fy-85 { --focal-y: 85%; }
.fy-90 { --focal-y: 90%; }
.fy-95 { --focal-y: 95%; }
.fy-100 { --focal-y: 100%; }

/* Ergänzungen, die Inline-Styles ersetzen */
.section-head__title--small {
  font-size: var(--t-2);
}

.form--after-alert {
  margin-top: 2rem;
}


/* --- Zustände der mobilen Navigation ------------------------------------
   Der Kopfbereich liegt über dem geöffneten Panel, damit der Schließen-Knopf
   erreichbar bleibt. Er wird dafür transparent und hell. -------------------- */

.site-header {
  z-index: 70;
}

.site-header[data-nav-open='true'],
.is-home .site-header[data-nav-open='true'] {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--paper);
}

.site-header[data-nav-open='true'] .site-header__logo [data-logo-light] {
  display: block;
}

.site-header[data-nav-open='true'] .site-header__logo [data-logo-dark] {
  display: none;
}

/* Sperrt das Scrollen der Seite, solange das Panel offen ist. */
.nav-is-open,
.nav-is-open body {
  overflow: hidden;
}

@media (min-width: 62rem) {
  .nav-is-open,
  .nav-is-open body {
    overflow: visible;
  }
}

/* Messpunkt für den Zustandswechsel der Kopfzeile über dem Hero. */
.hero__sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 82%;
  pointer-events: none;
}

/* Logo und Schalter liegen über dem Panel. Das Panel ist ein Kind des
   Kopfbereichs, deshalb reicht dessen eigener z-index hier nicht aus. */
.site-header__logo,
.site-header__toggle {
  position: relative;
  z-index: 61;
}

.contact__direct--second {
  margin-top: 0.75rem;
}

/* --- Matterport-Einbettung ----------------------------------------------
   Die Fläche liegt zunächst leer da und wird erst auf Klick durch das
   iframe ersetzt. Mit 'autoload' steht das iframe von Anfang an im Markup. */

.tour {
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
  max-width: 56rem;
}

.tour__caption {
  text-align: center;
}

.tour__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--ink);
  overflow: hidden;
}

.tour__start {
  display: grid;
  place-content: center;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  padding: 2rem;
  border: 0;
  background:
    repeating-linear-gradient(-45deg, var(--ink) 0 12px, var(--ink-2) 12px 24px);
  color: var(--paper);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.tour__start:hover .tour__label {
  color: var(--accent-on-dark);
}

.tour__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-3);
  letter-spacing: -0.03em;
  color: var(--accent-on-dark);
}

.tour__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-2);
  letter-spacing: -0.02em;
  transition: color 0.2s var(--ease);
}

.tour__hint {
  font-size: var(--t--1);
  color: var(--grey-2);
  max-width: 34ch;
  margin-inline: auto;
  line-height: 1.5;
}

.tour__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.tour__fallback {
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  color: var(--paper);
  font-weight: 500;
}

.tour__caption {
  margin-top: 0.9rem;
  font-size: var(--t--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
}

.tour__note {
  display: block;
  margin-top: 0.3rem;
  letter-spacing: 0;
  text-transform: none;
}

/* --- Galerie einer Kategorie ---------------------------------------------
   Wächst über die Zeit. Bewusst schmucklos: Bild, Name, Jahr. Wer mehr
   erfahren will, fragt an, die vollständigen Galerien sind nicht öffentlich. */

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

.gallery__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 2.6vw, 2.25rem);
}

.gallery__media .media__img {
  transition: transform 0.6s var(--ease);
}

.gallery__name {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-1);
  letter-spacing: -0.02em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  justify-content: space-between;
}

.gallery__year {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t--1);
  letter-spacing: 0.08em;
  color: var(--grey);
}

@media (min-width: 44rem) {
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Zweispaltige Bildreihe unter der Einleitung einer Leistungsseite. */
.strip {
  display: grid;
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 44rem) {
  .strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Kleineres Kopfbild. Für Seiten, deren Aufmacher das Thema zeigt, aber nicht
   die ganze Breite tragen soll. Bleibt am linken Satzspiegelrand, damit es mit
   Augenbraue und Überschrift auf einer Kante sitzt. */
.page-hero__media--small {
  max-width: 44rem;
}

/* ==========================================================================
   Einwilligung für eingebettete Inhalte

   Ein Streifen am unteren Rand, der den Inhalt nicht zudeckt und nichts
   blockiert. Er muss nichts blockieren: Ohne Zustimmung lädt die Einbettung
   ohnehin nicht.

   Beide Knöpfe sehen gleich aus. Zustimmen darf nicht leichter fallen als
   ablehnen, sonst ist die Einwilligung keine.
   ========================================================================== */

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 80;
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}

.consent.is-open {
  transform: translateY(0);
}

.consent__inner {
  width: min(72rem, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  padding-block: clamp(1.1rem, 2.5vw, 1.6rem);
  display: grid;
  gap: 1.1rem;
  align-items: center;
}

@media (min-width: 52rem) {
  .consent__inner {
    grid-template-columns: 1fr auto;
    gap: 2.5rem;
  }
}

.consent__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.35rem;
}

.consent__body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(239, 239, 237, 0.78);
  max-width: 78ch;
}

.consent__body a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.consent__body a:hover {
  color: var(--accent-on-dark);
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.consent__button {
  flex: 1 1 auto;
  padding: 0.7rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--paper);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.consent__button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}

.consent__button:focus-visible {
  outline: 2px solid var(--accent-on-dark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .consent {
    transition: none;
  }
}

/* Der Widerruf in der Datenschutzerklärung. */

.consent-reset {
  margin-top: 1.2rem;
  padding: 1.2rem 1.4rem;
  border: var(--border);
  display: grid;
  gap: 0.9rem;
  justify-items: start;
}

.consent-reset__state {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--grey);
}