/* ============================================================
   sections.css — sektionsspezifische Layouts
   ============================================================ */

/* ── Header / Navigation ──────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--hairline); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 4.6rem;
}
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.8rem); }
.nav__link {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--graphite);
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link:hover, .nav__link[aria-current="true"] { color: var(--ink); }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--clay); transition: width var(--dur) var(--ease);
}
.nav__link:hover::after { width: 100%; }
.nav__actions { display: flex; align-items: center; gap: var(--space-3); }

.theme-toggle {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  color: var(--graphite);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
.theme-toggle:hover { color: var(--clay); border-color: var(--clay); transform: rotate(12deg); }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="evening"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="evening"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="day"]) .theme-toggle .icon-moon { display: none; }
}

.nav__burger { display: none; width: 2.4rem; height: 2.4rem; place-items: center; color: var(--ink); }
.nav__burger svg { width: 1.4rem; height: 1.4rem; }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
  .nav__cta { display: none; }
  body.nav-open .nav__links {
    display: flex; flex-direction: column; align-items: flex-start;
    position: fixed; inset: 4.6rem 0 auto 0;
    background: var(--paper); border-bottom: 1px solid var(--hairline);
    padding: var(--space-6) var(--gutter); gap: var(--space-5);
    box-shadow: var(--shadow);
  }
  body.nav-open .nav__link { font-size: var(--step-1); }
}

/* ── Hero ─────────────────────────────────────────────── */
.hero { position: relative; padding-block: clamp(4rem, 8vw, 7.5rem) var(--section-y); overflow: hidden; }
/* Signature: „Konvergenz" — viele Linien laufen auf einen Punkt zu (der Engpass / EKS) */
/* Signature: „Konvergenz" — viele Linien laufen auf einen Punkt zu (der Engpass / EKS) */
.hero__signature {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  width: min(54%, 880px); aspect-ratio: 520 / 460;
  z-index: 0; pointer-events: none; will-change: transform;
}
.hero__signature svg { width: 100%; height: 100%; overflow: visible; }
.conv__ray { stroke: var(--hairline); stroke-width: 1; fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
.conv__ray--accent { stroke: var(--clay); opacity: 0.5; }
.conv__pulse { stroke: var(--clay); stroke-width: 1.6; fill: none; stroke-dasharray: 0.08 0.92; stroke-dashoffset: 1; opacity: 0; }
.conv__node { fill: var(--clay); transform-box: fill-box; transform-origin: center; }
.conv__ring { fill: none; stroke: var(--clay); stroke-width: 1.5; opacity: 0.3; transform-box: fill-box; transform-origin: center; }
.hero__inner { position: relative; z-index: 2; }

/* Bewegung — nur ohne reduce-motion. Standardzustand bleibt sauber/scharf. */
@media (prefers-reduced-motion: no-preference) {
  .conv__ray { animation: conv-draw 1.2s var(--ease) both; }
  .conv__node { animation: conv-node 4.5s ease-in-out infinite; }
  .conv__ring { animation: conv-breathe 4.5s ease-in-out infinite; }
  .conv__pulse { animation: conv-pulse 3.6s cubic-bezier(.4,0,.5,1) infinite; }
  .conv__pulses line:nth-child(1)  { animation-delay: 0s; }
  .conv__pulses line:nth-child(2)  { animation-delay: .32s; }
  .conv__pulses line:nth-child(3)  { animation-delay: .64s; }
  .conv__pulses line:nth-child(4)  { animation-delay: .96s; }
  .conv__pulses line:nth-child(5)  { animation-delay: 1.28s; }
  .conv__pulses line:nth-child(6)  { animation-delay: 1.6s; }
  .conv__pulses line:nth-child(7)  { animation-delay: 1.92s; }
  .conv__pulses line:nth-child(8)  { animation-delay: 2.24s; }
  .conv__pulses line:nth-child(9)  { animation-delay: 2.56s; }
  .conv__pulses line:nth-child(10) { animation-delay: 2.88s; }
}
@keyframes conv-draw   { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes conv-pulse  { 0% { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: .9; } 82% { opacity: .9; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes conv-breathe{ 0%,100% { transform: scale(1); opacity: .3; } 50% { transform: scale(1.35); opacity: .1; } }
@keyframes conv-node   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }

@media (max-width: 860px) {
  .hero__signature { width: 96%; right: -22%; opacity: 0.5; }
}
.hero__eyebrow { margin-bottom: var(--space-5); }
.hero__title { font-size: var(--step-5); font-weight: 360; max-width: 18ch; }
.hero__title em { font-style: normal; color: var(--clay); }
.hero__lead {
  font-size: var(--step-1); color: var(--graphite); max-width: 44ch;
  margin-top: var(--space-6); font-weight: 400;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); align-items: center; }
.hero__reassure { font-size: var(--step--1); color: var(--graphite-2); display: flex; align-items: center; gap: 0.5rem; }
.hero__reassure svg { width: 1rem; height: 1rem; color: var(--sage-deep); }

/* Trust-Streifen (Kennzahlen) */
/* Ruhige, typografische Fakten-Zeile (kein „Big-Number"-Template) */
.cred-row {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.7rem 1.4rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--graphite);
}
.cred-row li { display: flex; align-items: center; gap: 1.4rem; }
.cred-row li:not(:last-child)::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--clay);
}

