/* hivefour landing page. Values come from the design system copy (tokens.css);
   this file decides how they are used.

   Two worlds: the story (hero and the five chapters, and the closing conversation)
   plays at night over the meadow and the hive, with honey as its accent. The
   reading parts in between (agents, trust, start, questions) sit on white and
   indigo tint with lavender, as in the product. */

:root {
  --nav-h: 72px;
  --gutter: clamp(16px, 4vw, 48px);
  --container: 1200px;
  --measure: 62ch;

  /* Story accent. The landing page is the only place that uses honey (decision 0004). */
  --honey-200: #ffe7a3;
  --honey-300: #ffd36b;
  --honey-400: #ffba3a;

  --night: var(--b-950);
  --on-dark: var(--text-on-dark);
  --on-dark-soft: rgb(255 255 255 / 0.78);
  --on-dark-faint: rgb(255 255 255 / 0.6);
  --line-on-dark: rgb(255 255 255 / 0.16);
  --glass: rgb(11 6 50 / 0.66);
  --glass-light: rgb(255 255 255 / 0.06);
  --error-on-dark: #fca5a5;
}

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

html {
  scroll-padding-top: calc(var(--nav-h) + var(--sp-sm));
  -webkit-text-size-adjust: 100%;
  background: var(--night);
}

body {
  margin: 0;
  background: var(--night);
  color: var(--on-dark);
  font: var(--fw-regular) 17px / var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

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

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

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--honey-300);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.section:not(.section--dark) :focus-visible {
  outline-color: var(--hl-600);
}

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

.sprite {
  position: absolute;
  width: 0;
  height: 0;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.skip-link {
  position: fixed;
  top: var(--sp-xs);
  left: var(--sp-xs);
  z-index: 100;
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--r-md);
  background: var(--honey-300);
  color: var(--night);
  font-weight: var(--fw-bold);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

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

main,
.footer {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------- backdrop, scene */

/* The painted meadow: a still of the scene, then a dusk gradient where the image is missing. */
.backdrop,
.scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.backdrop {
  background:
    linear-gradient(90deg, rgb(11 6 50 / 0.4) 0%, transparent 60%),
    url('../img/wiese.webp') center bottom / cover no-repeat,
    radial-gradient(120% 70% at 70% 100%, #6b2a3a 0%, transparent 60%),
    linear-gradient(180deg, var(--b-950) 0%, var(--b-900) 55%, #3a1d4a 100%);
}

.scene {
  opacity: 0;
  transition: opacity 1600ms var(--ease);
}

.has-scene .scene {
  opacity: 1;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--sp-md);
  border: 0;
  border-radius: var(--r-md);
  font: var(--fw-bold) 16px / 1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}

.btn:active {
  transform: scale(0.97);
}

.btn--sm {
  min-height: 44px;
  padding: 0 var(--sp-sm);
  font-size: 15px;
  white-space: nowrap;
}

@media (max-width: 379px) {
  .btn--sm {
    padding: 0 var(--sp-xs);
    font-size: 14px;
  }
}

.btn--honey {
  background: var(--honey-300);
  color: var(--night);
}

.btn--ghost {
  background: transparent;
  color: var(--on-dark);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4);
}

@media (hover: hover) {
  .btn--honey:hover {
    background: var(--honey-200);
  }
  .btn--ghost:hover {
    background: var(--glass-light);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.7);
  }
}

/* ------------------------------------------------------------- navigation */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  height: var(--nav-h);
  padding-inline: var(--gutter);
  transition:
    background-color var(--med) var(--ease),
    box-shadow var(--med) var(--ease);
}

.is-scrolled .nav {
  background: rgb(11 6 50 / 0.96);
  box-shadow: 0 1px 0 var(--line-on-dark);
  backdrop-filter: blur(12px);
}

.nav__brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
}

.nav__brand img {
  height: 22px;
  width: auto;
}

.nav__links {
  display: flex;
  gap: var(--sp-md);
}

.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-dark-soft);
  font-size: 15px;
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}

@media (hover: hover) {
  .nav__links a:hover {
    color: var(--on-dark);
  }
}

