/* ==========================================================================
   lumé & co — Boutique Consulting
   Stylesheet · mobile-first · keine externen Ressourcen
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften (lokal, /fonts/)
   Die woff2-Dateien werden separat in /fonts/ abgelegt — siehe fonts/README.md
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 300 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  --anthrazit: #2B2B2B;
  --gold: #C7A87A;
  --offwhite: #F5F5F3;
  --warmgrey: #8A8A8A;
  --ink: #292929;      /* Überschriften und Links */
  --text: #555555;     /* Untertitel und Beschreibungstexte */
  --weight-reading: 400; /* Fließtexte auf allen Seiten: Inter Regular statt Light, siehe README */
  --caption: #6E6E6E;    /* Bildkennzeichnungen (KI-generierte Abbildungen) */

  --line: rgba(43, 43, 43, 0.14);
  --placeholder: #D8D5CF;
  --placeholder-dark: #75716B;

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: 1.25rem;
  --max: 75rem;
  --measure: 38rem;

  --space-s: 1.5rem;
  --space-m: 3rem;
  --space-l: 5rem;
  --space-xl: 7rem;
}

@media (min-width: 48em) {
  :root {
    --gutter: 4rem;
    --space-m: 4rem;
    --space-l: 7rem;
    --space-xl: 10rem;
  }
}

@media (min-width: 80em) {
  :root {
    --gutter: 3rem;
  }
}

@media (min-width: 75em) {
  :root {
    --gutter: 4rem;
  }
}

/* --------------------------------------------------------------------------
   3. Basis
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--anthrazit);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

p {
  margin: 0 0 1.25em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover {
  color: var(--gold);
}

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

::selection {
  background: var(--gold);
  color: var(--anthrazit);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Zusammengesetzte Begriffe nicht am Bindestrich umbrechen (z. B. Live-Commerce) */
.nowrap {
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--anthrazit);
  color: var(--offwhite);
  font-size: 0.8125rem;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
  color: var(--offwhite);
}

/* --------------------------------------------------------------------------
   4. Layout-Helfer
   -------------------------------------------------------------------------- */

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

@media (min-width: 80em) {
  .container {
    margin-inline: 0 auto;
    padding-inline-start: 14rem;
  }

  /* Header vollbreit: Logo bündig mit dem Inhalt (14rem), Nav am rechten Rand */
  .site-header__inner {
    max-width: none;
  }

  /* Volle Breite: links bündig mit dem Logo (14rem), rechts gleicher Abstand */
  .container--full {
    max-width: none;
    padding-inline-end: 14rem;
  }
}

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

/* Goldene Trennlinie zwischen zwei Abschnitten (wie unter dem Hero) */
.section--divider {
  border-top: 1px solid var(--gold);
}

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

.section + .section--ruled {
  border-top: 1px solid var(--line);
}

/* Kleine, gesperrte Überzeilen — das wiederkehrende Editorial-Element */
.eyebrow {
  display: block;
  margin: 0 0 1.5rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--warmgrey);
}

.eyebrow--gold {
  color: var(--gold);
}

.rule {
  display: block;
  width: 3rem;
  height: 1px;
  margin: 0 0 2rem;
  border: 0;
  background: var(--gold);
}

.lead {
  max-width: var(--measure);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text);
}

@media (min-width: 48em) {
  .lead {
    font-size: 1.1875rem;
  }
}

.muted {
  color: var(--text);
}

/* Fließtext: Inter Regular 400, #555555 – zentrale Regel für alle Seiten
   (Referenz: Insights-Artikel). Ausgenommen: Überschriften, goldene Akzente,
   Labels in Versalien, Navigation, Buttons, Zitate, Formularfelder, Footer. */
.lead,
.muted,
.hero__subline,
.tile p,
.why__facts dd,
.offer__body p:not(.offer__eyebrow),
.offer__blocks li,
.collab-note p:not(.collab-note__forms),
.service__body p,
.service__points,
.profile__text p:not(.profile__role),
.insight-feature__excerpt p,
.insight-item__excerpt,
.article__body,
.contact__intro p,
.contact__direct,
.form__note {
  font-family: var(--sans);
  font-weight: var(--weight-reading);
  color: var(--text);
}

/* Kennzeichnung KI-generierter Abbildungen: direkt unter dem Bild, linksbündig.
   Nur für KI-Bilder verwenden, nie für Originalfotografien. */
.ai-label {
  margin: 0.3125rem 0 0; /* Smartphone: 5 px Abstand zum Bild */
  font-family: var(--sans);
  font-size: 0.625rem; /* Smartphone: 10 px */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--caption);
}

/* Tablet: 10 px (wie Smartphone), 6 px Abstand */
@media (min-width: 48em) {
  .ai-label {
    margin-top: 0.375rem;
  }
}

/* Desktop: 11 px, 8 px Abstand */
@media (min-width: 64em) {
  .ai-label {
    margin-top: 0.5rem;
    font-size: 0.6875rem;
  }
}

/* Bild-Platzhalter: werden später durch <img> ersetzt */
.placeholder {
  position: relative;
  width: 100%;
  background: var(--placeholder);
  overflow: hidden;
}

