/* ==========================================================================
   PURPLERHINO REAL ESTATE — Startseite
   Redesign nach Purplerhino-Start.dc.html (Claude Design).

   Aufbau:
     1. Schriften (selbst gehostet — keine externen Requests)
     2. Tokens
     3. Basis & Hilfsklassen
     4. Kopfzeile
     5. Hero
     6. Wertschöpfungskette
     7. Unternehmen
     8. Zwei Türen
     9. Kontaktband
    10. Fußzeile
    11. Bewegungsreduktion
   ========================================================================== */

/* 1. Schriften ============================================================ */
/* Instrument Sans — normal, latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Instrument Sans — normal, latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Serif 4 — italic, latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Serif 4 — italic, latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Serif 4 — normal, latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Serif 4 — normal, latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Tokens =============================================================== */
:root {
  /* Flächen */
  --bg: #faf7f2;
  --surface: #fff;

  /* Schriftfarben */
  --ink: #292233;
  --ink-2: #3c3450;
  --body: #5c5569;
  --muted: #6f6880;
  /* Im Mockup #8d859c bzw. #a49cb3 — beide bleiben auf dem warmen Grund unter
     4.5:1 (3.29 und 2.46). Auf den hellsten Ton angehoben, der AA hält: 4.62:1. */
  --muted-2: #756c8a;
  --faint: #756c8a;

  /* Marke */
  --violet: #5b47a5;
  --violet-hover: #4a3890;
  --violet-deep: #43327e;

  /* Linien */
  --line: #ddd3ea;
  --line-2: #d9d2e6;
  --line-3: #efe9e0;
  --line-4: #eee7dc;

  /* Dunkle Flächen */
  --deep-1: #2a2050;
  --deep-2: #463379;
  --night: #1c1530;

  /* Raster */
  --shell: 1280px;
  --gutter: clamp(20px, 4.4vw, 56px);
  /* Gemessene Höhe der Kopfzeile — der Hero zieht sie von 100dvh ab. */
  --header-h: 88px;
  /* Wie weit das Zeichen ins violette Band ragt. Die Tore rechnen damit. */
  --mark-overlap: clamp(18px, 3.4vh, 34px);
  --radius-s: 10px;
  --radius-l: 20px;
  --radius-xl: 22px;


  /* Typoskala — acht Rollen statt siebzehn. Die Stufe h3→Fließtext liegt bei
     1.25×, darunter wären es Abstufungen, die niemand als Hierarchie liest. */
  --fs-display-l: clamp(2.125rem, 1.44rem + 2.9vw, 3.625rem);
  --fs-display-m: clamp(2rem, 1.42rem + 2.45vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.44rem + 1.3vw, 2.375rem);
  --fs-h3: 1.25rem;
  --fs-lead: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.8125rem;
  --fs-numeral: 2rem;

  /* Abstandsraster auf 4er-Basis. Vorher lagen 18 verschiedene Werte im Umlauf. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;

  /* Typografie */
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

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

/* 3. Basis & Hilfsklassen ================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* Hält die Fußzeile auch auf kurzen Seiten (Impressum) unten. */
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
  /* Deutsche Komposita sind lang. `break-word` greift nur, wenn ein Wort
     sonst überliefe — es ist die Notbremse, keine Dauerregel. */
  overflow-wrap: break-word;
}

a {
  color: var(--violet);
  text-decoration: none;
}

a:hover {
  color: var(--violet-deep);
}

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

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

main {
  flex: 1 0 auto;
}

main:focus {
  outline: none;
}

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

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 10;
  background: var(--violet);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-s);
  font-weight: 600;
  transition: top 0.15s var(--ease);
}

.skip-link:focus-visible {
  top: 12px;
  color: #fff;
}

.section-title {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* Freistehende Links: mit Innenabstand auf mindestens 24px Höhe, damit sie
   auch auf dem Touchscreen sicher zu treffen sind. Links mitten im Fließtext
   bleiben unberührt — dort wäre zusätzliche Höhe nur Zeilenchaos. */
.text-link {
  display: inline-block;
  padding-block: 4px;
  font-weight: 600;
  font-size: var(--fs-body);
}

/* Buttons — Mindesthöhe 44px für Touch-Ziele */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-s);
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.2;
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease),
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.btn--primary {
  background: var(--violet);
  color: #fff;
}