@media (max-width: 899px) {
  .nav__links {
    display: none;
  }
}

/* Chapter rail: where in the story the reader is. Large screens only. */
.rail {
  position: fixed;
  top: 50%;
  right: var(--sp-md);
  z-index: 15;
  display: grid;
  gap: 2px;
  transform: translateY(-50%);
  transition: opacity var(--med) var(--ease);
}

.js .rail:not(.is-shown) {
  opacity: 0;
  pointer-events: none;
}

.rail a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-xs);
  min-height: 32px;
  color: var(--on-dark-faint);
  font-size: 13px;
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.rail a::after {
  content: '';
  width: 10px;
  height: 11px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: transform var(--med) var(--ease);
}

.rail span {
  opacity: 0;
  transform: translateX(6px);
  transition:
    opacity var(--med) var(--ease),
    transform var(--med) var(--ease);
}

.rail a[aria-current] {
  color: var(--honey-300);
}

.rail a[aria-current]::after {
  transform: scale(1.35);
}

.rail a:hover span,
.rail a:focus-visible span,
.rail a[aria-current] span {
  opacity: 1;
  transform: none;
}

@media (max-width: 1199px), (max-height: 679px) {
  .rail {
    display: none;
  }
}

@media (min-width: 1200px) and (min-height: 680px) {
  .chapter[data-side='right'] .chapter__pin {
    padding-right: calc(var(--gutter) + 120px);
  }
}

/* --------------------------------------------------------------- chapters */

/* With the scene running on a large screen every chapter is a stage: the text
   stays put while the scroll distance flies the camera. Everywhere else the
   chapters are ordinary sections. */
.chapter {
  position: relative;
}

.chapter__pin {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + var(--sp-lg)) var(--gutter) var(--sp-xl);
}

@media (min-width: 900px) and (min-height: 680px) {
  .has-scene .chapter:not(.chapter--finale) {
    height: calc(100vh * (1 + var(--extra, 1)));
    height: calc(100svh * (1 + var(--extra, 1)));
  }

  .has-scene .chapter:not(.chapter--finale) .chapter__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    padding-block: calc(var(--nav-h) + var(--sp-sm)) var(--sp-md);
  }
}

.chapter__inner {
  width: min(100%, 1280px);
  margin-inline: auto;
}

/* The scene dims the text side; the shadow keeps text clear over bright wax and honey. */
.has-scene .chapter :is(.hero, .chapter__body) {
  text-shadow: 0 1px 18px rgb(11 6 50 / 0.85);
}

.has-scene .chapter :is(.btn, .pain) {
  text-shadow: none;
}

.chapter__body {
  display: grid;
  gap: var(--sp-md);
  width: min(100%, 620px);
}

.chapter[data-side='right'] .chapter__body {
  margin-left: auto;
}

/* Where the scene cannot dim the text side (no scene, small screens), the text gets its own ground. */
html:not(.has-scene) .chapter:not(.chapter--hero, .chapter--finale) .chapter__body {
  padding: var(--sp-lg);
  border-radius: var(--r-lg);
  background: var(--glass);
  backdrop-filter: blur(10px);
}

@media (max-width: 899px), (max-height: 679px) {
  .chapter:not(.chapter--hero, .chapter--finale) .chapter__body {
    padding: var(--sp-md);
    border-radius: var(--r-lg);
    background: var(--glass);
    backdrop-filter: blur(10px);
  }
}

.chapter__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xs);
  color: var(--on-dark-soft);
  font-size: 15px;
  font-weight: var(--fw-bold);
}

.chapter__g {
  color: var(--honey-300);
}

.chapter__g::before {
  content: '·';
  margin-right: var(--sp-xs);
  color: var(--on-dark-faint);
}

.mini-mark {
  width: 22px;
  height: 22px;
  overflow: visible;
}

.mini-mark use {
  fill: rgb(255 255 255 / 0.28);
}

.mini-mark use.on {
  fill: var(--honey-300);
}

.mini-mark--scattered use {
  fill: var(--on-dark-soft);
  transform-box: fill-box;
  transform-origin: center;
}