.placeholder::after {
  content: attr(data-label);
  position: absolute;
  right: 1rem;
  bottom: 0.875rem;
  font-family: var(--sans);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(43, 43, 43, 0.35);
}

/* --------------------------------------------------------------------------
   5. Header & Navigation
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--line);
}

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

/* Header-Höhe ca. 104 px */
@media (min-width: 48em) {
  .site-header__inner {
    min-height: 6.5rem;
    padding-block: 1.25rem;
  }
}

.logo {
  display: inline-flex;
  flex-direction: column;
  gap: 0.3rem;
  text-decoration: none;
  color: var(--anthrazit);
  line-height: 1;
}

.logo:hover {
  color: var(--anthrazit);
}

.logo__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.8rem; /* ca. 29 px */
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.logo__sub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.6875rem; /* 11 px */
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--warmgrey);
}

.nav {
  margin-left: auto;
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.25rem; /* 36 px zwischen den Menüpunkten */
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  position: relative;
  display: inline-block;
  padding-block: 0.25rem;
  font-family: var(--sans);
  font-size: 0.75rem; /* 12 px */
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--anthrazit);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.13em; /* Sperrung des letzten Buchstabens ausgleichen */
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--anthrazit);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Mobil: Navigation unter dem Logo, volle Breite, alle vier Punkte in einer Zeile */
@media (max-width: 29.99em) {
  .nav {
    width: 100%;
  }

  .nav ul {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .nav a {
    font-size: 0.875rem;
    letter-spacing: 0.06em;
  }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 3rem; /* 48 px */
  padding: 0 1.875rem; /* 30 px */
  border: 1px solid #1A1A1A;
  border-radius: 8px;
  background: transparent;
  color: #1A1A1A;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em; /* ca. 2,4 px */
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.button::after {
  content: "→";
  font-size: 0.875rem;
  letter-spacing: 0;
  transition: transform 0.25s ease;
}

.button:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #1A1A1A;
}

.button:hover::after {
  transform: translateX(4px);
}

.text-link {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.3rem;
}

/* --------------------------------------------------------------------------
   7. Hero (Startseite)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  /* Bildschirmhöhe abzüglich Header, damit „Discover more" am unteren Bildrand sitzt */
  min-height: calc(100svh - 8.5rem);
  display: flex;
  align-items: center;
  padding-top: var(--space-s);
  border-bottom: 1px solid var(--gold);
}

@media (min-width: 48em) {
  .hero {
    min-height: calc(100svh - 6.6rem);
    padding-top: var(--space-m);
  }
}

.hero__inner {
  position: relative; /* Text über dem Bild */
  z-index: 1;
  width: 100%;
}

.hero__frame {
  position: relative;
  max-width: 52rem;
  padding-block: var(--space-m) 7rem; /* unten Platz für „Discover more" */
}

/* Hero-Bild: mobil vollbreit über dem Text, ungeschnitten (feste Seitenverhältnisse, kein Layout-Sprung) */
.hero__bg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
}

@media (max-width: 63.99em) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    padding-top: 0;
  }

  /* Tablet und Handy: Bild über dem Text, keine künstliche Mindesthöhe (keine Lücke) */
  .hero.hero {
    min-height: 0;
  }
}

/* Mobil: Headline passt in die Bildschirmbreite, Fakten untereinander, keine Leerfläche */
@media (max-width: 47.99em) {
  .hero {
    min-height: 0;
  }

  .hero .hero__claim {
    font-size: clamp(2.25rem, 9vw, 3.5rem);
  }

  .hero .hero__frame {
    padding-bottom: var(--space-m);
  }

  .hero .hero__frame > .hero__facts {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    justify-content: start;
    row-gap: 0.75rem;
    margin-top: 2.5rem;
  }

  .hero .hero__facts li {
    width: auto;
    font-size: 0.6875rem; /* 11 px, mobil besser lesbar */
  }

  .hero .hero__facts .hero__facts-sep {
    display: none;
  }

  .hero .hero__more {
    position: static;
    transform: none;
    align-self: center;
    padding-bottom: 2rem;
  }
}

/* Ab Desktop: Bild füllt den Hero (auch hinter dem Header). Die Bildhöhe richtet sich nach der
   Hero-Höhe, damit die Unterkante der Ringe (73,4 % der Bildhöhe) auf Höhe der Faktenzeile liegt
   und die Blume (ab 15 % der Bildhöhe) erst unter der Header-Linie beginnt. */
@media (min-width: 64em) {
  .hero__media {
    --h: calc(75.4cqh + 17.75rem);   /* Bildhöhe */
    --w: calc(var(--h) * 1672 / 941); /* Bildbreite */
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    container-type: size;
    background: #F8EFE7; /* Farbe des linken Bildrands, füllt sehr breite Bildschirme */
  }

  .hero__bg {
    position: absolute;
    top: 0;
    /* Ringe bei ca. 73 % der Breite; auf sehr breiten Bildschirmen rechtsbündig */
    left: max(calc((100cqw - var(--w)) * 0.73), calc(100cqw - var(--w)));
    width: var(--w);
    height: var(--h);
    max-width: none;
    aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12%);
  }
}