/* ── Positionierung ───────────────────────────────────── */
.positioning__statement {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 340;
  line-height: 1.28;
  letter-spacing: -0.01em;
  max-width: 24ch;
}
.positioning__statement .hl { color: var(--clay); font-style: normal; }
.positioning__body { color: var(--graphite); font-size: var(--step-1); }

/* ── EKS-Infografik: Gießkanne vs. Engpass ────────────── */
.eks-figure { margin-top: clamp(3.5rem, 7vw, 6rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); }
.eks-figure__panel { display: flex; flex-direction: column; gap: var(--space-5); border-top: 2px solid var(--hairline); padding-top: var(--space-5); }
.eks-figure__panel--accent { border-top-color: var(--clay); }
.eks-figure__label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--graphite-2); }
.eks-figure__panel--accent .eks-figure__label { color: var(--clay-deep); }
.eks-figure__caption { color: var(--graphite); font-size: var(--step-0); margin-top: var(--space-2); max-width: 34ch; }
.eks-diagram { width: 100%; height: auto; display: block; }
.eks-diagram .ray { stroke: var(--hairline); stroke-width: 1.2; fill: none; }
.eks-diagram .ray--acc { stroke: var(--clay); stroke-width: 1.2; fill: none; opacity: 0.55; }
.eks-diagram .dot { fill: var(--graphite-2); }
.eks-diagram .node { fill: var(--clay); }
.eks-diagram .out { stroke: var(--clay); stroke-width: 2.5; fill: none; }
.eks-diagram .head { fill: var(--clay); }
/* EKS-Diagramm — Animation (analog zur Hero-Konvergenz) */
.eks-diagram .node, .eks-ring, .eks-arrow { transform-box: fill-box; transform-origin: center; }
.eks-ring { fill: none; stroke: var(--clay); stroke-width: 1.4; opacity: 0; }
.eks-pulse { fill: none; stroke-width: 1.8; stroke-dasharray: 0.09 0.91; stroke-dashoffset: 1; opacity: 0; }
.eks-pulses--in .eks-pulse { stroke: var(--clay); }
.eks-pulses--out .eks-pulse { stroke: var(--graphite-2); }
@media (prefers-reduced-motion: no-preference) {
  .eks-pulses--in .eks-pulse  { animation: eks-flow 3.4s cubic-bezier(.4,0,.5,1) infinite; }
  .eks-pulses--out .eks-pulse { animation: eks-spray 3.4s cubic-bezier(.4,0,.5,1) infinite; }
  .eks-pulses .eks-pulse:nth-child(1) { animation-delay: 0s; }
  .eks-pulses .eks-pulse:nth-child(2) { animation-delay: .28s; }
  .eks-pulses .eks-pulse:nth-child(3) { animation-delay: .56s; }
  .eks-pulses .eks-pulse:nth-child(4) { animation-delay: .84s; }
  .eks-pulses .eks-pulse:nth-child(5) { animation-delay: 1.12s; }
  .eks-diagram .node { animation: conv-node 4.5s ease-in-out infinite; }
  .eks-ring  { animation: eks-ring 3.4s ease-out infinite; }
  .eks-arrow { animation: eks-thrust 3.4s ease-in-out infinite; }
}
@keyframes eks-flow   { 0% { stroke-dashoffset: 1; opacity: 0; } 14% { opacity: .95; } 78% { opacity: .95; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes eks-spray  { 0% { stroke-dashoffset: 1; opacity: 0; } 20% { opacity: .5; } 65% { opacity: .26; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes eks-ring   { 0% { transform: scale(1); opacity: .35; } 70%,100% { transform: scale(3.2); opacity: 0; } }
@keyframes eks-thrust { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (max-width: 680px) { .eks-figure { grid-template-columns: 1fr; gap: var(--space-10); } }

/* ── Säulen-Grid ──────────────────────────────────────── */
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 7vw, 6rem); }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; gap: var(--space-12); } }

/* ── Vorgehen (Prozess) ───────────────────────────────── */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); counter-reset: step; }
.process__step { position: relative; padding-top: var(--space-8); }
.process__step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: var(--tracking-mono);
  color: var(--clay); position: absolute; top: 0; left: 0;
}
.process__step::after {
  content: ""; position: absolute; top: 0.35rem; left: 2.6rem; right: 0; height: 1px; background: var(--hairline);
}
.process__step:last-child::after { display: none; }
.process__title { font-size: var(--step-2); margin-bottom: 0.5rem; }
.process__text { color: var(--graphite); font-size: var(--step--1); }
@media (max-width: 860px) { .process { grid-template-columns: repeat(2, 1fr); gap: var(--space-10) var(--grid-gap); } .process__step::after { display: none; } }
@media (max-width: 480px) { .process { grid-template-columns: 1fr; } }