.mini-mark--scattered use:nth-child(1) {
  transform: translate(-14%, -30%) rotate(-14deg);
}

.mini-mark--scattered use:nth-child(2) {
  transform: translate(12%, 0) rotate(8deg);
  opacity: 0.6;
}

.mini-mark--scattered use:nth-child(3) {
  opacity: 0.25;
}

.mini-mark--scattered use:nth-child(4) {
  transform: translate(22%, 40%) rotate(10deg);
}

.chapter__title {
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: var(--fw-black);
  line-height: 1.06;
  letter-spacing: var(--ls-display);
}

.chapter__title--big {
  font-size: clamp(48px, 6.4vw, 96px);
}

/* The serif word is the one image each headline leaves behind. */
.hero__title em,
.chapter__title em {
  color: var(--honey-300);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}

.chapter__lead {
  max-width: 54ch;
  color: var(--on-dark-soft);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
}

.chapter__facts {
  display: grid;
  gap: var(--sp-sm);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--line-on-dark);
}

.chapter__facts li {
  position: relative;
  padding-left: var(--sp-md);
  color: var(--on-dark);
  font-size: 16px;
}

.chapter__facts li::before,
.proof li::before {
  content: '';
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 9px;
  height: 10px;
  background: var(--honey-300);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}

@media (min-width: 900px) and (max-height: 820px) {
  .chapter__body {
    gap: var(--sp-sm);
  }

  .chapter__title {
    font-size: clamp(32px, 3.8vw, 52px);
  }

  .chapter__facts {
    gap: var(--sp-xs);
    padding-top: var(--sp-sm);
  }
}

/* ------------------------------------------------------------------- hero */

.chapter--hero .chapter__pin {
  align-items: stretch;
}

.hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-lg);
  width: min(100%, 1280px);
  margin-inline: auto;
}

/* On the stage the hero steps back as the reader flies in. --p is set while the scene runs. */
.has-scene .hero {
  opacity: max(0, calc(1.3 - var(--p, 0) * 1.8));
  transform: translateY(calc(var(--p, 0) * -48px));
}

.hero__copy {
  display: grid;
  gap: var(--sp-md);
  align-content: center;
  flex: 1;
  max-width: 980px;
}

.kicker {
  color: var(--honey-300);
  font-size: 16px;
  font-weight: var(--fw-bold);
}

.hero__title {
  font-size: clamp(48px, 6.4vw, 96px);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--ls-display);
}

.hero__sub {
  max-width: 56ch;
  color: var(--on-dark-soft);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
}

.proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-md);
  color: var(--on-dark-soft);
  font-size: 15px;
}

.proof li {
  position: relative;
  padding-left: 18px;
}

.story-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-md);
}

.story-index a {
  display: grid;
  gap: 4px;
  height: 100%;
  padding-top: var(--sp-sm);
  border-top: 1px solid rgb(255 255 255 / 0.3);
  color: var(--on-dark-soft);
  font-size: 15px;
  line-height: 1.45;
  text-decoration: none;
  transition: border-color var(--med) var(--ease);
}

.story-index b {
  color: var(--on-dark);
  font-size: 18px;
  font-weight: var(--fw-black);
}

@media (hover: hover) {
  .story-index a:hover {
    border-top-color: var(--honey-300);
  }
}

@media (max-width: 1099px) {
  .story-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .hero {
    gap: var(--sp-xl);
  }
}

@media (max-width: 559px) {
  .story-index {
    grid-template-columns: 1fr;
    gap: var(--sp-sm);
  }
}

/* ------------------------------------------------------------------ wiese */

.pains {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-sm);
}

@media (max-width: 559px) {
  .pains {
    grid-template-columns: 1fr;
  }
}

.pains li {
  display: grid;
}

.pain {
  display: grid;
  align-content: start;
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md) var(--sp-md);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-lg);
  background: var(--glass-light);
  text-decoration: none;
  transition:
    border-color var(--fast) var(--ease),
    background-color var(--fast) var(--ease);
}

.pain__name {
  color: var(--on-dark);
  font-size: 22px;
  font-weight: var(--fw-black);
}