@media (min-width: 64em) {

  /* Links ganz leicht aufgehellt für ruhigen Texthintergrund */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1; /* über dem Bild, unter dem Text (folgt im DOM) */
    background:
      linear-gradient(0deg, rgba(245, 245, 243, 0.9) 0%, rgba(245, 245, 243, 0.6) 12%, rgba(245, 245, 243, 0) 28%),
      linear-gradient(90deg, rgba(245, 245, 243, 0.6) 0%, rgba(245, 245, 243, 0.3) 40%, rgba(245, 245, 243, 0) 60%);
    pointer-events: none;
  }

  .hero__frame {
    top: -5rem; /* Textblock nach oben (zusammen mit der kürzeren Hero-Höhe ca. 130 px) */
  }

  /* Startseite: Bild läuft hinter den Header, Linie unter dem Header bleibt */
  .home .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background: transparent;
  }

  .home .hero {
    min-height: 100svh;
    padding-top: calc(6.6rem + var(--space-m)); /* Header-Höhe: Text bleibt an derselben Stelle */
  }

  .hero__more {
    z-index: 1;
  }
}

/* KI-Kennzeichnung des Hero-Bilds: mobil und Tablet im Textfluss direkt unter dem Bild.
   Ab Desktop füllt das Bild den Hero, die Kennzeichnung steht direkt unter dessen
   Unterkante (goldene Linie) im oberen Innenabstand des folgenden Bereichs. */
@media (min-width: 64em) {
  .hero__ai-label {
    position: absolute;
    top: calc(100% + 1px); /* unter der 1 px starken Linie */
    left: 0;
    right: 0;
  }
}

/* Übertitel bestimmt die Breite der Faktenzeile unter den Buttons */
.hero__frame {
  display: grid;
  grid-template-columns: fit-content(100%) 1fr;
}

.hero__frame > * {
  grid-column: 1 / -1;
}

.hero__frame > .hero__eyebrow,
.hero__frame > .hero__facts {
  grid-column: 1;
}

/* Faktenzeile links und rechts bündig mit dem Übertitel */
.hero__facts {
  display: grid;
  grid-template-columns: auto 1px auto 1px auto;
  justify-content: space-between;
  column-gap: 1rem;
  width: 0;
  min-width: 100%;
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
}

.hero__facts li {
  width: min-content; /* Text endet genau am Rand */
  font-family: var(--sans);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--anthrazit);
}

.hero__facts .hero__facts-sep {
  width: 1px;
  background: var(--line);
}

/* Mittig am unteren Rand des Hero: V-Pfeil, darunter „Discover more" */
.hero__more {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: color 0.25s ease;
}

.hero__more:hover {
  color: var(--anthrazit);
}

.hero__eyebrow {
  font-size: 0.75rem; /* 12 px */
}

.hero__eyebrow span {
  color: var(--gold);
}