.btn--primary:hover {
  background: var(--violet-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgb(91 71 165 / 0.28);
}

.btn--ghost {
  border-color: var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
}

.btn--ghost:hover {
  border-color: var(--violet);
  color: var(--violet);
}

.btn--light {
  background: #fff;
  color: var(--deep-1);
}

.btn--light:hover {
  color: var(--deep-1);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgb(0 0 0 / 0.3);
}

.btn--outline {
  border-color: rgb(255 255 255 / 0.5);
  color: #fff;
}

.btn--outline:hover {
  background: rgb(255 255 255 / 0.15);
  color: #fff;
}

/* Einblenden beim Laden */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes floatY {
  from {
    transform: translateY(-8px);
  }
  to {
    transform: translateY(10px);
  }
}

.reveal {
  animation: fadeUp 0.7s 0.05s var(--ease) both;
}
.reveal--d1 {
  animation-delay: 0.15s;
}
.reveal--d2 {
  animation-delay: 0.25s;
}
.reveal--d3 {
  animation-delay: 0.35s;
}
.reveal--slow {
  animation-duration: 0.9s;
  animation-delay: 0.2s;
}

/* 4. Kopfzeile ============================================================ */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 26px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}

.brand:hover {
  color: var(--ink);
}

.brand__mark {
  height: 36px;
  width: auto;
  display: block;
}

.brand__name {
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: 0.16em;
}

.brand__suffix {
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  color: var(--muted-2);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  font-size: var(--fs-small);
  font-weight: 500;
}

.site-nav a {
  color: var(--muted);
  padding-block: 6px;
}

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

/* 5. Hero ================================================================= */
/* Ein Bildschirm, ein Gedanke: Bühne oben, Gabelung am unteren Faltrand.
   `min-height` statt `height`, damit kurze Viewports (Telefon quer) den
   Inhalt nicht zusammenquetschen, sondern die Sektion wachsen lassen. */
.hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--header-h));
  /* Das Zeichen läuft über die Rasterkante hinaus — `clip` begrenzt das,
     ohne einen Bildlaufcontainer zu erzeugen. */
  overflow-x: clip;
}

/* Die Bühne läuft rechts bis an die Fensterkante, damit das Zeichen wirklich
   aus dem Bild läuft. Der linke Innenabstand ist so gerechnet, dass der Text
   trotzdem exakt auf der Rasterkante der übrigen Seite sitzt — ohne `vw`, das
   die Bildlaufleiste mitzählen würde und das Horn beschneiden könnte. */
.hero__stage {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  align-items: stretch;
  gap: clamp(24px, 3vw, 48px);
  padding-block: clamp(24px, 4vh, 52px) 0;
  padding-left: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
  padding-right: 0;
}

/* Oben Kernsatz, unten der Hinweis — die Spalte ist an beiden Enden verankert.
   Die Leere dazwischen ist dadurch gerahmter Weißraum statt eines Lochs. */
.hero__words {
  display: flex;
  flex-direction: column;
  padding-bottom: clamp(20px, 3vh, 36px);
}

.hero__claim {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.375rem, 1.5rem + 3.9vw, 4.875rem);
  line-height: 1.03;
  letter-spacing: -0.015em;
}

.hero__claim em {
  color: var(--violet);
}

.hero__words .hero__lead {
  max-width: 50ch;
  margin-bottom: 26px;
}

/* Scroll-Hinweis: benennt, was unten kommt, und führt hin. Ersetzt die
   frühere Versalzeile — 40 Zeichen Großbuchstaben sind ein Satz, kein Label. */
.hero__cue {
  /* Verankert die Spalte unten. */
  margin-top: auto;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 6px;
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 500;
  transition: color 0.2s var(--ease);
}

.hero__cue:hover {
  color: var(--violet);
}

.hero__chevron {
  width: 18px;
  height: 18px;
  flex: none;
  animation: nudge 2.8s var(--ease) 1.4s infinite;
}

.hero__cue:hover .hero__chevron {
  animation-play-state: paused;
}

@keyframes nudge {
  0%,
  70%,
  100% {
    transform: translateY(0);
  }
  85% {
    transform: translateY(3px);
  }
}