.pain__text {
  color: var(--on-dark-soft);
  font-size: 15px;
  line-height: 1.5;
}

@media (hover: hover) {
  .pain:hover {
    border-color: var(--honey-300);
  }
}

.pain[aria-current='true'] {
  border-color: var(--honey-300);
  background: rgb(255 211 107 / 0.1);
}

.aside-line {
  color: var(--on-dark);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

@media (min-width: 900px) and (max-height: 820px) {
  .pain {
    padding: var(--sp-sm);
  }

  .pain__name {
    font-size: 19px;
  }

  .pain__text {
    font-size: 14px;
  }
}

/* --------------------------------------------------------- reading parts */

.section {
  padding-block: var(--sp-xl);
  background: var(--n-0);
  color: var(--text-body);
}

@media (min-width: 900px) {
  .section {
    padding-block: var(--sp-2xl);
  }
}

.section--tint {
  background: var(--b-50);
}

.section--dark {
  background: var(--b-800);
  color: var(--on-dark);
}

.section h2 {
  color: var(--text-heading);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
}

.section--dark h2 {
  color: var(--on-dark);
}

.section__head {
  display: grid;
  gap: var(--sp-sm);
  max-width: 760px;
  margin-bottom: var(--sp-lg);
}

.section__lead {
  max-width: var(--measure);
  color: var(--text-secondary);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}

.section a:not(.btn) {
  color: var(--hl-700);
  text-underline-offset: 3px;
}

.section--dark a:not(.btn) {
  color: var(--hl-300);
}

/* ---------------------------------------------------------------- agenten */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-lg);
  align-items: center;
}

@media (max-width: 899px) {
  .split {
    grid-template-columns: 1fr;
  }
}

.split__text {
  display: grid;
  gap: var(--sp-md);
}

.facts {
  display: grid;
  gap: var(--sp-xs);
  color: var(--text-secondary);
  font-size: 15px;
}

.facts li {
  position: relative;
  padding-left: var(--sp-md);
}

.facts li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 8px;
  height: 2px;
  background: var(--hl-500);
}

.demo {
  display: grid;
  gap: var(--sp-sm);
}

.demo__window {
  display: grid;
  gap: var(--sp-sm);
  padding: var(--sp-md);
  border-radius: var(--r-lg);
  background: var(--n-0);
  box-shadow: var(--sh-pop);
}

.demo__ask {
  justify-self: end;
  max-width: 85%;
  padding: var(--sp-sm);
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
  background: var(--b-800);
  color: var(--on-dark);
  font-size: 15px;
}

.demo__answer {
  display: grid;
  gap: var(--sp-sm);
  font-size: 15px;
}

.demo__source {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: 13px;
}

.demo__source .mono {
  color: var(--n-500);
}

.demo__proposal {
  display: grid;
  gap: var(--sp-2xs);
  padding: var(--sp-sm);
  border-radius: var(--r-md);
  background: var(--hl-50);
  font-size: 15px;
}

.demo__tag {
  color: var(--hl-700);
  font-size: 13px;
  font-weight: var(--fw-bold);
}

.demo__wait {
  color: var(--text-secondary);
  font-size: 13px;
}

.demo figcaption {
  color: var(--n-600);
  font-size: 13px;
}

/* -------------------------------------------------------------- vertrauen */

.vows {
  display: grid;
  gap: var(--sp-sm);
  font-size: clamp(32px, 4.6vw, 64px);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
}

.vows li:nth-child(2) {
  color: var(--hl-200);
}

.vows li:nth-child(3) {
  color: var(--honey-300);
}

.vows__more {
  margin-top: var(--sp-lg);
  color: var(--on-dark-soft);
}

/* ------------------------------------------------------------ start, maker */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-lg);
}

@media (max-width: 799px) {
  .steps {
    grid-template-columns: 1fr;
    gap: var(--sp-md);
  }
}

.steps li {
  display: grid;
  gap: var(--sp-xs);
  align-content: start;
  padding-top: var(--sp-md);
  border-top: 2px solid var(--b-800);
}