.hero__claim {
  margin: 0 0 2.5rem;
  font-family: var(--serif);
  font-size: clamp(3.5rem, 5.5vw, 6rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

.hero__subline {
  margin: 0 0 2rem;
  max-width: 40rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  min-height: 3rem; /* 48 px */
  padding: 0 1.875rem; /* 30 px */
  border: 1px solid #1A1A1A;
  border-radius: 8px;
  background: transparent;
  color: #1A1A1A;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.hero-cta::after {
  content: "→";
  display: inline-block;
  margin-left: 0.75rem;
  letter-spacing: 0;
  transition: transform 0.25s ease;
}

.hero-cta:hover::after {
  transform: translateX(4px);
}

.hero-cta:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #1A1A1A;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.5rem;
}

html {
  scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   8. Kacheln (Leistungen auf der Startseite)
   -------------------------------------------------------------------------- */

/* Immer gleiche Struktur: Eyebrow, darunter Headline, darunter Fließtext */
.section-head {
  margin-bottom: var(--space-m);
}

.section-head h2 {
  margin-bottom: 1rem;
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.section-head .muted {
  max-width: 38rem;
  font-size: 1rem;
  line-height: 1.6;
}

/* Button unter dem Fließtext: ca. 2 Fingerbreit mehr Abstand (1.25rem → 3.25rem) */
.section-head .muted + p {
  margin-top: 3.25rem;
}

.section-head > :last-child,
.section-head > :last-child > :last-child {
  margin-bottom: 0;
}

.tiles {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

@media (min-width: 48em) {
  .tiles {
    grid-template-columns: repeat(3, 1fr);
    border-top: 0;
  }
}

.tile {
  border-bottom: 1px solid var(--line);
}

@media (min-width: 48em) {
  .tile {
    border-bottom: 0;
    border-top: 1px solid var(--anthrazit);
  }

  .tile + .tile {
    border-left: 1px solid var(--line);
  }
}

.tile a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2.25rem 0;
  text-decoration: none;
  color: var(--anthrazit);
}

@media (min-width: 48em) {
  .tile a {
    padding: 2.5rem 2rem 3rem;
  }

  .tile:first-child a {
    padding-left: 0;
  }

  .tile:last-child a {
    padding-right: 0;
  }
}

.tile__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.75rem, 2.5vw, 2.25rem); /* 28–36 px */
  color: var(--gold);
  margin-bottom: 2rem;
}

@media (min-width: 48em) {
  .tile__num {
    margin-bottom: 4rem;
  }
}

.tile h3 {
  font-size: 1.8125rem; /* 29 px */
  margin-bottom: 1rem;
  transition: color 0.25s ease;
}

.tile p {
  color: var(--text);
  font-size: 1rem; /* 16 px */
  max-width: 34ch;
}

.tile__more {
  margin-top: auto;
  padding-top: 2rem;
  font-size: 0.8125rem; /* 13 px; margin-top: auto hält alle drei Links auf einer Linie */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

.tile__more::after {
  content: " ↗";
  display: inline-block;
  transition: transform 0.25s ease;
}

.tile a:hover h3 {
  color: var(--gold);
}

.tile a:hover .tile__more::after {
  transform: translateX(4px);
}

.cta-row {
  margin-top: var(--space-m);
}

/* Startseite, Warum LUMÉ & CO: Text links (ca. 55 %), Kennzahlen rechts (ca. 45 %) */
.why {
  display: grid;
  gap: var(--space-m);
}

.why__text h2 {
  margin-bottom: 1.5rem;
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.why__text .muted {
  max-width: 40rem;
  font-size: 1rem; /* wie alle Fließtexte (16 px) */
  line-height: 1.7;
}

.why__num {
  color: var(--gold);
}

.why__cta {
  margin-top: 3.25rem;
}

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

.why__facts > div {
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
}

.why__facts dt {
  margin-bottom: 0.5rem;
  font-family: var(--serif);
  font-size: 1.75rem; /* 28 px: jeder Punkt bleibt einzeilig */
  font-weight: 300;
  line-height: 1.1;
  color: var(--ink);
}

.why__facts dd {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}

@media (min-width: 64em) {
  .why {
    grid-template-columns: 55fr 45fr;
    column-gap: 6rem;
    align-items: center;
  }
}

/* Startseite: Kontakt-Teaser und Footer passen zusammen auf einen Bildschirm */
.home .site-footer {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Leistungsseite: kompakter Kopf, drei Kompetenzfelder, Zusammenarbeit
   -------------------------------------------------------------------------- */
.page-head.page-head--compact {
  padding-block: 5rem 5.625rem; /* 80 px unter der Navigation, 90 px bis zum ersten Feld */
}

.page-head.page-head--compact .eyebrow {
  margin-bottom: 1.5rem;
}

.page-head.page-head--compact h1 {
  max-width: 850px;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem); /* Desktop 52 px */
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
}

.page-head.page-head--compact .lead {
  max-width: 700px;
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
}

.offers {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid #E5E2DD;
}

.offer {
  display: grid;
  gap: 1.5rem;
  padding-block: 3rem;
  border-top: 1px solid #E5E2DD;
  scroll-margin-top: 2rem;
}

@media (min-width: 64em) {
  .offer {
    grid-template-columns: 40fr 60fr;
    column-gap: 4rem;
    padding-block: 4.375rem; /* 70 px */
  }
}

/* Nummerierung wie auf der Startseite */
.offer__num {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.75rem, 2.5vw, 2.25rem); /* 28–36 px */
  line-height: 1;
  color: var(--gold);
}

.offer__head h2,
.offer__head h3 {
  font-size: clamp(1.875rem, 3vw, 2.25rem); /* Desktop 36 px */
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}

.offer__body p {
  max-width: none;
  margin-bottom: 1em;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}

.offer__body p:first-child {
  color: var(--ink);
}

.offer__blocks {
  margin: 1.875rem 0 0; /* 30 px */
  padding: 0;
  list-style: none;
  border-top: 1px solid #E5E2DD;
}

.offer__blocks li {
  position: relative;
  padding: 0.8rem 0 0.8rem 1.75rem;
  border-bottom: 1px solid #E5E2DD;
  font-size: 0.9375rem; /* 15 px */
  line-height: 1.5;
  color: var(--text);
}

.offer__blocks li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* Zusammenarbeit: kompakte Ergänzung, kein vierter Leistungsbereich.
   Obere Trennlinie = feine Linie unter dem letzten Leistungsfeld. */
.collab-note {
  padding-block: 2.5rem;
}

.collab-note .eyebrow {
  margin-bottom: 1rem;
}

.collab-note h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 2.6vw, 2.125rem); /* bis 34 px */
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}

.collab-note p {
  max-width: 40rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}

.collab-note .collab-note__forms {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.collab-note__forms span {
  color: var(--gold);
}

/* Startseite, Leistungen: Eyebrow 12 px, Untertitel 17 px */
#leistungen .section-head .eyebrow {
  font-size: 0.75rem;
}

#leistungen .section-head .muted {
  font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   10. Seitenkopf (Unterseiten)
   -------------------------------------------------------------------------- */

.page-head {
  padding-block: var(--space-l) var(--space-m);
}