/* Die Bildmarke — zum ersten Mal in voller Stärke statt als Textur. */
/* Läuft nach rechts aus dem Raster, nie nach links in den Text. Der
   Überstand entspricht genau dem Außenabstand, damit das Zeichen bei
   schmalen Fenstern exakt an der Kante endet und nie beschnitten wird. */
/* Das Tier greift über die Bandkante und liegt davor, nicht dahinter — sonst
   enden die Beine an einer harten Kante wie abgeschnitten. Der Betrag steht
   als Token, weil der Innenabstand der Tore ihn kennen muss: sonst legen sich
   die Beine über die Beschriftung. `pointer-events: none`, damit das
   Zierelement niemals einen Klick abfängt, der dem Tor gilt. */
.hero__markwrap {
  position: relative;
  z-index: 1;
  align-self: end;
  margin-bottom: calc(-1 * var(--mark-overlap));
  pointer-events: none;
}

/* Kein Dauerschweben. Das Zeichen ist jetzt groß genug, um ohne Bewegung zu
   tragen — und „Motion: dezent" heißt, dass ein Logo nicht endlos wippt.
   Es bekommt genau einen Auftritt beim Laden, sonst steht es still. */
.hero__rhino {
  display: block;
  width: 100%;
  height: auto;
}

/* Die Gabelung. Der Kernsatz ist eine Doppeldeutigkeit; die beiden Türen
   sind seine beiden Lesarten. Gleichrangig heißt hier wirklich gleich:
   gleiche Fläche, gleiche Farbe, gleiches Gewicht — unterschieden wird
   über die Worte, denn die sind es, die beim Suchen helfen. */
.hero__fork {
  background: var(--violet);
  color: #fff;
}

.hero__gates {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.gate {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: calc(var(--mark-overlap) + clamp(20px, 2.2vw, 30px));
  padding-bottom: clamp(26px, 3.4vw, 50px);
  color: #fff;
}

.gate:first-child {
  padding-right: clamp(18px, 2.4vw, 36px);
}

.gate:last-child {
  padding-left: clamp(18px, 2.4vw, 36px);
  border-left: 1px solid rgb(255 255 255 / 0.24);
}

.gate:hover {
  color: #fff;
}

/* Der Fokusring ist sonst violett auf violett — also unsichtbar. */
.hero__fork :focus-visible {
  outline-color: #fff;
}

.gate__who {
  font-size: var(--fs-small);
  font-weight: 600;
  color: rgb(255 255 255 / 0.82);
}

.gate__line {
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 0.98rem + 0.85vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.gate__go {
  margin-top: var(--s-1);
  font-size: var(--fs-body);
  font-weight: 600;
}

/* Kein Flächen-Hover: Die Kachel endet an der Rasterkante, eine Farbfläche
   würde dort sichtbar abbrechen. Stattdessen reagieren Wort und Pfeil. */
.gate__go span {
  display: inline-block;
  transition: transform 0.2s var(--ease);
}

.gate:hover .gate__go {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
}

.gate:hover .gate__go span {
  transform: translateX(4px);
}

.hero__lead {
  max-width: 44ch;
  margin: 0 0 30px;
  font-size: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  line-height: 1.65;
  color: var(--body);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* 6. Wertschöpfungskette ================================================== */
.chain {
  background: var(--surface);
  border-top: 1px solid var(--line-3);
}

.chain__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-9);
  padding-block: 60px;
}

/* 7. Unternehmen ========================================================== */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
  padding-block: 80px;
}

.about__media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 24px 60px rgb(41 34 51 / 0.16);
}

.about__media img {
  display: block;
  width: 100%;
  height: clamp(260px, 32vw, 400px);
  object-fit: cover;
  object-position: 55% 35%;
}

.about__text p {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--body);
}

.about__text p:last-of-type {
  margin-bottom: 24px;
}

/* 8. Zwei Türen =========================================================== */
.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-bottom: 80px;
}

