/* ============================================================
   DEFYNE — Design-System
   Große Flächen, große Kleinbuchstaben, Icon-Reihen, ganze
   Bänder im Wechsel hell/dunkel. Die Marke trägt die Seite,
   nicht das Raster.
   ============================================================ */

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

/* ---------- Tokens ---------- */
:root {
  --paper: #f6f5f1;      /* Markenpapier, warm */
  --paper-2: #edece6;    /* abgesetztes Band */
  --white: #fdfdfb;

  --ink: #17161c;        /* Markentusche */
  --ink-2: #5c5b64;
  --ink-3: #66656e;

  --gold: #bf9000;       /* Schlusspunkt der Wortmarke */
  --gold-deep: #8a6800;
  --gold-bright: #d9a520;
  --gold-soft: rgba(191, 144, 0, 0.10);

  --on-ink: #efeff0;
  --on-ink-2: #aeadb6;
  --hair: rgba(25, 24, 28, 0.13);
  --hair-ink: rgba(255, 255, 255, 0.13);

  --display: 'Archivo', system-ui, -apple-system, sans-serif;
  --sans: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad: clamp(1.25rem, 4.5vw, 4.5rem);
  --block: clamp(3.5rem, 8vw, 7.5rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --nav-h: 66px;
  --nav-h-stuck: 54px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
/* Browser geben <figure> margin: 1em 40px — in einem Layout stört das überall. */
figure { margin: 0; }
[hidden] { display: none !important; }
p { margin: 0; }
a { color: inherit; }
::selection { background: var(--gold); color: #fff; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--on-ink);
  padding: .8rem 1.25rem; font-family: var(--mono); font-size: .75rem;
}
.skip-link:focus { left: 0; }

/* ---------- Bausteine ---------- */
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--pad); }
.wrap--narrow { max-width: 900px; }

.kicker {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.kicker--light { color: rgba(255, 255, 255, .72); }
.kicker--gold { color: var(--gold-deep); }

.dot {
  display: inline-block; width: .3em; height: .17em;
  background: var(--gold); vertical-align: baseline; margin-left: .1em;
}

.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--ink-2);
  max-width: 58ch;
}

.section { padding-block: var(--block); }
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--paper2 { background: var(--paper-2); }
.section--white { background: var(--white); }
.section--ink .lead { color: var(--on-ink-2); }
.section--ink .kicker { color: var(--on-ink-2); }