.page-head h1 {
  font-size: clamp(2.75rem, 8vw, 6rem);
  line-height: 1;
  max-width: 16ch;
}

.page-head .lead {
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   11. Leistungen
   -------------------------------------------------------------------------- */

.services {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: service;
}

.service {
  display: grid;
  gap: 1.5rem;
  padding-block: var(--space-m);
  border-top: 1px solid var(--line);
  scroll-margin-top: 2rem;
}

.service:last-child {
  border-bottom: 1px solid var(--line);
}

@media (min-width: 48em) {
  .service {
    grid-template-columns: 5rem 1fr 1fr;
    gap: 3rem;
  }
}

@media (min-width: 64em) {
  .service {
    grid-template-columns: 8rem 1.1fr 1fr;
    gap: 4rem;
  }
}

.service__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.75rem, 2.5vw, 2.25rem); /* 28–36 px, wie alle Nummerierungen */
  line-height: 1;
  color: var(--gold);
}

.service h2,
.service h3 {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  max-width: 18ch;
}

.service__body p {
  max-width: none;
  font-size: 1rem; /* wie alle Beschreibungstexte */
  color: var(--text);
}

.service__sub {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warmgrey);
}

.service__points {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--text);
}

.service__points li {
  padding-block: 0.6rem;
  border-top: 1px solid var(--line);
}

.service__points li::before {
  content: "—";
  margin-right: 0.75rem;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   12. Expertise
   -------------------------------------------------------------------------- */

.page-expertise .page-head--compact {
  padding-bottom: 3.5rem; /* Porträt früher sichtbar */
}

.page-expertise .page-head.page-head--compact h1 {
  font-size: clamp(2.25rem, 9vw, 2.5rem); /* mobil 36–40 px */
}

@media (min-width: 48em) {
  .page-expertise .page-head.page-head--compact h1 {
    font-size: 2.75rem; /* Tablet 44 px */
  }
}

@media (min-width: 75em) {
  .page-expertise .page-head.page-head--compact h1 {
    font-size: 3.375rem; /* Desktop 54 px */
  }
}

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

@media (min-width: 48em) {
  .profile {
    grid-template-columns: minmax(0, 320px) minmax(0, 780px);
    column-gap: 3.5rem;
    align-items: center;
  }
}

@media (min-width: 64em) {
  .profile {
    grid-template-columns: 380px minmax(0, 780px);
    column-gap: 5.5rem;
  }
}

.profile__photo {
  max-width: 400px;
  margin: 0;
}

.portrait {
  background: #F5F5F3;
}

.portrait img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #F5F5F3;
}

.profile__role {
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.profile__text h2 {
  margin-bottom: 2rem;
  font-size: clamp(2.25rem, 3vw, 2.625rem); /* 38–42 px */
  font-weight: 400;
}

.profile__text p:not(.profile__role) {
  max-width: none;
  margin-bottom: 1.4em;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
}

/* Kompetenzfelder: Layout der Leistungsseite, etwas kompakter */
.competence-section {
  padding-block: var(--space-l) 0;
}

.competence-section > .container > .eyebrow {
  margin-bottom: 2rem;
}

.offers--competence .offer {
  padding-block: 2.5rem;
}

@media (min-width: 64em) {
  .offers--competence .offer {
    padding-block: 3.75rem; /* 60 px */
  }
}

.offers--competence .offer__head h3 {
  font-size: 1.75rem; /* mobil 28 px */
}

@media (min-width: 48em) {
  .offers--competence .offer__head h3 {
    font-size: 1.9375rem; /* Tablet 31 px */
  }
}

@media (min-width: 75em) {
  .offers--competence .offer__head h3 {
    font-size: 2.25rem; /* Desktop 36 px */
  }
}

.offer__eyebrow {
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warmgrey);
}

.offers--competence .offer__body p:first-child {
  color: var(--warmgrey);
}

.offers--competence .offer__body p:nth-child(2) {
  color: var(--text);
}

/* Abschlussbereich (gemeinsame Komponente für Expertise und Leistungen):
   Bereichsbezeichnung, Überschrift, Text, Button – identische Abstände.
   Desktop: einheitliche Höhe 420 px, oben 90 px Innenabstand, Inhalt oben ausgerichtet. */
.section.closing {
  padding-block: 4rem;
}

.closing .eyebrow {
  margin-bottom: 1.25rem;
}

.closing h2 {
  max-width: 40rem;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 3.2vw, 2.5rem); /* bis 40 px */
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}

.closing .muted {
  max-width: 40rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
}

.closing .closing__cta {
  margin: 2rem 0 0;
}

/* B2B-Hinweis am Ende der Leistungsseite: dezent, ohne Hervorhebung */
.b2b-note {
  margin: 3.5rem 0 0; /* 56 px Abstand zum Button */
  font-family: var(--sans);
  font-size: 0.75rem; /* 12 px */
  font-weight: 400;
  line-height: 1.6;
  color: var(--caption); /* #6E6E6E */
}

@media (min-width: 64em) {
  .section.closing {
    min-height: 420px;
    padding-block: 90px 3rem;
  }
}