.door {
  position: relative;
  display: block;
  height: clamp(260px, 30vw, 360px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: #fff;
  transition: transform 0.25s var(--ease);
}

.door:hover {
  transform: translateY(-4px);
  color: #fff;
}

.door__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Im Mockup 0 % → 40 %, dann 0.72. Gemessen über den tatsächlichen Fotos hält
   das die Kachelüberschrift nur auf 3.3:1 (Desktop) bzw. 2.8:1 (mobil, wo die
   Überschrift unter 24px fällt und damit 4.5:1 braucht). Früher einsetzend und
   kräftiger: schlechtester Wert jetzt 5.06:1. Der Spielraum trägt auch die
   späteren eigenen Fotos, deren Helligkeit wir noch nicht kennen. */
.door__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(20 14 36 / 0) 30%,
    rgb(20 14 36 / 0.6) 70%,
    rgb(20 14 36 / 0.9) 100%
  );
}

.door__body {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 28px;
}

.door__eyebrow {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.92;
}

.door__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.14rem + 0.95vw, 1.75rem);
  line-height: 1.15;
}

/* 9. Kontaktband ========================================================== */
#kontakt {
  padding-bottom: 72px;
  scroll-margin-top: 24px;
}

.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 4.4vw, 56px);
  border-radius: var(--radius-l);
  color: #fff;
  background:
    linear-gradient(105deg, rgb(255 255 255 / 0.09) 0%, rgb(255 255 255 / 0) 34%),
    linear-gradient(120deg, var(--deep-1), var(--deep-2));
}

.cta__mark {
  position: absolute;
  right: -90px;
  bottom: -130px;
  width: 560px;
  max-width: none;
  opacity: 0.22;
  animation: floatY 8s ease-in-out infinite alternate;
}

.cta__text {
  position: relative;
  max-width: 56ch;
}

.cta__title {
  margin: 0 0 var(--s-4);
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.cta__lead {
  margin: 0 0 var(--s-7);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: rgb(255 255 255 / 0.78);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}

/* 10. Fußzeile ============================================================ */
.site-footer {
  background: var(--night);
  color: rgb(255 255 255 / 0.7);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 28px;
  font-size: var(--fs-small);
}

.site-footer__logo {
  height: 68px;
  width: auto;
  display: block;
  flex: none;
}

/* Vorher eine Zeile mit 91 Zeichen. Drei Segmente mit Abstand statt
   Mittelpunkten: sie brechen sauber um und lesen sich mobil als Block. */
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s-5);
  row-gap: var(--s-1);
  margin: 0;
}

.site-footer__meta a {
  color: rgb(255 255 255 / 0.85);
}

.site-footer__meta a:hover,
.site-footer__legal:hover {
  color: #fff;
}

.site-footer__legal {
  display: inline-block;
  padding-block: 4px;
  color: rgb(255 255 255 / 0.7);
  white-space: nowrap;
}

.site-footer :focus-visible {
  outline-color: #fff;
}

/* 11. Unterseiten ========================================================= */

/* Seitenkopf mit Wasserzeichen (Unternehmen) */
.page-head {
  position: relative;
  overflow: hidden;
}

.page-head__watermark {
  position: absolute;
  right: -160px;
  top: -20px;
  width: 760px;
  max-width: none;
  opacity: 0.06;
  animation: floatY 10s ease-in-out infinite alternate;
}

.page-head__inner {
  position: relative;
  padding-block: 56px 48px;
}

.page-title {
  max-width: 22ch;
  margin: 0 0 var(--s-6);
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-display-l);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.page-title--imprint {
  max-width: none;
  margin-bottom: var(--s-4);
  font-size: var(--fs-display-m);
}

.page-lead {
  margin: 0 0 var(--s-8);
  font-size: var(--fs-body);
  color: var(--muted);
}

.intro-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  max-width: 1020px;
}

.intro-cols p {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--body);
}

/* Bildband mit Plakette (Unternehmen) */
.figure-band {
  position: relative;
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 24px 60px rgb(41 34 51 / 0.16);
}

.figure-band img {
  display: block;
  width: 100%;
  height: clamp(240px, 34vw, 460px);
  object-fit: cover;
  object-position: 55% 35%;
}

.figure-band__badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: 12px;
  /* Mockup: .92. Die Adresszeile kommt darauf über dem Foto nur auf 4.12:1.
     Mit .95 bleibt der Milchglaseindruck, und selbst ein komplett schwarzes
     Foto dahinter hielte noch 4.73:1 — der Wert trägt also jeden Bildtausch. */
  background: rgb(255 255 255 / 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgb(20 14 40 / 0.18);
}