.steps__n {
  color: var(--hl-600);
  font: 600 14px / 1 var(--font-mono);
}

.steps h3 {
  color: var(--b-800);
  font-size: 24px;
  font-weight: var(--fw-black);
}

.steps p {
  color: var(--text-secondary);
}

.maker {
  display: grid;
  gap: var(--sp-sm);
  max-width: 760px;
  margin-top: var(--sp-2xl);
}

.section .maker__title {
  font-size: clamp(26px, 2.8vw, 36px);
}

.maker p {
  max-width: var(--measure);
  color: var(--text-secondary);
  font-size: var(--fs-body-lg);
}

/* -------------------------------------------------------------------- faq */

.faq__list {
  display: grid;
  max-width: 860px;
  border-top: 1px solid var(--border-secondary);
}

.faq details {
  border-bottom: 1px solid var(--border-secondary);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-md);
  min-height: 64px;
  padding-block: var(--sp-sm);
  color: var(--b-800);
  font-size: 19px;
  font-weight: var(--fw-bold);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--hl-600);
  border-bottom: 2px solid var(--hl-600);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--med) var(--ease);
}

.faq details[open] summary::after {
  transform: translateY(3px) rotate(-135deg);
}

.faq details p {
  max-width: var(--measure);
  padding-bottom: var(--sp-md);
  color: var(--text-secondary);
}

/* ------------------------------------------------------- closing: the form */

.chapter--finale .chapter__pin {
  padding-inline: 0;
}

.chapter--finale .split {
  align-items: start;
}

.chapter--finale .split__text {
  padding-top: var(--sp-md);
}

.chapter--finale .chapter__lead {
  max-width: 44ch;
}

.direct {
  color: var(--on-dark-soft);
}

.direct a {
  color: var(--honey-300);
  text-underline-offset: 3px;
}

.form {
  display: grid;
  gap: var(--sp-md);
  padding: var(--sp-lg);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-lg);
  background: var(--glass);
  backdrop-filter: blur(14px);
}

@media (max-width: 599px) {
  .form {
    padding: var(--sp-md);
  }
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-md);
}

@media (max-width: 599px) {
  .form__row {
    grid-template-columns: 1fr;
  }
}

.field {
  display: grid;
  gap: var(--sp-xs);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field label,
.field legend {
  padding: 0;
  font-size: 15px;
  font-weight: var(--fw-bold);
}

.field__opt {
  color: var(--on-dark-faint);
  font-weight: var(--fw-regular);
}

.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: var(--r-md);
  background: var(--glass-light);
  color: var(--on-dark);
  font: inherit;
  font-size: 16px;
  transition: border-color var(--fast) var(--ease);
}

.field textarea {
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--honey-300);
  outline-offset: 0;
  border-color: transparent;
}

.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
  border-color: var(--error-on-dark);
}

.field__error {
  color: var(--error-on-dark);
  font-size: 14px;
}

.choice__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-xs);
  margin-top: var(--sp-xs);
}

.choice__options label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  min-height: 44px;
  padding: 0 var(--sp-sm);
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: var(--r-pill);
  font-weight: var(--fw-regular);
  cursor: pointer;
}

.choice__options label:has(:checked) {
  border-color: var(--honey-300);
  background: rgb(255 211 107 / 0.12);
}

.choice__options input {
  accent-color: var(--honey-300);
  width: 16px;
  height: 16px;
  margin: 0;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form .btn {
  justify-self: start;
}

.form__note {
  color: var(--on-dark-soft);
  font-size: 14px;
}

.form__note a {
  color: var(--honey-300);
}

.form__status:empty {
  display: none;
}

.form__status {
  padding: var(--sp-sm);
  border-radius: var(--r-md);
  background: rgb(255 211 107 / 0.12);
  font-size: 15px;
}

.form__status a {
  color: var(--honey-300);
  font-weight: var(--fw-bold);
  text-underline-offset: 3px;
}

/* .form sets display, which would beat the hidden attribute. */
.form[hidden] {
  display: none;
}

.form--done {
  align-content: start;
  gap: var(--sp-xs);
}

/* Focused by script so screen readers announce the thanks; it is not a control. */
.form--done:focus {
  outline: none;
}

.form--done h3 {
  font-size: 24px;
  font-weight: var(--fw-black);
}

.form--done p {
  color: var(--on-dark-soft);
}

/* ----------------------------------------------------------------- footer */

.footer {
  padding-block: var(--sp-lg);
  background: var(--night);
  color: var(--on-dark-soft);
  font-size: 14px;
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-md) var(--sp-lg);
}