/* ── Ergebnisse / Referenzen ──────────────────────────── */
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.result-card { display: grid; gap: var(--space-3); align-content: start; border-top: 2px solid var(--clay); padding-top: var(--space-5); }
.result-card .stat__num { font-size: clamp(2.4rem, 5vw, 3.4rem); }
.result-card__desc { color: var(--graphite); }
.result-card__meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--sage-deep); }
@media (max-width: 860px) { .results { grid-template-columns: 1fr; gap: var(--space-10); } }

/* ── Stimmen / Testimonials ───────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem); }
.principle { border-top: 2px solid var(--clay); padding-top: var(--space-5); }
.principle h3 { font-size: var(--step-2); }
.principle p { color: var(--graphite); margin-top: var(--space-3); max-width: 34ch; }
.quote {
  display: grid; gap: var(--space-5);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
}
.quote__text { font-family: var(--font-display); font-size: var(--step-2); font-weight: 360; line-height: 1.4; }
.quote__text::before { content: "„"; color: var(--clay); }
.quote__author { display: flex; align-items: center; gap: var(--space-4); }
.quote__avatar {
  width: 3rem; height: 3rem; border-radius: 50%; flex: none;
  background: var(--clay-wash); color: var(--clay-deep);
  display: grid; place-items: center; font-family: var(--font-display); font-size: var(--step-1);
  border: 1px solid color-mix(in srgb, var(--clay) 25%, transparent);
}
.quote__name { font-weight: 600; }
.quote__role { font-size: var(--step--1); color: var(--graphite); }
@media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } }

/* ── Über mich ────────────────────────────────────────── */
.about { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2.5rem, 7vw, 5.5rem); align-items: center; }
.about__media { position: relative; aspect-ratio: 4 / 5; }
.about__media::before { content: ""; position: absolute; inset: 0; transform: translate(1.4rem, 1.4rem); border: 1px solid var(--clay); border-radius: var(--radius-lg); opacity: 0.45; z-index: 0; }
.about__media img, .about__media video { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius-lg); box-shadow: var(--shadow); background: var(--surface-2); }
.about__media-mark { width: 44%; aspect-ratio: 1; color: color-mix(in srgb, var(--clay) 70%, var(--graphite)); opacity: 0.9; }
.about__media-note { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--graphite-2); text-align: center; }
.about__lead { font-size: var(--step-1); color: var(--graphite); }
.about__credentials { display: grid; gap: 0.7rem; margin-top: var(--space-6); }
.about__credentials li { display: flex; gap: 0.7rem; align-items: baseline; color: var(--graphite); }
.about__credentials svg { width: 1rem; height: 1rem; color: var(--clay); flex: none; transform: translateY(2px); }
@media (max-width: 820px) { .about { grid-template-columns: 1fr; gap: var(--space-10); } .about__media { max-width: 24rem; } .about__media::before { transform: translate(1rem, 1rem); } }

/* ── Wissens-Ressource (Lead-Magnet 2) ────────────────── */
.resource {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
}
.resource__form { display: grid; gap: var(--space-4); }
.resource__row { display: flex; gap: var(--space-3); }
.resource__row .input { flex: 1; }
@media (max-width: 760px) { .resource { grid-template-columns: 1fr; } .resource__row { flex-direction: column; } }

/* ── FAQ ──────────────────────────────────────────────── */
.faq { display: grid; gap: 0; max-width: 52rem; }
.faq__item { border-top: 1px solid var(--hairline); }
.faq__item:last-child { border-bottom: 1px solid var(--hairline); }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-6) 0; text-align: left; font-family: var(--font-display); font-size: var(--step-2); font-weight: 380; color: var(--ink);
}
.faq__icon { width: 1.4rem; height: 1.4rem; flex: none; position: relative; color: var(--clay); transition: transform var(--dur) var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: currentColor; inset: 0; margin: auto; }
.faq__icon::before { width: 100%; height: 2px; }
.faq__icon::after { width: 2px; height: 100%; transition: transform var(--dur) var(--ease); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); }
.faq__a { overflow: hidden; height: 0; transition: height var(--dur) var(--ease); }
.faq__a-inner { padding-bottom: var(--space-6); color: var(--graphite); max-width: 46rem; }