.figure-band__badge > img {
  height: 30px;
  width: auto;
}

.figure-band__badge p {
  margin: 0;
}

.figure-band__badge p:first-child {
  font-size: var(--fs-small);
  font-weight: 600;
}

.figure-band__badge p:last-child {
  font-size: var(--fs-micro);
  color: var(--muted);
}

/* Lebenszyklus (Unternehmen) */
.lifecycle {
  background: var(--surface);
  border-top: 1px solid var(--line-3);
  border-bottom: 1px solid var(--line-3);
}

.lifecycle__inner {
  padding-block: 72px;
}

.lifecycle__lead {
  max-width: 60ch;
  margin: 0 0 var(--s-9);
  font-size: var(--fs-body);
  color: var(--muted);
}

.lifecycle__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-9);
}

/* Die Stufen laufen von kräftig nach hell. Im Mockup endet die Reihe auf
   #9c8ccb und #beb2dd — als Ziffernfarbe auf Weiß nur 2.99:1 und 1.98:1, die
   Reihenfolge wäre am Ende praktisch unlesbar. Der Verlauf ist so nachgezogen,
   dass auch die letzte Stufe 3:1 für große Schrift hält. */
.stage {
  border-top: 2px solid var(--stage);
  padding-top: var(--s-6);
}

.stage:nth-of-type(1) {
  --stage: #5b47a5;
}
.stage:nth-of-type(2) {
  --stage: #6e5cb3;
}
.stage:nth-of-type(3) {
  --stage: #8272c0;
}
.stage:nth-of-type(4) {
  --stage: #9788cd;
}

.stage__no {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-numeral);
  line-height: 1;
  color: var(--stage);
}

.stage__title {
  font-family: var(--serif);
  margin: var(--s-3) 0 var(--s-2);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.stage__body {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--muted);
}

/* Karten (Säulen, Impressum) */
/* Nachschlagesatz für das Impressum: Bezeichnung links, Angabe rechts, eine
   Haarlinie je Zeile. Kästen wären hier dasselbe Muster, das auf Unternehmen
   schon weichen musste — und ein Impressum wird durchsucht, nicht gelesen. */
.facts-group__title {
  margin: 0 0 var(--s-5);
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.2;
}

.facts-group + .facts-group {
  margin-top: clamp(40px, 6vw, 72px);
}

.facts {
  margin: 0;
}

.fact {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: var(--s-3) var(--s-9);
  padding-block: var(--s-6);
  border-top: 1px solid var(--line-3);
}

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

/* Die Bezeichnung ist die Suchhilfe, die Angabe der Inhalt — deshalb liegt
   das Gewicht auf der Angabe, nicht auf dem Etikett. */
.fact dt {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--muted-2);
}

.fact dd {
  max-width: 55ch;
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
}

.facts--notes dd {
  color: var(--body);
}

/* Stellenliste (Karriere) */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  margin-bottom: var(--s-3);
}

.section-head h2 {
  margin: 0;
}

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

/* Noch gibt es keine Stellendetailseiten; jede Zeile führt deshalb auf den
   Initiativblock. Sobald es Detailseiten oder PDFs gibt, nur das href tauschen. */
.job {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--s-7);
  padding: var(--s-5) var(--s-4);
  border-top: 1px solid var(--line-4);
  border-radius: var(--radius-s);
  color: var(--ink);
  font-size: var(--fs-lead);
  font-weight: 600;
  transition:
    background-color 0.15s var(--ease),
    color 0.15s var(--ease);
}

.job:hover {
  background: var(--surface);
  color: var(--violet);
}

.job__meta {
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--faint);
}

.job__arrow {
  color: var(--violet);
}

/* Karriere-Kopf */
.hero--karriere {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  align-items: center;
  gap: 56px;
  padding-block: 48px 72px;
}

.hero--karriere .hero__lead {
  max-width: 48ch;
  font-size: var(--fs-lead);
}

.figure-plain {
  margin: 0;
}

.figure-plain__frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 24px 60px rgb(41 34 51 / 0.16);
}

.figure-plain img {
  display: block;
  width: 100%;
  height: clamp(260px, 34vw, 440px);
  object-fit: cover;
}

.figure-plain figcaption {
  margin: 14px 4px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-small);
  text-align: center;
  color: var(--faint);
}