.section-head { display: grid; gap: .9rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head h2 { font-size: clamp(1.9rem, 4.2vw, 3.2rem); }
.section-head--row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.5rem 2rem;
}
.section-head--row > .kicker { grid-column: 1; }
.section-head--row > h2 { grid-column: 1; }
.section-head--row > .head-link { grid-column: 2; grid-row: 2; justify-self: end; }
@media (max-width: 720px) {
  .section-head--row { grid-template-columns: 1fr; }
  .section-head--row > .head-link { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* ---------- Icons ---------- */
.icon { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* Gefüllte Formen tragen fill/stroke als Attribut im Symbol selbst —
   über <use> erreichen CSS-Selektoren den Symbolinhalt nicht. */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--sans); font-size: .8125rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
  padding: .85rem 1.4rem;
  background: var(--ink); color: var(--on-ink);
  border: 1px solid var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn .icon { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.btn:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.btn:hover .icon { transform: translateX(3px); }

.btn--light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--light:hover { background: var(--gold); border-color: var(--gold); color: #16150f; }
.btn--outline { background: transparent; color: var(--ink); border-color: rgba(25,24,28,.26); }
.btn--outline:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost-light:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn--pill { border-radius: 999px; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.alink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 600; text-decoration: none;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--hair);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.alink .icon { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.alink:hover { border-color: var(--gold); color: var(--gold-deep); }
.alink:hover .icon { transform: translateX(3px); }
.section--ink .alink { border-color: var(--hair-ink); }
.section--ink .alink:hover { color: var(--gold); border-color: var(--gold); }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
/* Über dem Hero liegt die Leiste im Bild, nicht darüber im Fluss. */
.nav--overlay { position: fixed; left: 0; right: 0; }
.nav-inner {
  display: flex; align-items: center; gap: 1.5rem;
  height: var(--nav-h);
  transition: height .3s var(--ease);
}

/* Der Farbton kommt erst beim Scrollen. */
.nav.is-stuck {
  background: rgba(246, 245, 241, .88);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom-color: var(--hair);
}
.nav.is-stuck .nav-inner { height: var(--nav-h-stuck); }

/* Solange die Leiste im dunklen Bild liegt, dreht sie ihre Farben um. */
.nav--overlay:not(.is-stuck) .wordmark .marke { fill: #fff; }
.nav--overlay:not(.is-stuck) .nav-links a { color: rgba(255, 255, 255, .84); }
.nav--overlay:not(.is-stuck) .nav-links a:hover { color: #fff; }
.nav--overlay:not(.is-stuck) .nav-lang { color: rgba(255, 255, 255, .84); }
.nav--overlay:not(.is-stuck) .nav-lang:hover { color: #fff; }
.nav--overlay:not(.is-stuck) .nav-toggle span { background: #fff; }
.wordmark { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.wordmark svg { height: 31px; width: auto; }
.wordmark .marke { fill: var(--ink); }
.wordmark .punkt { fill: var(--gold); }
.wordmark--light .marke { fill: var(--on-ink); }

.nav-links {
  display: flex; align-items: center; gap: 1.75rem;
  list-style: none; margin: 0 auto; padding: 0;
}
.nav-links a {
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-2); padding-block: .5rem;
  border-bottom: 1.5px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-active { color: var(--ink); border-color: var(--gold); }

.nav-side { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.nav-lang {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
}
.nav-lang:hover { color: var(--ink); }
.nav-lang .icon { width: 16px; height: 16px; }

/* Burger — zwei Striche, die sich zum Kreuz drehen */
.nav-toggle {
  display: none; margin-left: auto;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease), background .2s var(--ease);
}
.nav-toggle.is-open span:first-child  { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.nav-toggle.is-open span:last-child   { transform: translateY(-8px) rotate(-45deg); }
.nav-drawer { display: none; border-top: 1px solid var(--hair); background: var(--white); }
.nav-drawer.is-open { display: block; }
.nav-drawer ul { list-style: none; margin: 0; padding: 0; }
.nav-drawer a {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 1.1rem 0; border-bottom: 1px solid var(--hair);
  text-decoration: none; font-family: var(--display); font-weight: 700;
  font-size: 1.5rem; letter-spacing: -0.03em; color: var(--ink);
  text-align: right;
}
.nav-drawer .drawer-foot { padding: 1.5rem 0 2rem; display: flex; justify-content: flex-end; }
.nav-drawer .nav-lang { display: inline-flex; }

@media (max-width: 1000px) {
  .nav-links, .nav-side { display: none; }
  .nav-toggle { display: flex; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: min(88vh, 800px);
  display: flex; align-items: flex-end;
  background: var(--ink);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s var(--ease);
}
.hero-media img.is-on { opacity: 1; }
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    /* Verlauf links nach rechts — links dichter, rechts nur ein Hauch */
    linear-gradient(90deg,
      rgba(14, 13, 17, .74) 0%,
      rgba(14, 13, 17, .60) 22%,
      rgba(14, 13, 17, .36) 46%,
      rgba(14, 13, 17, .22) 70%,
      rgba(14, 13, 17, .16) 100%),
    /* Leichte Abdunklung oben und unten */
    linear-gradient(180deg,
      rgba(14, 13, 17, .26) 0%,
      rgba(14, 13, 17, .06) 30%,
      rgba(14, 13, 17, .06) 58%,
      rgba(14, 13, 17, .38) 100%);
}
.hero-inner { position: relative; width: 100%; padding-block: clamp(3rem, 8vw, 5.5rem) clamp(1.75rem, 3vw, 2.5rem); }
.hero .kicker {
  font-size: clamp(.78rem, 1.05vw, .9rem);
  letter-spacing: .26em;
}
.hero h1 {
  font-size: clamp(2.4rem, 5.6vw, 5.4rem);
  color: #fff;
  margin: 1.4rem 0 1.25rem;
  letter-spacing: -0.045em;
}
/* "design" und "defyne" bleiben in jedem Fall zusammen. */
.hero h1 .nb { white-space: nowrap; }
/* Ab Tablet steht der ganze Claim in einer Zeile, der Umbruch entfällt. */
@media (min-width: 760px) {
  .hero h1 { white-space: nowrap; }
  .hero h1 .brk { display: none; }
}
.hero-sub {
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  color: rgba(255,255,255,.87);
  line-height: 1.38;
  margin-bottom: 2rem;
}
/* Ab Tablet steht die Unterzeile ebenfalls in einer Zeile. */
@media (min-width: 760px) { .hero-sub { white-space: nowrap; } }
.hero-foot {
  display: flex; align-items: flex-end; justify-content: flex-end;
  gap: 1.5rem; margin-top: clamp(2rem, 5vw, 3.5rem);
}


/* ---------- KI-Kennzeichnung ---------- */
.ai-tag {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  margin: 0;
}
.ai-tag .icon { width: 12px; height: 12px; stroke-width: 1.4; opacity: .9; }
/* Als Bildnachweis unter dem Bild */
.ai-tag--caption { color: var(--ink-3); text-shadow: none; justify-content: flex-end; margin-top: .55rem; }
/* Im Bild statt darunter — sonst rutscht eine Karte ohne Schild in der
   Reihe nach oben und die Titel stehen nicht mehr auf einer Linie. */
.card-media .ai-tag,
.product-visual .ai-tag { position: absolute; right: .75rem; bottom: .6rem; }

/* ============================================================
   Duo
   ============================================================ */
.duo { display: grid; grid-template-columns: 1fr 1fr; }
.duo-half {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3.5vw, 3.5rem);
  min-height: 470px;
}
/* Derselbe Grund wie auf /software */
.duo-half--plain { background: var(--paper); }

/* Dunkle Hälfte — gleicher Aufbau, umgekehrte Farben. */
.duo-half--dark { background: var(--ink); }
.duo-body { position: relative; display: flex; flex-direction: column; gap: .7rem; }
.duo-half h2 { font-size: clamp(2rem, 4vw, 3rem); }
.duo-tag { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.duo-text { max-width: 42ch; color: var(--ink-2); font-size: .9375rem; }
/* Bild und Icon-Reihe hängen am unteren Rand, nicht am Text darüber.
   So stehen sie in beiden Hälften auf gleicher Höhe, auch wenn die
   Texte unterschiedlich lang sind oder sich die Sprache ändert. */
.duo-visual { position: relative; margin-top: auto; padding-top: 1.75rem; }
.duo-visual img { width: 100%; }

.featrow {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.1rem;
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
}
.featrow > div { display: grid; justify-items: center; gap: .5rem; min-width: 60px; }
.featrow span { font-size: .6875rem; color: var(--ink-3); text-align: center; line-height: 1.3; }

@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; }
  .duo-half { min-height: 0; }
}

/* ============================================================
   Projekte
   ============================================================ */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .85rem; }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card-media img { transform: scale(1.04); }
.card h3 { font-size: 1.0625rem; letter-spacing: -0.025em; }
.card-meta { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.plate {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.2rem;
  background: var(--paper-2); color: var(--ink);
}
.plate--ink { background: var(--ink); color: var(--on-ink); }
.plate--gold { background: var(--gold); color: #17140a; }
.plate b {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: -0.04em; line-height: 1.04;
}
.plate .icon { width: 22px; height: 22px; opacity: .8; }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }

/* ============================================================
   Schluss-CTA
   ============================================================ */
.cta-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta-top h2 { font-size: clamp(2.1rem, 5.2vw, 3.8rem); margin-top: .9rem; }
.pillars-label { margin-top: clamp(2.75rem, 6vw, 4.5rem); }
.pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  margin-top: 1.5rem;
}
.pillars h3 {
  font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  font-family: var(--sans); color: var(--gold-deep);
  padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--hair);
}
.pillars .claim {
  font-family: var(--display); font-weight: 700;
  font-size: 1.0625rem; letter-spacing: -0.02em; line-height: 1.25;
  color: var(--ink); margin: 0 0 .5rem;
}
.pillars p { font-size: .9375rem; color: var(--ink-2); margin: 0; }
.section--ink .pillars .claim { color: var(--on-ink); }
/* Auf dunklem Grund umgekehrt */
.section--ink .pillars h3 { border-bottom-color: var(--hair-ink); color: var(--gold-bright); }
.section--ink .pillars p { color: var(--on-ink-2); }
@media (max-width: 760px) {
  .pillars { grid-template-columns: 1fr; }
}

/* ============================================================
   Seitenkopf der Unterseiten
   ============================================================ */
.pagehead { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); }
/* Versalien wie auf /software. Die enge Laufweite der Kleinbuchstaben
   wäre hier falsch — Großbuchstaben brauchen Luft, deshalb -0.01em. */
.pagehead h1 {
  font-size: clamp(2.3rem, 6.2vw, 4.4rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.06;
  margin: 1.1rem 0 1.25rem;
  max-width: 20ch;
}
.pagehead .lead { font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
.pagehead .btn-row { margin-top: clamp(1.75rem, 3.5vw, 2.6rem); }

/* ============================================================
   Arbeiten
   ============================================================ */
.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.filter button {
  font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  background: transparent; border: 1px solid rgba(25,24,28,.20); border-radius: 999px;
  color: var(--ink-2); padding: .6rem 1.2rem; cursor: pointer;
  transition: all .18s var(--ease);
}
.filter button:hover { border-color: var(--ink); color: var(--ink); }
.filter button[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 3rem); }
.work-card { display: flex; flex-direction: column; gap: 1rem; text-decoration: none; color: inherit; }
.work-card--wide { grid-column: 1 / -1; }
.work-card--wide-off { grid-column: auto; }
.work-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.work-card--wide .work-media { aspect-ratio: 21 / 9; }
.work-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.work-card:hover .work-media img { transform: scale(1.03); }
.work-body { display: grid; gap: .6rem; }
.work-meta { display: flex; flex-wrap: wrap; gap: .35rem .8rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.work-meta .disc { color: var(--gold-deep); font-weight: 600; }
.work-card h3 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
.work-card p { color: var(--ink-2); font-size: .9375rem; max-width: 60ch; }
.work-out { display: inline-flex; align-items: center; gap: .45rem; font-size: .8125rem; font-weight: 600; color: var(--gold-deep); }
@media (max-width: 780px) { .work-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Leistungen
   ============================================================ */
.svc {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 15rem);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--hair);
  align-items: start;
}
.svc-n { font-family: var(--mono); font-size: .8125rem; color: var(--gold-deep); padding-top: .3rem; }
.svc h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: .55rem; }
.svc p { color: var(--ink-2); max-width: 62ch; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; align-content: start; }
.tag {
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid rgba(25,24,28,.16); border-radius: 999px; padding: .32rem .75rem;
}
@media (max-width: 820px) {
  .svc { grid-template-columns: 3rem 1fr; }
  .tags { grid-column: 2; }
}

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.steps > div { display: grid; gap: .55rem; align-content: start; }
.steps > div::before {
  content: attr(data-n);
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; color: var(--gold-deep);
  padding-bottom: .75rem; border-bottom: 1px solid var(--hair);
}
.section--ink .steps > div::before { border-color: var(--hair-ink); color: var(--gold-bright); }
.steps h3 { font-size: 1.0625rem; }
.steps p { color: var(--ink-2); font-size: .9rem; }
.section--ink .steps p { color: var(--on-ink-2); }

/* ============================================================
   Team
   ============================================================ */
.person { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.person-portrait { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--paper-2); }
.person h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: .75rem; }
.person-roles { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.cv { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.cv li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--hair); font-size: .9rem; }
.cv time { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); }
.cv em { font-style: normal; display: block; color: var(--ink-3); font-size: .8125rem; }
@media (max-width: 780px) { .person { grid-template-columns: 1fr; } }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.cols > div { display: grid; gap: .55rem; align-content: start; }
.col-n { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; color: var(--gold-deep); padding-bottom: .75rem; border-bottom: 1px solid var(--hair); }
.cols h3 { font-size: 1.0625rem; }
.cols p { color: var(--ink-2); font-size: .9375rem; }

/* ============================================================
   Kontakt
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
.contact-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.contact-list li { padding: 1.1rem 0; border-top: 1px solid var(--hair); }
.contact-list li:last-child { border-bottom: 1px solid var(--hair); }
.contact-list a { text-decoration: none; border-bottom: 1px solid var(--gold); }
.contact-list a:hover { color: var(--gold-deep); }
.checklist { list-style: none; margin: 1rem 0 0; padding: 0; }
.checklist li { position: relative; padding: .6rem 0 .6rem 1.6rem; color: var(--ink-2); font-size: .9375rem; }
.checklist li::before { content: ''; position: absolute; left: 0; top: 1.25em; width: .7rem; height: 1px; background: var(--gold); }
@media (max-width: 780px) { .contact-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Rechtstexte
   ============================================================ */
.legal { max-width: 70ch; }
.legal h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-top: 2.75rem; margin-bottom: .9rem; }
.legal h3 { font-size: 1.05rem; margin-top: 1.75rem; margin-bottom: .5rem; }
.legal p, .legal li { color: var(--ink-2); font-size: .9375rem; }
.legal p + p { margin-top: 1rem; }
.legal ul { padding-left: 1.2rem; margin: 1rem 0; }
.legal a { color: var(--gold-deep); }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--ink); color: var(--on-ink-2); padding-block: clamp(2.5rem, 5vw, 4rem) 1.75rem; }
.footer-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.5rem;
  padding-bottom: 2rem; border-bottom: 1px solid var(--hair-ink);
}
.footer-top .wordmark svg { height: 31px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-left: auto; }
.footer a { color: var(--on-ink-2); text-decoration: none; font-size: .875rem; transition: color .18s var(--ease); }
.footer a:hover { color: var(--gold); }
.footer-mid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2rem; padding-block: 2rem; }
.footer h4 { font-family: var(--sans); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink); margin-bottom: .9rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .875rem; }
.footer-claim { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.04em; color: var(--on-ink); }
.footer-base {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem;
  padding-top: 1.5rem; border-top: 1px solid var(--hair-ink);
  font-size: .75rem;
}
.footer-base .spacer { margin-left: auto; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Zweispaltiger Schluss-CTA der Unterseiten */
.cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}
.cta-grid h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
.section--ink .cta-grid .lead { color: var(--on-ink-2); }
@media (max-width: 780px) { .cta-grid { grid-template-columns: 1fr; align-items: start; } }