@media (max-width: 699px) {
  .footer__inner {
    grid-template-columns: 1fr;
  }
}

.footer__brand {
  display: grid;
  gap: var(--sp-sm);
}

.footer__brand img {
  height: 20px;
  width: auto;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-md);
  align-items: center;
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-dark);
  text-decoration: none;
}

@media (hover: hover) {
  .footer__links a:hover {
    text-decoration: underline;
  }
}

.footer__legal {
  grid-column: 1 / -1;
  padding-top: var(--sp-md);
  border-top: 1px solid var(--line-on-dark);
}

/* ------------------------------------------- reading pages (impressum etc.) */

/* Pages without the story: white paper under a solid nav, one column at reading width. */
.page .nav {
  background: var(--night);
  box-shadow: 0 1px 0 var(--line-on-dark);
}

.page main {
  padding-top: var(--nav-h);
  background: var(--n-0);
}

.doc > * {
  max-width: var(--measure);
}

.doc h1 {
  color: var(--text-heading);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
}

.section .doc h2 {
  margin-top: var(--sp-xl);
  font-size: clamp(24px, 3vw, 30px);
}

.doc :is(p, ul, ol, dl, address, .doc__table) {
  margin-top: var(--sp-sm);
}

.doc address {
  font-style: normal;
}

.doc__lead {
  margin-top: var(--sp-md);
  color: var(--text-secondary);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}

.doc__stand {
  color: var(--text-secondary);
  font-size: 15px;
}

.doc ul:not([class]) {
  display: grid;
  gap: var(--sp-xs);
}

.doc ul:not([class]) li {
  position: relative;
  padding-left: var(--sp-md);
}

.doc ul:not([class]) li::before {
  content: '';
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 8px;
  height: 2px;
  background: var(--hl-500);
}

.doc__toc {
  margin-top: var(--sp-lg);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--r-md);
  background: var(--b-50);
}

.doc__toc ol {
  display: grid;
  margin: 0;
  padding-left: 1.4em;
  list-style: decimal;
}

.doc__toc a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

.doc__facts div {
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr);
  gap: var(--sp-sm);
  padding-block: var(--sp-xs);
  border-bottom: 1px solid var(--border-default);
}

@media (max-width: 559px) {
  .doc__facts div {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.doc__facts dt {
  color: var(--text-secondary);
}

.doc__facts dd {
  margin: 0;
}

.doc__table {
  overflow-x: auto;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.doc :is(th, td) {
  padding: var(--sp-xs) var(--sp-sm) var(--sp-xs) 0;
  border-bottom: 1px solid var(--border-default);
  text-align: left;
  vertical-align: top;
}

.doc th {
  color: var(--text-heading);
}

/* /sicherheit: the request for the security documents, on indigo below the reading column */
.request .split {
  align-items: start;
}

.request .split__text > p:not(.direct) {
  max-width: 44ch;
  color: var(--on-dark-soft);
}

.request .facts {
  color: var(--on-dark-soft);
}

.request .facts li::before {
  background: var(--hl-300);
}

.field__hint {
  color: var(--on-dark-soft);
  font-size: 14px;
}

.footer__links a[aria-current] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------------------------------------------------------------- reveals */

.can-reveal [data-rv] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 800ms var(--ease),
    transform 800ms var(--ease);
}

.can-reveal [data-rv]:nth-child(2) {
  transition-delay: 80ms;
}

.can-reveal [data-rv]:nth-child(3) {
  transition-delay: 160ms;
}

.can-reveal [data-rv]:nth-child(n + 4) {
  transition-delay: 240ms;
}

.can-reveal [data-rv].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-property: opacity, color, background-color, border-color !important;
  }
}