/* Vorteilsband (Karriere) */
.benefits {
  background: var(--surface);
  border-top: 1px solid var(--line-3);
  border-bottom: 1px solid var(--line-3);
}

.benefits__inner {
  padding-block: 52px;
}

/* Drei kurze Grundsätze — auf Unternehmen und Karriere derselbe Inhaltstyp
   und deshalb dasselbe Bauteil. Vorher waren es zwei Gestaltungen: hier ohne
   Rahmen, dort als weiße Karten auf cremefarbenem Grund. Karten auf Fläche
   sind Schachtelung ohne Gewinn — und stehen so in den Anti-Referenzen. */
.tenets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-9);
}

.tenet h3 {
  font-family: var(--serif);
  margin: 0 0 var(--s-2);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.tenet p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--muted);
}

.cta__meta {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: rgb(255 255 255 / 0.72);
}

/* Ohne eigene Regel erbte der Link hier das Markenviolett — auf violettem
   Grund unsichtbar. */
.cta__meta a {
  display: inline-block;
  padding-block: var(--s-1);
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.cta__meta a:hover {
  color: #fff;
  text-decoration-thickness: 2px;
}

/* Abstände der Unterseiten-Abschnitte */
.pad-band {
  padding-block: 72px;
}

.pad-band--top0 {
  padding-block: 24px 72px;
}

.pad-band--bottom {
  padding-block: 0 72px;
}

.pad-band--jobs {
  padding-block: 72px 56px;
}

/* 404 ===================================================================== */
.notfound {
  padding-block: clamp(56px, 10vh, 120px) var(--s-9);
}

.notfound .page-title {
  max-width: 18ch;
}

.notfound .page-lead {
  max-width: 55ch;
}

.notfound__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-7);
  margin-bottom: var(--s-9);
}

.notfound__contact {
  margin: 0;
  max-width: 55ch;
  font-size: var(--fs-small);
  color: var(--muted);
}

/* Responsiv ─────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hero__stage {
    gap: 36px;
  }

  .about {
    gap: 40px;
    padding-block: 64px;
  }

  .chain__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 40px;
    padding-block: 48px;
  }

  .lifecycle__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 40px;
  }

  .lifecycle__inner,
  .pad-band {
    padding-block: 56px;
  }

  .pad-band--jobs {
    padding-block: 56px 48px;
  }

  .hero--karriere {
    gap: 40px;
    padding-block: 32px 56px;
  }

  .page-head__inner {
    padding-block: 40px 36px;
  }

  .intro-cols {
    gap: 32px;
  }
}

@media (max-width: 860px) {
  :root {
    /* Die Kopfzeile bricht hier auf zwei Zeilen um. */
    --header-h: 128px;
  }

  .site-header__inner {
    flex-wrap: wrap;
    gap: 14px 24px;
    padding-block: 20px;
  }

  .site-nav {
    gap: 22px;
    width: 100%;
  }

  .hero__stage,
  .about,
  .doors {
    grid-template-columns: 1fr;
  }

  /* Das Zeichen unter den Kernsatz, damit der Satz zuerst steht. Es bleibt
     im Bildschirm, wird aber nicht mehr über die Kante gezogen. */
  .hero__markwrap {
    order: 2;
    align-self: end;
    justify-self: center;
    width: min(100%, clamp(300px, 52vw, 440px));
    margin-right: 0;
  }

  .hero__claim {
    margin-bottom: 14px;
  }

  .hero__words .hero__lead {
    margin-bottom: 16px;
  }

  /* Einspaltig: die Bühne bekommt wieder beidseitigen Abstand, der
     Rasterbruch nach rechts ergibt hier keinen Sinn mehr.
     Obere Zeile dehnbar, untere fest — so bleibt der Text optisch mittig und
     das Zeichen steht auch auf hohen Tablets auf der Bandkante statt darüber
     zu schweben. */
  .hero__stage {
    grid-template-rows: 1fr auto;
    align-content: stretch;
    gap: clamp(16px, 3vh, 32px);
    padding-block: clamp(16px, 3vh, 32px) 0;
    padding-inline: var(--gutter);
  }

  .hero__words {
    align-self: center;
  }

  /* Der große Innenabstand hebt am Desktop die optische Mitte an. Auf einem
     Telefon wären das über 100px Leere zwischen Hinweis und Zeichen — und
     schiebt die zweite Tür unnötig weit unter die Falte. */
  .hero__words {
    padding-bottom: clamp(14px, 2.5vh, 26px);
  }

  .about {
    padding-block: 56px;
  }

  .about__media {
    order: 2;
  }

  .doors {
    padding-bottom: 56px;
  }

  #kontakt {
    padding-bottom: 56px;
  }

  .cta__mark {
    right: -120px;
    bottom: -110px;
    width: 420px;
    opacity: 0.16;
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding-block: 32px;
  }

  /* Unterseiten */
  .intro-cols,
  .tenets,
  .hero--karriere {
    grid-template-columns: 1fr;
  }

  .fact {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }

  /* Einspaltig läuft der Fließtext sonst über die volle Containerbreite —
     bei 768px waren das 89 Zeichen je Zeile. Achtung: `ch` ist die Breite der
     Null und in Instrument Sans deutlich breiter als das Durchschnittszeichen;
     68ch ergaben gemessene 89 Zeichen. 55ch trifft die angestrebten ~70. */
  .intro-cols p,
  .tenet p,
  .stage__body,
  .about__text p {
    max-width: 55ch;
  }

  .hero--karriere {
    padding-block: 24px 48px;
  }

  .hero--karriere .figure-plain {
    order: 2;
    max-width: 560px;
    width: 100%;
    margin-inline: auto;
  }

  .benefits__inner {
    padding-block: 40px;
  }

  .tenets {
    gap: var(--s-7);
  }

  .page-head__watermark {
    right: -180px;
    width: 520px;
  }

  .figure-band__badge {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 12px 16px;
  }

  .pad-band,
  .lifecycle__inner {
    padding-block: 48px;
  }

  .pad-band--top0 {
    padding-block: 20px 48px;
  }

  .pad-band--bottom {
    padding-block: 0 48px;
  }

  .pad-band--jobs {
    padding-block: 48px 40px;
  }
}