/* Betonung ohne Marker — der Goldpunkt trägt den Akzent */
em.mark { font-style: normal; }
.col-n { display: block; }

/* Bildstreifen innerhalb einer breiten Projektkarte */
.work-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: .5rem; }
.work-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-2); }

/* ============================================================
   Produkte
   ============================================================ */
.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--hair);
}
.product:first-of-type { border-top: 0; padding-top: 0; }
.product--flip .product-visual { order: -1; }
.product-body { display: grid; gap: .8rem; align-content: start; }
.product-body h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.product-tag { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.product-body p { color: var(--ink-2); max-width: 48ch; }
.product-cta { margin-top: .75rem; }
.product-visual { position: relative; }
.product-visual > img { width: 100%; }
.product-plate {
  position: relative; aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--paper-2); color: var(--ink);
}
.product-plate--ink { background: var(--ink); color: var(--on-ink); }
.product-plate--gold { background: var(--gold); color: #17140a; }
.product-plate b {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: -0.04em; line-height: 1.05;
}
.product-plate .icon { width: 26px; height: 26px; opacity: .85; }
.product .featrow { margin-top: 1.25rem; padding-top: 0; }
@media (max-width: 860px) {
  .product { grid-template-columns: 1fr; }
  .product--flip .product-visual { order: 0; }
}


/* Umgekehrte Farben der dunklen Hälfte. Ohne diese Regeln erben Überschrift
   und Icons die Tuschefarbe und verschwinden im Hintergrund. */
.duo-half--dark { color: var(--on-ink); }
.duo-half--dark h2 { color: #fff; }
.duo-half--dark .duo-tag { color: var(--gold-bright); }
.duo-half--dark .duo-text { color: var(--on-ink-2); }
.duo-half--dark .featrow { color: #fff; }
.duo-half--dark .featrow span { color: rgba(255, 255, 255, .74); }
.duo-half--dark .ai-tag--caption { color: rgba(255, 255, 255, .5); }

/* ============================================================
   Software-Seite
   ============================================================ */

/* Kundenlogos */
.logos {
  display: flex; align-items: center;
  gap: var(--logo-gap);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-block: 1px solid var(--hair);
}
/* Die Logos stehen farbig, nicht ausgegraut: es sind fremde Marken, und
   eine Graustufe nimmt ihnen das, woran man sie erkennt. */
.logos img { height: clamp(26px, 3.2vw, 40px); width: auto; }

/* Projektkarten mit eigenen Bildern statt Website-Aufnahmen: zwei breite
   Karten im Format der Bilder (3:2), damit nichts beschnitten wird. Das
   dritte Projekt trägt das Band darüber. */
.cards--photo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--photo .card-media { aspect-ratio: 3 / 2; }
@media (max-width: 560px) { .cards--photo { grid-template-columns: 1fr; } }

/* Aussage mit Kennzahl */
.claimgrid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.bignum {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(4rem, 12vw, 8.5rem); line-height: .9; letter-spacing: -0.05em;
  color: var(--gold-bright);
}
.bignum + p { color: var(--on-ink-2); font-size: .9375rem; max-width: 26ch; margin-top: 1rem; }
.factlist { list-style: none; margin: 0; padding: 0; }
.factlist li {
  padding: 1.1rem 0; border-top: 1px solid var(--hair-ink);
  font-size: .9375rem; color: var(--on-ink-2);
}
.factlist li b { color: var(--on-ink); font-weight: 600; }
@media (max-width: 860px) { .claimgrid { grid-template-columns: 1fr; } }

/* Tag und Nacht: Agentur hell, Produktstudio dunkel, randlos nebeneinander.
   Die Innenspalten richten sich per margin:auto am .wrap-Raster aus, ohne Viewport-Rechnerei. */
.daynight { padding-block: var(--block) 0; }
.daynight-band {
  --inner: clamp(1.5rem, 3.2vw, 3.25rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.daynight-half { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.daynight-half--day {
  background: var(--white);
  padding-inline: var(--pad) calc(var(--inner) / 2);
}
.daynight-half--night {
  background: var(--ink); color: var(--on-ink);
  padding-inline: calc(var(--inner) / 2) var(--pad);
}
.daynight-inner {
  container-type: inline-size;
  max-width: calc((1440px - 2 * var(--pad) - var(--inner)) / 2);
}
.daynight-half--day .daynight-inner { margin-inline-start: auto; }
.daynight-half--night .daynight-inner { margin-inline-end: auto; }
.daynight-inner h3 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); margin-bottom: .4rem; }
.daynight-inner > .kicker { margin-bottom: .9rem; }
.daynight-lead { margin: 0; max-width: 42ch; font-size: .9375rem; color: var(--ink-2); text-wrap: pretty; }
.daynight-half--night .kicker,
.daynight-half--night .daynight-lead { color: var(--on-ink-2); }

.ledger { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }
.ledger > div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: .2rem 1.5rem;
  padding-block: .85rem;
  border-top: 1px solid var(--hair);
  transition: border-color .35s var(--ease);
}
.ledger dt { font-size: .9375rem; font-weight: 600; transition: color .35s var(--ease); }
.ledger dd { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.daynight-half--night .ledger > div { border-color: var(--hair-ink); }
.daynight-half--night .ledger dd { color: var(--on-ink-2); }
@media (hover: hover) {
  .ledger > div:hover { border-color: var(--gold-deep); }
  .ledger > div:hover dt { color: var(--gold-deep); }
  .daynight-half--night .ledger > div:hover { border-color: var(--gold-bright); }
  .daynight-half--night .ledger > div:hover dt { color: var(--gold-bright); }
}
@container (max-width: 30rem) { .ledger > div { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .daynight-band { grid-template-columns: 1fr; }
  .daynight-half { padding-inline: var(--pad); }
  .daynight-inner { max-width: none; margin-inline: 0; }
}

/* Kundenstimmen */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.quote { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.quote blockquote { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink); }
.quote figcaption { margin-top: auto; display: flex; align-items: center; gap: .75rem; }
.quote-mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 999px; background: var(--ink); color: var(--on-ink);
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em;
}
.quote-who { font-size: .875rem; font-weight: 600; }
.quote-who em { display: block; font-style: normal; font-weight: 400; color: var(--ink-3); font-size: .8125rem; }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } }

/* Bildband unter dem Seitenkopf */
.imgband {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-block: 1px solid var(--hair);
}
.imgband figure { margin: 0; }
.imgband img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper-2); }
.imgband figcaption {
  margin-top: .55rem;
  font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 720px) {
  .imgband { grid-template-columns: 1fr; }
  .imgband figure:nth-child(n+3) { display: none; }
}