/* --------------------------------------------------------------------------
   13. Insights
   -------------------------------------------------------------------------- */

/* Insights – Abstände nach Skala 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 120 px.
   Alle Margins explizit gesetzt (globale p-Margins überschrieben). */

/* Kopf */
.page-insights .page-head.page-head--compact {
  padding-bottom: 4rem; /* 64 + 48 (Featured oben) = 112 px bis zum Featured Insight */
}

.page-insights .page-head.page-head--compact h1 {
  font-size: clamp(2.25rem, 8vw, 2.75rem);
  line-height: 1.1;
}

@media (min-width: 48em) {
  .page-insights .page-head.page-head--compact h1 {
    font-size: clamp(2.75rem, 4.5vw, 3.5rem); /* bis 56 px */
  }
}

.page-insights .page-head.page-head--compact .lead {
  max-width: 620px;
  margin: 1.5rem 0 0; /* 24 px */
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Metazeile: MONAT JAHR · KATEGORIE */
.insight__meta {
  margin: 0;
  font-size: 0.75rem; /* 12 px */
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Featured Insight: ein Grid, zwei direkte Kinder (Text links, Bild rechts) */
.insight-feature {
  padding-block: 3rem 6.25rem; /* 48 oben, 100 px bis zum nächsten Bereich */
}

.featured-grid {
  display: grid;
  gap: 3rem;
  max-width: 1240px;
  margin-inline: 0 auto; /* linksbündig mit dem Seitenkopf, nicht zentriert */
}

@media (min-width: 56em) {
  .featured-grid {
    /* 65 % Text / 35 % Bild des Platzes nach Abzug des Spaltenabstands */
    grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
    column-gap: 4rem; /* 64 px */
    align-items: start; /* Bildoberkante auf Höhe der Datumszeile */
  }
}

.article-content .insight__meta {
  margin-bottom: 1.375rem; /* 22 px */
  font-size: 0.6875rem; /* 11 px */
  letter-spacing: 0.15em;
}

.article-content h2 {
  margin: 0 0 0.875rem; /* 14 px */
  font-size: clamp(2.25rem, 3.4vw, 2.625rem); /* bis 42 px */
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
}

.article-content h2 a,
.insight-item h2 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.article-content h2 a:hover,
.article-content h2 a:focus-visible,
.insight-item h2 a:hover,
.insight-item h2 a:focus-visible {
  color: var(--gold);
}

.article-image a {
  display: block;
  height: 100%;
}

/* Bild mit Kennzeichnung: Rahmen um .article-image und .ai-label, Bildmaße unverändert */
.article-media {
  margin: 0;
}

.insight-feature__subtitle {
  margin: 0 0 1.875rem; /* 30 px */
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3125rem; /* 21 px */
  line-height: 1.4;
  color: var(--ink);
}

.insight-feature__excerpt p {
  max-width: 38rem; /* ca. 65–70 Zeichen pro Zeile */
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
}

.insight-feature__excerpt p + p {
  margin-top: 1rem; /* 16 px */
}

/* Bild: zurückhaltender Akzent. Desktop ca. 290 px hoch, volle Spaltenbreite; mobil 3:2 */
.article-image {
  margin: 0;
  aspect-ratio: 3 / 2;
}

.article-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% center; /* alle Ringe vollständig sichtbar */
}

/* Zweispaltig: Bild beginnt auf Höhe der Headline (Datumszeile + 22 px darüber),
   wird nicht auf Texthöhe gestreckt; darunter bleibt Weißraum.
   Schmalere Bildschirme: Höhe aus der Breite, damit alle Ringe sichtbar bleiben. */
@media (min-width: 56em) {
  .article-image {
    margin-top: calc(0.6875rem * 1.7 + 1.375rem);
    aspect-ratio: 4 / 3;
  }
}

/* Ab 1440 px: feste Bildhöhe 290 px */
@media (min-width: 90em) {
  .article-image {
    aspect-ratio: auto;
    height: 290px;
  }
}

@media (max-width: 55.99em) {
  .article-image--empty {
    display: none;
  }
}

/* Dezenter Textlink mit feiner Linie */
.insight-link {
  display: inline-block;
  margin-top: 1.875rem; /* 30 px */
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--gold);
  font-size: 0.75rem; /* 12 px */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.25s ease, border-color 0.25s ease;
}

a.insight-link:hover,
a.insight-link:focus-visible {
  color: var(--gold);
  border-color: var(--ink);
}

/* Artikel noch nicht veröffentlicht: sichtbar, nicht anklickbar */
.insight-link--pending {
  cursor: default;
}

/* Ausblick: Trennlinie (nur Inhaltsbreite), 72 px bis zum Ausblick */
.insight-list > .container::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 4.5rem; /* 72 px */
  background: #E5E2DD;
}

.insight-list .eyebrow {
  margin: 0 0 2rem; /* 32 px */
  font-size: 0.75rem;
  letter-spacing: 0.15em;
}

.insight-items {
  display: grid;
  gap: 3rem;
}