/* ── Finaler CTA ──────────────────────────────────────── */
.cta-final {
  position: relative; overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius-lg);
  text-align: center;
}
/* abstrakter Oxblood/Bone-Aquarell-Akzent (dezent) */
.cta-final::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/accent.jpg") center / cover no-repeat;
  opacity: 0.16; mix-blend-mode: screen;
}
.cta-final > * { position: relative; z-index: 1; }

/* ── Cinematic Band (animiertes Foto, voll) ───────────── */
.cine-band { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: min(86vh, 900px); display: grid; overflow: hidden; }
.cine-band__poster, .cine-band__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cine-band__poster { z-index: 0; }
.cine-band__media { z-index: 1; }
.cine-band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,16,12,0.12) 0%, rgba(20,16,12,0.74) 100%); }
.cine-band__overlay { position: relative; z-index: 2; align-self: end; padding-block: clamp(2.5rem, 6vw, 4rem); display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.cine-band__line { font-family: var(--font-display); font-weight: 380; font-size: var(--step-4); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: #F4F1EA; max-width: 18ch; }
@media (max-width: 640px) { .cine-band { aspect-ratio: 4 / 5; max-height: 78vh; } .cine-band__poster, .cine-band__media { object-position: 50% 24%; } }
:root[data-theme="evening"] .cta-final { background: var(--surface); border: 1px solid var(--hairline); }
.cta-final__title { color: var(--paper); font-size: var(--step-4); max-width: 20ch; margin-inline: auto; }
:root[data-theme="evening"] .cta-final__title { color: var(--ink); }
.cta-final__lead { color: color-mix(in srgb, var(--paper) 75%, transparent); max-width: 42ch; margin: var(--space-5) auto 0; }
:root[data-theme="evening"] .cta-final__lead { color: var(--graphite); }
.cta-final__form { max-width: 30rem; margin: var(--space-8) auto 0; display: grid; gap: var(--space-4); }
.cta-final .input { background: color-mix(in srgb, var(--paper) 12%, transparent); border-color: color-mix(in srgb, var(--paper) 25%, transparent); color: var(--paper); }
.cta-final .input::placeholder { color: color-mix(in srgb, var(--paper) 55%, transparent); }
:root[data-theme="evening"] .cta-final .input { background: var(--surface-2); color: var(--ink); border-color: var(--hairline); }
.cta-final .checkbox { color: color-mix(in srgb, var(--paper) 70%, transparent); justify-content: center; }
:root[data-theme="evening"] .cta-final .checkbox { color: var(--graphite); }
/* Panel ist in beiden Themes dunkel → Links immer hell halten */
.cta-final .link { color: #F4F1EA; background-image: linear-gradient(var(--clay), var(--clay)); }
.cta-final .link:hover { color: var(--clay); }

/* ── Footer ───────────────────────────────────────────── */
.site-footer { padding-block: var(--space-16) var(--space-10); border-top: 1px solid var(--hairline); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-10); }
.footer__tagline { color: var(--graphite); margin-top: var(--space-4); max-width: 32ch; }
.footer__col h5 { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--graphite-2); margin-bottom: var(--space-4); }
.footer__col ul { display: grid; gap: 0.6rem; }
.footer__col a { color: var(--graphite); transition: color var(--dur-fast) var(--ease); }
.footer__col a:hover { color: var(--clay); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--hairline); font-size: var(--step--1); color: var(--graphite-2); }
.footer__legal { display: flex; gap: var(--space-5); }
.footer__legal a { color: var(--graphite); }
.footer__legal a:hover { color: var(--clay); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ── Sticky-CTA (mobil) ───────────────────────────────── */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  padding: 0.8rem var(--gutter); background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px); border-top: 1px solid var(--hairline);
  display: none; transform: translateY(110%); transition: transform var(--dur) var(--ease);
}
.sticky-cta.is-in { transform: none; }
@media (max-width: 860px) { .sticky-cta { display: block; } }

/* ── Datenschutz-Hinweis ──────────────────────────────── */
.consent {
  position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: var(--z-overlay);
  max-width: 26rem; display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  transform: translateY(140%); opacity: 0; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.consent.is-in { transform: none; opacity: 1; }
.consent__text { font-size: var(--step--1); color: var(--graphite); max-width: none; }
.consent__ok { align-self: flex-start; }
@media (max-width: 860px) { .consent { left: var(--gutter); right: var(--gutter); bottom: 5.4rem; max-width: none; } }