/* ============================================================
   Bewegung — übernommen aus defyne.de
   ============================================================ */

/* Der Schlusspunkt der Wortmarke fällt ein und federt aus. */
@keyframes mark-drop {
  0%   { transform: translateY(-2.4em); opacity: 0; }
  40%  { transform: translateY(0);      opacity: 1; }
  62%  { transform: translateY(-0.55em); }
  80%  { transform: translateY(0); }
  91%  { transform: translateY(-0.16em); }
  100% { transform: translateY(0); }
}

/* Der Kopfbereich steigt beim Laden auf. */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Endlose Logoleiste. */
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--logo-gap))); }
}

/* Menü und Menüpunkte. */
@keyframes menuFade {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes menuItem {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-inner .wrap > *,
  .pagehead > .wrap > * {
    opacity: 0;
    animation: heroRise .85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .hero-inner .wrap > *:nth-child(1), .pagehead > .wrap > *:nth-child(1) { animation-delay: .05s; }
  .hero-inner .wrap > *:nth-child(2), .pagehead > .wrap > *:nth-child(2) { animation-delay: .16s; }
  .hero-inner .wrap > *:nth-child(3), .pagehead > .wrap > *:nth-child(3) { animation-delay: .27s; }
  .hero-inner .wrap > *:nth-child(4), .pagehead > .wrap > *:nth-child(4) { animation-delay: .38s; }

  /* Nur oben auf der Seite — weiter unten wäre die Bewegung schon vorbei. */
  .hero h1 .dot, .pagehead h1 .dot {
    animation: mark-drop 1.1s cubic-bezier(0.34, 0.12, 0.42, 1) .55s both;
  }
  .hero h1 .dot:nth-of-type(2) { animation-delay: .7s; }
  .hero h1 .dot:nth-of-type(3) { animation-delay: .85s; }

  /* Strich steht sofort, ohne Einfallen (Profilseite /felix) */
  .hero h1 .dot--still, .pagehead h1 .dot--still { animation: none; }

  .nav-drawer.is-open { animation: menuFade .28s ease; }
  .nav-drawer.is-open li a { animation: menuItem .4s cubic-bezier(0.2, 0.7, 0.3, 1) backwards; }
  .nav-drawer.is-open li:nth-child(1) a { animation-delay: .05s; }
  .nav-drawer.is-open li:nth-child(2) a { animation-delay: .10s; }
  .nav-drawer.is-open li:nth-child(3) a { animation-delay: .15s; }
  .nav-drawer.is-open li:nth-child(4) a { animation-delay: .20s; }
  .nav-drawer.is-open li:nth-child(5) a { animation-delay: .25s; }
}

/* Logoleiste als endlose Bahn
   ---------------------------------------------------------------
   Mehrere gleiche Bahnen liegen nebeneinander, jede wandert um genau
   ihre eigene Breite plus eine Lücke nach links und springt zurück.
   Der Sprung fällt nicht auf, solange die übrigen Bahnen zusammen
   breiter sind als der Bildschirm — deshalb vier Stück, nicht zwei.
   flex: none ist Pflicht: .logos ist selbst Flex-Container und würde
   die Bahnen sonst auf Bildschirmbreite stauchen. */
.logos { --logo-gap: clamp(1.75rem, 5vw, 4rem); overflow: hidden; }
.logo-track {
  display: flex; align-items: center; flex: none;
  gap: var(--logo-gap);
  animation: logo-scroll 26s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  /* Ohne Lauf genügt eine Bahn, die umbricht statt überzulaufen —
     und sie braucht den Seitenrand, den das Laufband nicht hat. */
  .logos { flex-wrap: wrap; justify-content: center; padding-inline: var(--pad); }
  .logo-track { animation: none; flex-wrap: wrap; justify-content: center; flex: 1 1 auto; min-width: 0; }
  .logo-track[aria-hidden='true'] { display: none; }
}

/* ============================================================
   Dunkle Seitenfassung
   ------------------------------------------------------------
   <body class="theme-dark"> dreht die Tokens um. Danach folgen
   die wenigen Bauteile, die eine helle Umgebung fest annehmen
   und deshalb einzeln nachgezogen werden müssen.
   ============================================================ */
body.theme-dark {
  --paper: #17161c;        /* Seitengrund */
  --paper-2: #1e1d24;      /* leicht abgesetzt: Bildgründe, Ablauf-Band */
  --white: #1c1b22;

  --ink: #efeff0;
  --ink-2: #aeadb6;
  --ink-3: #9a99a3;

  --hair: rgba(255, 255, 255, 0.13);
  --gold-deep: #d9a520;   /* auf dunklem Grund trägt nur die helle Goldstufe */
}

/* Bänder staffeln sich nach oben statt nach unten */
.theme-dark .section--ink { background: #26242e; }
.theme-dark .footer { background: #101015; }

/* Navigation */
.theme-dark .nav.is-stuck { background: rgba(23, 22, 28, .88); }

/* Schaltflächen — hell auf dunkel statt umgekehrt */
.theme-dark .btn { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.theme-dark .btn:hover { background: var(--gold); border-color: var(--gold); color: #16150f; }
.theme-dark .btn--outline { background: transparent; color: var(--ink); border-color: rgba(255, 255, 255, .28); }
.theme-dark .btn--outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.theme-dark .btn--light { background: #efeff0; color: #17161c; border-color: #efeff0; }
.theme-dark .btn--light:hover { background: var(--gold); border-color: var(--gold); color: #16150f; }

/* Rahmen, die auf Tusche gerechnet waren */
.theme-dark .tag { border-color: rgba(255, 255, 255, .18); }
.theme-dark .filter button { border-color: rgba(255, 255, 255, .22); }
.theme-dark .filter button:hover { border-color: var(--ink); color: var(--ink); }
.theme-dark .filter button[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Platten in Projektkarten: die dunkle wird zur hellen */
.theme-dark .plate--ink { background: #efeff0; color: #17161c; }

/* ============================================================
   Ausgewähltes Projekt — ein Band, ein Projekt
   Derzeit ungenutzt: Es gibt noch kein Projekt, das gezeigt
   werden darf. Markup-Vorlage siehe README.
   ============================================================ */
.feature {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: min(62vh, 560px);
  background: var(--ink);
  overflow: hidden;
}
.feature-media { position: absolute; inset: 0; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14,13,17,.90) 0%, rgba(14,13,17,.74) 30%, rgba(14,13,17,.34) 62%, rgba(14,13,17,.18) 100%),
    linear-gradient(180deg, rgba(14,13,17,.30) 0%, rgba(14,13,17,.05) 40%, rgba(14,13,17,.45) 100%);
}
.feature-inner {
  position: relative; width: 100%;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.feature .kicker { color: rgba(255, 255, 255, .72); }
.feature h2 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  text-transform: uppercase; letter-spacing: -0.01em;
  color: #fff; margin: .9rem 0 .6rem;
}
.feature-tag {
  font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-bright);
}
.feature p.feature-text {
  margin-top: 1.1rem; max-width: 46ch;
  font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.55;
  color: rgba(255, 255, 255, .84);
}
.feature-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
.feature .alink { color: #fff; border-color: rgba(255, 255, 255, .35); }
.feature .alink:hover { color: var(--gold-bright); border-color: var(--gold-bright); }
.feature .ai-tag { color: rgba(255, 255, 255, .6); }
@media (max-width: 620px) {
  .feature-foot { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}

/* ============================================================
   Vision — Bildband statt Icon-Reihe
   Das Bild zeigt die Sportarten selbst; gezeichnete Symbole
   daneben wären dieselbe Aussage zweimal.
   ============================================================ */
.visionband {
  position: relative;
  display: flex; align-items: center;
  min-height: min(58vh, 520px);
  background: var(--ink);
  overflow: hidden;
}
.visionband-media { position: absolute; inset: 0; }
.visionband-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.visionband-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(14,13,17,.88) 0%, rgba(14,13,17,.78) 26%,
      rgba(14,13,17,.44) 52%, rgba(14,13,17,.10) 78%, rgba(14,13,17,0) 100%),
    linear-gradient(180deg, rgba(14,13,17,.22) 0%, rgba(14,13,17,0) 35%, rgba(14,13,17,.30) 100%);
}
.visionband-inner { position: relative; width: 100%; padding-block: clamp(3rem, 7vw, 5rem); }
.visionband-text { max-width: 46ch; }
.visionband .kicker { color: rgba(255, 255, 255, .72); }
.visionband h2 {
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  color: #fff; margin: .9rem 0 1rem;
}
.visionband .lead { color: rgba(255, 255, 255, .84); }

/* Schmale Schirme: Bild und Text untereinander statt übereinander.
   Als Überlagerung stünde der Text sonst mitten in den Objekten — und
   ein Ausschnitt der leeren Wand würde die Aussage des Bildes verlieren. */
@media (max-width: 760px) {
  .visionband { display: block; min-height: 0; }
  .visionband-media { position: relative; inset: auto; }
  .visionband-media img {
    height: auto; aspect-ratio: 16 / 10;
    object-position: 72% 50%;
  }
  .visionband-media::after {
    background: linear-gradient(180deg,
      rgba(14,13,17,.28) 0%, rgba(14,13,17,0) 28%,
      rgba(14,13,17,0) 62%, rgba(14,13,17,.95) 100%);
  }
  .visionband-inner { padding-block: 0 clamp(2.5rem, 9vw, 3.5rem); margin-top: -1px; }
  .visionband-text { max-width: none; }
}

/* ---------- Nur das Bild ist der Link ---------- */
.duo-link {
  position: relative; display: block; overflow: hidden;
  text-decoration: none; color: inherit;
}
.duo-link img { transition: transform .6s var(--ease); }
.duo-link:hover img,
.duo-link:focus-visible img { transform: scale(1.04); }
.duo-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }


/* Hinweis unter den Leistungsspalten: was nach der Genehmigung passiert */
.handover {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--hair);
  max-width: 62ch;
}

/* ============================================================
   Fokus-Band — Aussage links, drei Schritte rechts
   ============================================================ */
.focus {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.focus-text h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  text-transform: uppercase; letter-spacing: -0.01em;
  margin: .9rem 0 1rem;
}
.focus-text .lead { max-width: 42ch; }
.focus-text .btn { margin-top: 1.75rem; }

.focus-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  /* Die Spalten setzen tiefer an als die Überschrift links — sie sind
     die Erläuterung, nicht die Aussage. */
  padding-top: clamp(1.5rem, 4vw, 3.25rem);
}
@media (max-width: 900px) { .focus-steps { padding-top: 0; } }
.focus-steps > div { display: grid; gap: .75rem; align-content: start; }
.focus-steps .icon { width: 30px; height: 30px; stroke-width: 1.3; }
.focus-steps h3 {
  font-family: var(--sans);
  font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  margin-top: .25rem;
}
.focus-steps p { font-size: .875rem; color: var(--ink-2); }
.section--ink .focus-steps p { color: var(--on-ink-2); }
@media (max-width: 900px) {
  .focus { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .focus-steps { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ============================================================
   Seitenkopf mit Bild — Text links, Bild rechts angeschnitten
   ============================================================ */
.pagehead--split { position: relative; overflow: hidden; padding-block: 0; }
.pagehead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.pagehead-grid > .pagehead-text {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  padding-inline: var(--pad);
  max-width: calc(1440px / 2);
  margin-left: auto;
}
.pagehead-media { position: relative; align-self: stretch; min-height: clamp(280px, 40vw, 460px); }
.pagehead-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pagehead-media figcaption {
  position: absolute; left: 1rem; bottom: .9rem;
  font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
/* Weicher Übergang zur Textseite, damit das Bild nicht hart abbricht */
.pagehead-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--paper) 0%, rgba(23, 22, 28, 0) 22%);
}
@media (max-width: 900px) {
  .pagehead-grid { grid-template-columns: 1fr; }
  .pagehead-grid > .pagehead-text { max-width: none; margin-left: 0; padding-bottom: clamp(2rem, 5vw, 3rem); }
  .pagehead-media { min-height: 0; aspect-ratio: 16 / 10; }
  .pagehead-media::after {
    background: linear-gradient(180deg, var(--paper) 0%, rgba(23, 22, 28, 0) 14%);
  }
}

/* ============================================================
   Themenblock — Aussage links, Inhalt rechts
   ============================================================ */
.topic {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.topic-text h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.1;
  margin: .9rem 0 1rem;
}
.topic-text .lead { max-width: 44ch; }

/* Aufzählung mit Trennlinien */
.topic-list { list-style: none; margin: 0; padding: 0; }
.topic-list li {
  padding: .85rem 0; border-top: 1px solid var(--hair);
  font-size: .9375rem;
}
.topic-list li:last-child { border-bottom: 1px solid var(--hair); }

/* Drei Bildkacheln */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.tiles figure { margin: 0; display: grid; gap: .75rem; align-content: start; }
.tiles img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper-2); }
.tiles h3 {
  font-family: var(--sans);
  font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.tiles p { font-size: .875rem; color: var(--ink-2); }
.section--ink .tiles p { color: var(--on-ink-2); }
@media (max-width: 900px) { .topic { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .tiles { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Heller Abschnitt innerhalb der dunklen Fassung — derselbe Papierton
   wie auf /software, damit beide Bereiche zusammengehören. */
.theme-dark .section--light {
  background: #f6f5f1;
  color: #17161c;
}
.theme-dark .section--light .kicker { color: #66656e; }
.theme-dark .section--light .kicker--gold { color: #8a6800; }
.theme-dark .section--light h2,
.theme-dark .section--light h3 { color: #17161c; }
.theme-dark .section--light .lead,
.theme-dark .section--light p { color: #5c5b64; }
.theme-dark .section--light .topic-list li { color: #17161c; border-color: rgba(25, 24, 28, .13); }
.theme-dark .section--light .tiles img { background: #edece6; }

/* ============================================================
   Ablauf als Zeitleiste — Aussage links, Schritte rechts
   ============================================================ */
.timeline-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.timeline-text h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.1;
  margin: .9rem 0 1rem;
}
.timeline-text .lead { max-width: 40ch; }

.timeline {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-top: clamp(1rem, 3vw, 2.25rem);
}
.timeline > div { display: grid; gap: 0; align-content: start; }
.timeline .step-n {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
  color: var(--gold-deep); margin-bottom: .5rem;
}
.section--ink .timeline .step-n,
.theme-dark .timeline .step-n { color: var(--gold-bright); }
.timeline h3 {
  font-family: var(--sans);
  font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 1rem;
}
/* Der Punkt sitzt auf der Linie, die durch alle Schritte läuft */
.timeline .dotline {
  position: relative; height: 11px; margin-bottom: 1.1rem;
}
.timeline .dotline::before {
  content: ''; position: absolute; top: 50%; left: 0; right: calc(-1 * clamp(1rem, 2.5vw, 2rem));
  height: 1px; background: var(--hair); transform: translateY(-50%);
}
.timeline > div:last-child .dotline::before { right: 0; }
.timeline .dotline::after {
  content: ''; position: absolute; top: 50%; left: 0;
  width: 11px; height: 11px; border-radius: 999px;
  background: var(--ink); transform: translateY(-50%);
}
.section--ink .timeline .dotline::before,
.theme-dark .timeline .dotline::before { background: var(--hair-ink); }
.section--ink .timeline .dotline::after,
.theme-dark .timeline .dotline::after { background: var(--on-ink); }
.timeline p { font-size: .875rem; color: var(--ink-2); }
.section--ink .timeline p,
.theme-dark .timeline p { color: var(--on-ink-2); }
@media (max-width: 900px) { .timeline-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.25rem; }
  .timeline > div:nth-child(2n) .dotline::before { right: 0; }
}
/* Schaltflächen im hellen Abschnitt der dunklen Fassung */
.theme-dark .section--light .btn--light { background: #17161c; color: #f6f5f1; border-color: #17161c; }
.theme-dark .section--light .btn--light:hover { background: #8a6800; border-color: #8a6800; color: #fff; }
.theme-dark .section--light .btn--ghost-light { background: transparent; color: #17161c; border-color: rgba(25,24,28,.28); }
.theme-dark .section--light .btn--ghost-light:hover { background: #17161c; border-color: #17161c; color: #f6f5f1; }

/* ============================================================
   Abschluss mit Bildgrund
   ============================================================ */
.cta-photo {
  position: relative; overflow: hidden;
  /* Das Bild füllt den Abschnitt randlos; die Innenabstände wandern
     auf den Inhalt, damit außen kein Papierrand stehen bleibt. */
  padding-block: 0;
}
.cta-photo > .wrap { padding-block: var(--block); }
/* Beide Spalten beginnen oben, nicht unten. */
/* Beide Spalten beginnen oben statt unten. */
.cta-photo .cta-grid { align-items: start; }
.cta-photo-media { position: absolute; inset: 0; }
.cta-photo-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; }
/* Papierton von links, damit der Text steht und das Bild rechts atmet */
.cta-photo-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(246, 245, 241, .97) 0%, rgba(246, 245, 241, .93) 30%,
      rgba(246, 245, 241, .70) 55%, rgba(246, 245, 241, .34) 80%,
      rgba(246, 245, 241, .18) 100%),
    linear-gradient(180deg, rgba(246, 245, 241, .30) 0%, rgba(246, 245, 241, 0) 30%);
}
.cta-photo > .wrap { position: relative; }
.cta-photo .cta-grid { max-width: 62%; }
/* Das Schild liegt auf dem unbelichteten Teil des Bildes, und der ist je
   nach Aufnahme hell oder dunkel. Deshalb dieselbe Behandlung wie bei
   .ai-tag: helle Schrift mit Schatten, die auf beidem steht. */
.cta-photo figcaption {
  position: absolute; right: var(--pad); bottom: 1rem;
  font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
@media (max-width: 900px) {
  .cta-photo .cta-grid { max-width: none; }
  .cta-photo-media::after {
    background: linear-gradient(180deg,
      rgba(246, 245, 241, .96) 0%, rgba(246, 245, 241, .90) 55%, rgba(246, 245, 241, .62) 100%);
  }
  /* Unterhalb des Bildes steht es wieder auf Papier. */
  .cta-photo figcaption {
    position: static; display: block; margin-top: 2rem; text-align: right;
    color: var(--ink-3); text-shadow: none;
  }
}

/* ============================================================
   Personenprofil
   ============================================================ */
.profile {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
/* Das Bild steht rechts, im Markup aber zuerst — so bleibt es auf
   schmalen Schirmen oben, wo es hingehört. */
.profile > :first-child { order: 2; }
.profile-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-2); }

.profile-index {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
  color: var(--ink-3); margin: 0 0 1.1rem;
}
.profile-index::before {
  content: ''; width: 18px; height: 9px; background: var(--gold); flex: none;
}
.profile-index b { color: var(--ink-2); font-weight: 500; }

.profile-name { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.profile-name h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
/* Maße und Zustände wie auf der bisherigen defyne.de */
.profile-link {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  color: var(--ink-2);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.profile-link:hover,
.profile-link:focus-visible {
  color: var(--gold-deep);
  border-color: rgba(191, 144, 0, .32);
  background: rgba(191, 144, 0, .10);
}
.profile-link svg { width: 18px; height: 18px; }

.profile-roles { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.profile-roles span {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--hair); padding: .55rem .9rem;
}
/* Studien-Badges im Profil: Logo, Haarlinie, Fach */
.profile-edu { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.profile-edu a {
  display: flex; align-items: center; gap: .7rem;
  border: 1px solid var(--hair); padding: .5rem .9rem; text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.profile-edu a:hover { border-color: var(--ink); background: var(--white); }
.profile-edu img { height: 18px; width: auto; display: block; }
.profile-edu span {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); border-left: 1px solid var(--hair); padding-left: .7rem;
}

.profile-bio { margin-top: 1.5rem; color: var(--ink-2); max-width: 58ch; }

.profile-focus { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--hair); }
.profile-focus ul { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin: 1rem 0 0; padding: 0; }
.profile-focus li { display: flex; align-items: center; gap: .55rem; font-size: .9375rem; }
.profile-focus li::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--gold); flex: none;
}

.profile-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.profile-contact a {
  display: grid; gap: .35rem; padding: 1rem 1.1rem;
  border: 1px solid var(--hair); text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.profile-contact a:hover { border-color: var(--ink); background: var(--white); }
.profile-contact small {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.profile-contact b { font-weight: 400; font-size: .9375rem; }
@media (max-width: 860px) {
  .profile { grid-template-columns: 1fr; }
  .profile > :first-child { order: 0; }
}
@media (max-width: 480px) { .profile-contact { grid-template-columns: 1fr; } }

/* Werdegang unter dem Profil — zweispaltig, damit sechs Einträge
   nicht zur langen Liste werden */
.profile-cv { margin-top: clamp(2.5rem, 5vw, 4rem); }
.profile-cv .cv {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 4rem);
  margin-top: 1rem;
}
@media (max-width: 780px) { .profile-cv .cv { grid-template-columns: 1fr; } }

/* Zweites Profil: dunkles Band, Bild links, Text rechts */
.profile--flip { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.profile--flip > :first-child { order: 0; }
.section--ink .profile-index { color: var(--on-ink-2); }
.section--ink .profile-index b { color: var(--on-ink); }
.section--ink .profile-roles span { color: var(--on-ink-2); border-color: var(--hair-ink); }
.section--ink .profile-bio { color: var(--on-ink-2); }
.section--ink .profile-focus { border-color: var(--hair-ink); }
.section--ink .profile-contact a { border-color: var(--hair-ink); }
.section--ink .profile-contact a:hover { border-color: var(--on-ink); background: rgba(255,255,255,.04); }
.section--ink .profile-contact small { color: var(--on-ink-2); }
.section--ink .profile-focus li::before { background: var(--gold-bright); }
.section--ink .profile-index::before { background: var(--gold-bright); }
.section--ink .cv li { border-color: var(--hair-ink); }
.section--ink .cv time,
.section--ink .cv em { color: var(--on-ink-2); }

@media (max-width: 860px) { .profile--flip { grid-template-columns: 1fr; } }
/* LinkedIn-Knopf auf dunklem Grund */
.section--ink .profile-link { background: rgba(255,255,255,.05); border-color: var(--hair-ink); color: var(--on-ink-2); }
.section--ink .profile-link:hover,
.section--ink .profile-link:focus-visible {
  color: var(--gold-bright); border-color: rgba(217,165,32,.45); background: rgba(217,165,32,.12);
}
/* Die Claim-Wörter an den Profilen: kleingeschrieben wie die Wortmarke */
.profile-index b + span, .profile-index { text-transform: none; }
/* Fließtext im Antriebs-Abschnitt */
.drive-text { color: var(--ink-2); font-size: .9375rem; margin-top: 1.1rem; max-width: 54ch; }
.section--ink .drive-text { color: var(--on-ink-2); }
/* Aufzählung der Felder im Abschluss — als Vorspann vor dem Fließtext */
.drive-lead {
  font-family: var(--display); font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink);
  margin-bottom: .9rem;
}
.section--ink .drive-lead { color: var(--on-ink); }

/* ============================================================
   Abschnitt mit zartem Bildgrund — das Motiv scheint durch,
   der Text bleibt auf Papier lesbar.
   ============================================================ */
.section--photo { position: relative; overflow: hidden; }
.section--photo > .photo-bg { position: absolute; inset: 0; margin: 0; }
.section--photo > .photo-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.section--photo > .photo-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(246, 245, 241, .88) 0%,
    rgba(246, 245, 241, .78) 45%,
    rgba(246, 245, 241, .56) 100%);
}
.section--photo > .wrap { position: relative; }
.section--photo figcaption {
  position: absolute; right: var(--pad); bottom: 1rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
  /* Doppelter Papier-Schein, damit das Label auch über dem Motiv klar steht */
  text-shadow: 0 0 8px rgba(246, 245, 241, .95), 0 0 16px rgba(246, 245, 241, .8), 0 1px 2px rgba(246, 245, 241, 1);
}
@media (max-width: 700px) {
  .section--photo > .photo-bg::after {
    background: linear-gradient(180deg, rgba(246,245,241,.92) 0%, rgba(246,245,241,.74) 100%);
  }
}

/* Kontakt: Detailband dunkel, Abschluss hell — damit sich der Footer absetzt */
.contact-note { margin-top: 1.5rem; color: var(--ink-2); }
.section--ink .contact-note { color: var(--on-ink-2); }
.section--ink .contact-list li { border-color: var(--hair-ink); }
.section--ink .contact-list a { color: var(--on-ink); border-bottom-color: var(--gold-bright); }
.section--ink .contact-list a:hover { color: var(--gold-bright); }
.section--ink .checklist li { color: var(--on-ink-2); }
.section--ink .checklist li::before { background: var(--gold-bright); }