@media (min-width: 48em) {
  .insight-items {
    grid-template-columns: 1fr 1fr;
    column-gap: 3.75rem; /* 60 px */
  }
}

.insight-item {
  margin: 0;
}

.insight-item .insight__meta {
  margin-bottom: 1rem; /* 16 px */
}

.insight-item h2 {
  margin: 0 0 1rem; /* 16 px */
  font-size: clamp(1.625rem, 2.2vw, 1.75rem); /* 26–28 px */
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

.insight-item__excerpt {
  max-width: 32rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}

.insight-item__status {
  margin: 1.5rem 0 0; /* 24 px */
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--warmgrey);
}

/* Artikelseite (/insights/<slug>, wird erst bei Veröffentlichung erzeugt)
   Eine Lesespalte von max. 720 px, linksbündig an der Inhaltskante. */
.article {
  padding-block: 5rem 7rem; /* 80 px unter der Navigation, 112 px bis zum Footer */
}

.article__head,
.article__body,
.article__back {
  max-width: 45rem; /* 720 px */
}

.article__meta {
  margin: 0 0 1.75rem; /* 28 px */
  font-size: 0.6875rem; /* 11 px */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}

.article__head h1 {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 3.5rem); /* 40–56 px */
  font-weight: 400;
  line-height: 1.08;
  color: var(--ink);
}

.article__subtitle {
  margin: 1.125rem 0 0; /* 18 px */
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3125rem, 2.4vw, 1.5rem); /* 21–24 px */
  line-height: 1.4;
  color: var(--ink);
}

/* feine Goldlinie zwischen Titelbereich und Text */
.article__head::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin-top: 3rem; /* 48 px */
  background: var(--gold);
}

.article__body {
  padding-top: 3rem; /* 48 px */
}

.article__body p {
  margin: 0 0 1.25rem; /* 20 px */
  font-size: 1.0625rem; /* 17 px */
  line-height: 1.75;
  color: var(--text);
}

.article__body h2 {
  margin: 4rem 0 1.5rem; /* 64 px davor, 24 px danach */
  font-size: clamp(1.75rem, 3vw, 2.125rem); /* 28–34 px */
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

.article__body > h2:first-child {
  margin-top: 0;
}

/* hervorgehobene Kernsätze im Fließtext */
.article__body .article__emphasis {
  margin-block: 1.75rem; /* 28 px */
  color: var(--ink);
}

.article__body strong {
  font-weight: 500;
  color: var(--ink);
}

/* Pull-Quotes: an ihrer Stelle im Text, Serif kursiv, feine Goldlinie links */
.article__body .article__quote {
  margin: 2.75rem 0; /* 44 px */
  padding-left: 1.5rem;
  border-left: 1px solid var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 1.875rem); /* 24–30 px */
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
}

.article__body .article__quote strong {
  font-weight: 500;
}

@media (min-width: 48em) {
  .article__body .article__quote {
    padding-left: 2rem;
  }
}

/* Ampelmodell: feine Linien, kleiner Farbpunkt statt farbiger Boxen */
.article__signals {
  margin: 1.75rem 0 2.5rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid #E5E2DD;
}

.article__signal {
  display: grid;
  gap: 0.375rem;
  padding: 1.125rem 0; /* 18 px */
  border-bottom: 1px solid #E5E2DD;
  font-size: 1.0625rem;
  font-weight: var(--weight-reading);
  line-height: 1.7;
  color: var(--text);
}

.article__signal strong {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem; /* 12 px */
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}

.article__signal strong::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--signal);
}