@media (max-width: 560px) {
  p,
  li {
    hyphens: auto;
  }

  /* Adressen und Eigennamen nicht trennen — „Rose-meyerstr." liest sich
     falsch, egal wie eng die Spalte ist. */
  .site-footer__meta,
  .cta__meta,
  .figure-band__badge p,
  .fact dd {
    hyphens: manual;
  }

  .chain__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero__actions .btn,
  .cta__actions .btn {
    flex: 1 1 100%;
  }

  /* Türen untereinander — beide bleiben gleich groß und gleich gewichtet,
     die Trennung wandert von der Seite nach oben. */
  .hero__gates {
    grid-template-columns: 1fr;
  }

  .gate:first-child {
    padding-right: 0;
    padding-bottom: clamp(18px, 4vw, 26px);
  }

  .gate:last-child {
    padding-left: 0;
    padding-top: clamp(18px, 4vw, 26px);
    border-left: 0;
    border-top: 1px solid rgb(255 255 255 / 0.24);
  }

  .brand__suffix {
    display: none;
  }

  .door__body {
    left: 22px;
    right: 22px;
    bottom: 22px;
  }

  .lifecycle__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Titel oben, Umfang darunter, Pfeil rechts über beide Zeilen. */
  .job {
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    padding: 16px 12px;
  }

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

  .job__arrow {
    grid-row: 1 / -1;
    grid-column: 2;
    align-self: center;
  }

}

/* 11. Bewegungsreduktion ================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    /* Muss mit: sonst zeigt `fill: both` während der Verzögerung weiter den
       Startzustand — die Einblender blieben bis zu 350 ms unsichtbar, also
       genau das Flackern, das die Einstellung vermeiden soll. */
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }

  /* Schweben und Ken-Burns ganz abschalten: die Keyframes enden auf
     translateY(10px) bzw. scale(1.09), das bliebe sonst dauerhaft stehen.
     Die Einblender behalten die verkürzte Animation, damit `fill: both`
     sie auf den Endzustand (sichtbar) setzt. */
  .hero__rhino,
  .hero__chevron,
  .cta__mark,
  .page-head__watermark {
    animation: none !important;
  }

  .btn:hover,
  .door:hover {
    transform: none;
  }
}