.article__signal--green  { --signal: #8FA48A; }
.article__signal--orange { --signal: #D1A15F; }
.article__signal--red    { --signal: #B4705F; }

@media (min-width: 40em) {
  .article__signal {
    grid-template-columns: 8rem minmax(0, 1fr);
    column-gap: 1.5rem;
  }

  .article__signal strong {
    height: 1.8rem; /* auf die erste Textzeile ausgerichtet */
  }
}

.article__back {
  margin: 4rem 0 0; /* 64 px */
}

.article__back .insight-link {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   14. Kontakt / Formular
   -------------------------------------------------------------------------- */

.contact-page {
  padding-block: 5rem 0; /* 80 px unter der Navigation; unten nur der Footer-Abstand (ca. 112 px) */
}

/* Grid: Kopf links oben, darunter Einleitung + Formular; Foto rechts ab Höhe der Einleitung.
   Mobil: Kopf, Einleitung, Formular, E-Mail, Foto. */
.contact {
  display: grid;
  gap: 2.5rem;
  max-width: 1240px;
}

.contact__head .eyebrow {
  margin-bottom: 1.5rem;
}

.contact__head h1 {
  font-size: clamp(2.25rem, 7vw, 2.75rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
}

.contact__intro {
  max-width: 520px;
  margin-bottom: 3rem;
}

.contact__intro p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
}

.contact__intro p + p {
  margin-top: 1rem;
}

.contact .form {
  gap: 2.5rem;
}

.contact .field textarea {
  min-height: 8rem;
}

/* Button: Standard-Button der Website (Rahmen, Hover gold), nur mit Pfeil ↗ */
.contact__submit.button::after {
  content: "↗";
}

.contact__direct {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}

.contact__direct a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color 0.25s ease;
}

.contact__direct a:hover,
.contact__direct a:focus-visible {
  color: var(--gold);
}

.contact__photo {
  max-width: 420px; /* einspaltig: Foto begleitet, dominiert nicht */
  margin: 0;
}

.contact__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%; /* Gesicht und Oberkörper */
}

@media (min-width: 48em) {
  .contact__head h1 {
    font-size: 3.125rem; /* 50 px */
  }
}

/* Zweispaltig: 62 % / 38 % nach Abzug des Spaltenabstands */
@media (min-width: 56em) {
  .contact {
    grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
    column-gap: 4.5rem; /* 72 px */
    row-gap: 2rem;
    align-items: start;
  }

  .contact__head {
    grid-column: 1;
    grid-row: 1;
  }

  .contact__main {
    grid-column: 1;
    grid-row: 2;
  }

  .contact__direct {
    grid-column: 1;
    grid-row: 3;
  }

  /* Foto: Oberkante auf Höhe der Einleitung, Unterkante auf Höhe des Buttons
     (Zeile 2 endet mit dem Formular). Nicht verzerrt: cover. */
  .contact__photo {
    position: relative;
    align-self: stretch;
    max-width: none;
    grid-column: 2;
    grid-row: 2;
  }

  .contact__photo img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

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

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

.field label {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warmgrey);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid rgba(43, 43, 43, 0.35);
  border-radius: 0;
  background: transparent;
  color: var(--anthrazit);
  font-family: var(--sans);
  font-size: 1rem; /* verhindert Zoom auf iOS */
  font-weight: 300;
  line-height: 1.6;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}

.field textarea {
  min-height: 10rem;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
  box-shadow: 0 1px 0 0 var(--gold);
}

.form__honeypot {
  display: none;
}

.form__note {
  font-size: 0.8125rem;
  color: var(--text); /* #555555 statt #8A8A8A: ausreichender Kontrast für den Datenschutzhinweis */
  max-width: var(--measure);
}

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
}

/* --------------------------------------------------------------------------
   15. Rechtstexte (Impressum, Datenschutz)
   -------------------------------------------------------------------------- */

.legal {
  max-width: 44rem;
}

.legal h2 {
  margin: 3.5rem 0 1rem;
  font-size: 1.875rem;
}

.legal h2:first-child {
  margin-top: 0;
}

.legal h3 {
  margin: 2rem 0 0.75rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.legal p,
.legal li {
  font-size: 0.9375rem;
}

.legal ul {
  padding-left: 1.25rem;
  margin: 0 0 1.25em;
}

.legal li {
  margin-bottom: 0.4em;
}

.legal address {
  font-style: normal;
  margin-bottom: 1.25em;
}

.legal .stand {
  margin-top: 3.5rem;
  font-size: 0.8125rem;
  color: var(--warmgrey);
}

mark.todo {
  background: rgba(199, 168, 122, 0.25);
  color: inherit;
  padding: 0 0.2em;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--space-l);
  padding-block: var(--space-l) 2rem;
  background: #1A1A1A;
  color: var(--offwhite);
  font-size: 0.8125rem;
}

.site-footer__grid {
  display: grid;
  gap: 2.5rem;
}

/* Logo links, „Seiten“ und „Kontakt“ nebeneinander am rechten Rand */
@media (min-width: 48em) {
  .site-footer__grid {
    grid-template-columns: 1fr auto auto;
    gap: 3rem 5rem;
  }
}

/* Footer schmal: alles in einer Zeile, Spaltenüberschriften nur für Screenreader */
@media (min-width: 64em) {
  .site-footer {
    padding-block: 2rem 1.25rem;
  }

  .site-footer .site-footer__grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
  }

  .site-footer .site-footer__grid > div:last-child {
    display: flex;
    align-items: center;
    gap: 1.75rem;
  }

  .site-footer .site-footer__grid h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .site-footer .site-footer__grid ul {
    display: flex;
    gap: 1.75rem;
  }

  .site-footer .site-footer__grid li + li {
    margin-top: 0;
  }

  .site-footer .site-footer__social {
    margin-top: 0;
  }

  .site-footer .site-footer__bottom {
    margin-top: 1.5rem;
    padding-top: 1rem;
  }
}

.site-footer .logo {
  color: var(--offwhite);
}

.site-footer h2 {
  margin-bottom: 1rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li + li {
  margin-top: 0.4rem;
}

.site-footer a {
  text-decoration: none;
  transition: color 0.25s ease;
}

.site-footer a:hover,
.site-footer a[aria-current="page"] {
  color: var(--gold);
}

.site-footer__social {
  display: inline-flex;
  margin-top: 1.5rem;
  color: var(--gold);
}

.site-footer__social:hover {
  color: var(--offwhite);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: var(--space-m);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(199, 168, 122, 0.35);
  font-size: 0.75rem;
  color: var(--warmgrey);
}

/* --------------------------------------------------------------------------
   17. Bewegung reduzieren
   -------------------------------------------------------------------------- */

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