@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/manrope/Manrope-Variable.woff2") format("woff2");
}

:root {
  --ink: #112927;
  --ink-soft: #3d5552;
  --brand: #0f675d;
  --brand-dark: #0a4943;
  --coral: #f29b7d;
  --paper: #fffdf8;
  --desk: #eee9dc;
  --surface: var(--paper);
  --surface-tint: #e8f2ed;
  --line: #c5d4ce;
  --error: #9b250f;
  --focus: #a63f00;
  --shadow: 0 1.5rem 4rem rgb(17 41 39 / 11%);
  --radius-small: 0.7rem;
  --radius: 1.4rem;
  --radius-large: 2rem;
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --measure: 71ch;
  --shell: 78rem;
  --intro-copy-size: clamp(1.1rem, 1.7vw, 1.36rem);
  --intro-copy-line-height: 1.78;
  --marginal-copy-size: 1rem;
  --marginal-copy-line-height: 1.8;
  --text-link-color: var(--brand-dark);
  --text-link-decoration-color: var(--brand);
  --text-link-hover-background: rgb(217 239 130 / 58%);
  --text-link-hover-decoration-color: var(--brand-dark);
  --marker-hover-underline-thickness: 0.12rem;
  --evidence-badge: #e7ddc7;
  --evidence-badge-border: rgb(88 73 43 / 18%);
  --numbered-card-padding: clamp(1.25rem, 2.4vw, 2rem);
  --numbered-card-strip-height: 6.5rem;
  --numbered-card-content-gap: 1.65rem;
  --numbered-card-number-size: 3.6rem;
  --numbered-card-number-color: rgb(15 103 93 / 36%);
  --numbered-card-rule-width: calc(50% - 4.5rem);
  --numbered-card-surface: rgb(255 253 248 / 82%);
  --numbered-card-border: 1px solid var(--line);
  --numbered-card-shadow: 0 0.8rem 2.5rem rgb(17 41 39 / 5%);
  --numbered-card-strip-background:
    linear-gradient(90deg, transparent, rgb(15 103 93 / 22%)) left center /
      var(--numbered-card-rule-width) 1px no-repeat,
    linear-gradient(90deg, rgb(15 103 93 / 22%), transparent) right center /
      var(--numbered-card-rule-width) 1px no-repeat,
    linear-gradient(90deg, transparent, rgb(15 103 93 / 7%) 50%, transparent),
    rgb(255 253 248 / 42%);
  --site-header-height: 5.75rem;
  --page-orientation-height: 3.5rem;
  --sticky-content-offset:
    calc(var(--site-header-height) + var(--page-orientation-height) + 1rem);
  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--sticky-content-offset);
}

body {
  margin: 0;
  overflow-wrap: break-word;
  background:
    radial-gradient(circle at 8% 3%, rgb(217 239 130 / 23%), transparent 27rem),
    linear-gradient(160deg, #f6f2e8, var(--desk));
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.72;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--brand-dark);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

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

summary {
  list-style: none;
}

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

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  border-radius: 0.2rem;
  outline: 0.2rem solid var(--focus);
  outline-offset: 0.22rem;
}

:where(h1, h2, h3, h4, [id]) {
  scroll-margin-top: var(--sticky-content-offset);
}

#main-content:focus {
  outline: none;
}

.shell {
  width: min(calc(100% - 3rem), var(--shell));
  margin-inline: auto;
}

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

.skip-link {
  position: fixed;
  z-index: 200;
  top: 1rem;
  left: 1rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-small);
  background: var(--ink);
  color: white;
  transform: translateY(-180%);
}

.skip-link:focus {
  color: white;
  transform: translateY(0);
}
/* Header and primary navigation */

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid rgb(17 41 39 / 12%);
  background: rgb(255 253 248 / 94%);
  backdrop-filter: blur(1rem);
}

.header-inner {
  position: relative;
  display: flex;
  min-height: var(--site-header-height);
  align-items: center;
  gap: 2rem;
}

.brand {
  width: 10.8rem;
  flex: 0 0 auto;
}

.brand img {
  width: 100%;
  height: auto;
}

.nav-drawer {
  display: block;
  margin-left: auto;
}

.nav-drawer > .menu-toggle {
  display: none;
}

.nav-surface,
.primary-nav {
  display: flex;
  align-items: center;
}

.primary-nav {
  gap: clamp(0.7rem, 1.35vw, 1.35rem);
}

.primary-nav > a,
.nav-group > summary {
  position: relative;
  padding-block: 2rem;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.primary-nav > .primary-nav__contact {
  color: var(--brand);
}

.primary-nav > a::after,
.nav-group > summary::before {
  position: absolute;
  right: 0;
  bottom: 1.42rem;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--brand);
  content: "";
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.primary-nav > a:hover::after,
.primary-nav > a[aria-current="page"]::after,
.primary-nav > a[data-current-branch="true"]::after,
.nav-group[open] > summary::before,
.nav-group[data-active="true"] > summary::before,
.nav-group > summary:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

.nav-group {
  position: static;
}

.nav-caret {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin: 0 0 0.18rem 0.32rem;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  rotate: 45deg;
  transition: rotate 0.18s ease;
}

.nav-group[open] .nav-caret {
  rotate: 225deg;
}

.nav-panel {
  position: absolute;
  top: calc(100% + 1px);
  right: 0;
  display: grid;
  width: min(60rem, calc(100vw - 3rem));
  padding: 1rem;
  grid-template-columns: minmax(12rem, 0.7fr) minmax(32rem, 2fr);
  gap: 1rem;
  border: 1px solid rgb(17 41 39 / 12%);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.nav-panel__intro {
  display: flex;
  padding: 1.55rem;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 20% 10%, rgb(217 239 130 / 22%), transparent 65%),
    var(--paper);
  color: var(--ink);
}

.nav-panel__image {
  width: 100%;
  height: auto;
  margin: -0.35rem 0 0.9rem;
  object-fit: contain;
}

.nav-panel__title {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.3;
}

.nav-panel__intro > p:last-child {
  margin: 1rem 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.55;
}

.nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.nav-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nav-grid a {
  position: relative;
  display: flex;
  min-height: 7.6rem;
  padding: 1.05rem 1rem;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.18s ease, background-color 0.18s ease, translate 0.18s ease;
}

.nav-grid > a:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.nav-grid--three > a:last-child:nth-child(odd) {
  grid-column: auto;
}

.nav-grid a:hover,
.nav-grid a[aria-current="page"] {
  border-color: var(--brand);
  background: var(--surface-tint);
}

.nav-grid a:hover:not([aria-current="page"]):not([data-current-branch="true"]) {
  translate: 0 -0.12rem;
}

.nav-grid a[aria-current="page"] {
  box-shadow: inset 0 -0.22rem 0 var(--brand);
}

.nav-grid a[data-current-branch="true"] {
  border-color: var(--brand);
  background:
    linear-gradient(90deg, rgb(15 103 93 / 12%), transparent 38%),
    var(--surface);
  box-shadow: inset 0.22rem 0 0 var(--brand);
}

.nav-link__icon {
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  pointer-events: none;
}

.nav-grid--knowledge .nav-link__icon {
  width: 4.5rem;
  height: 4.5rem;
}

.nav-link__icon--kontextklar {
  top: 0.15rem;
  width: 4.5rem;
  height: 4.5rem;
}

.nav-link__icon--wide {
  top: 0.45rem;
  width: 10rem;
  height: 4rem;
}

.nav-link__icon--cost {
  top: 1.15rem;
  left: 50%;
  width: min(72%, 9rem);
  height: 9rem;
  translate: -50% 0;
}

.nav-grid strong {
  font-size: 0.95rem;
  line-height: 1.3;
}

.nav-grid small {
  margin-top: 0.25rem;
  color: var(--ink-soft);
  font-size: 0.73rem;
}

.nav-meta {
  display: none;
}
/* Page header and content */

.nav-kicker,
.eyebrow {
  margin: 0 0 0.8rem;
  color: var(--brand);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.45;
  text-transform: uppercase;
}

.breadcrumbs {
  padding-block: 1.3rem 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 620;
}

.breadcrumbs ol {
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
}

.breadcrumbs li:not(:last-child)::after {
  margin-left: 0.4rem;
  color: var(--brand);
  content: "/";
}

.breadcrumbs a {
  color: inherit;
}

/* Persistent page orientation */

.page-orientation[hidden] {
  display: none;
}

.page-orientation {
  position: fixed;
  z-index: 46;
  top: var(--site-header-height);
  right: 0;
  left: 0;
  min-height: var(--page-orientation-height);
  border-bottom: 1px solid rgb(17 41 39 / 14%);
  background: var(--paper);
  box-shadow: 0 0.65rem 1.4rem rgb(17 41 39 / 7%);
}

.page-orientation__inner {
  display: grid;
  min-height: var(--page-orientation-height);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.page-position {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 620;
}

.page-position ol {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
}

.page-position li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.4rem;
}

.page-position li:not(:first-child)::before {
  flex: 0 0 auto;
  color: var(--brand);
  content: "/";
}

.page-position a,
.page-position span {
  display: block;
  max-width: 27rem;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-position a:hover {
  color: var(--brand);
  text-decoration-thickness: var(--marker-hover-underline-thickness);
}

.page-position__root,
.page-position__ancestor {
  flex: 0 0 auto;
}

.page-position__current {
  flex: 0 1 auto;
  font-weight: 740;
}

.page-orientation__actions {
  position: relative;
  display: flex;
  align-items: stretch;
}

.page-radar {
  margin-inline-end: 0.4rem;
}

.page-orientation__control {
  display: inline-flex;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.2;
  text-decoration: none;
}

.page-orientation__control:hover,
.page-radar[open] > .page-radar__trigger,
.page-assistant-launcher[aria-expanded="true"] {
  background: var(--surface-tint);
  color: var(--brand-dark);
}

.page-assistant-launcher img {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  object-fit: contain;
}

.page-assistant-launcher[aria-expanded="true"] {
  box-shadow: inset 0 -0.16rem 0 var(--brand);
}

.page-radar__trigger {
  min-height: 2.65rem;
  margin-block: 0.4rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgb(15 103 93 / 22%);
  border-radius: 0.7rem;
  background: rgb(255 253 248 / 68%);
}

.page-radar[open] > .page-radar__trigger {
  border-color: rgb(15 103 93 / 38%);
  box-shadow: 0 0.25rem 0.75rem rgb(17 41 39 / 8%);
}

.page-radar__trigger svg {
  width: 1.18rem;
  height: 1.18rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.page-radar__label-short,
.page-to-top__short {
  display: none;
}

.page-radar__caret {
  width: 0.42rem;
  height: 0.42rem;
  margin-top: -0.2rem;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  rotate: 45deg;
}

.page-radar[open] .page-radar__caret {
  margin-top: 0.2rem;
  rotate: 225deg;
}

.page-to-top {
  visibility: hidden;
  pointer-events: none;
}

.page-to-top[data-available="true"] {
  visibility: visible;
  pointer-events: auto;
}

.page-radar__panel {
  position: fixed;
  z-index: 1;
  top: calc(var(--site-header-height) + var(--page-orientation-height) - 1px);
  right: max(1.5rem, calc((100vw - var(--shell)) / 2));
  width: min(34rem, calc(100vw - 3rem));
  max-height: calc(100vh - var(--site-header-height) - var(--page-orientation-height) - 1rem);
  max-height: calc(100dvh - var(--site-header-height) - var(--page-orientation-height) - 1rem);
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgb(17 41 39 / 16%);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--paper);
  box-shadow: 0 1.4rem 3.8rem rgb(17 41 39 / 18%);
}

.page-radar__heading {
  display: grid;
  padding: 1.25rem 1.35rem 1.15rem;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  border-bottom: 1px solid rgb(17 41 39 / 11%);
  background:
    radial-gradient(circle at 2.5rem 1rem, rgb(217 239 130 / 38%), transparent 7rem),
    linear-gradient(135deg, rgb(232 242 237 / 82%), rgb(255 253 248 / 94%));
}

.page-radar__heading-mark {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid rgb(15 103 93 / 22%);
  border-radius: 50%;
  background: rgb(255 253 248 / 82%);
  color: var(--brand-dark);
  box-shadow: 0 0.45rem 1rem rgb(17 41 39 / 8%);
}

.page-radar__heading-mark svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.page-radar__heading .eyebrow {
  margin-bottom: 0.18rem;
  font-size: 0.66rem;
}

.page-radar__panel h2 {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.25;
  text-wrap: balance;
}

.page-radar__intro {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.73rem;
  line-height: 1.45;
}

.page-radar__navigation {
  padding: 0.85rem 1.1rem 1.2rem;
}

.page-radar__tree {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-radar__tree .page-radar__tree {
  margin-left: 0.38rem;
  padding-left: 0.72rem;
  border-left: 1px solid rgb(15 103 93 / 22%);
}

.page-radar__node {
  position: relative;
  margin: 0;
}

.page-radar__node + .page-radar__node {
  margin-top: 0.08rem;
}

.page-radar__tree .page-radar__tree > .page-radar__node::before {
  position: absolute;
  top: 1.35rem;
  left: -0.72rem;
  width: 0.55rem;
  border-top: 1px solid rgb(15 103 93 / 22%);
  content: "";
}

.page-radar__node > a,
.page-radar__current {
  display: grid;
  min-height: 2.7rem;
  padding: 0.55rem 0.62rem;
  grid-template-columns: 0.62rem minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.45;
  text-decoration: none;
}

.page-radar__node-indicator {
  width: 0.58rem;
  height: 0.58rem;
  margin-top: 0.3rem;
  border: 1.5px solid rgb(17 41 39 / 34%);
  border-radius: 50%;
  background: var(--paper);
}

.page-radar__node-label,
.page-radar__node-copy {
  min-width: 0;
}

.page-radar__node--path > a {
  color: var(--brand-dark);
  font-weight: 690;
}

.page-radar__node--path > a .page-radar__node-indicator {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 0 0 0.18rem rgb(15 103 93 / 10%);
}

.page-radar__current {
  border-color: rgb(15 103 93 / 24%);
  background:
    linear-gradient(90deg, rgb(15 103 93 / 10%), transparent 82%),
    var(--surface-tint);
  font-weight: 760;
  box-shadow: inset 0.2rem 0 var(--brand);
}

.page-radar__current .page-radar__node-indicator {
  border-color: var(--brand-dark);
  background: var(--brand);
  box-shadow: 0 0 0 0.2rem rgb(15 103 93 / 13%);
}

.page-radar__current-label {
  display: block;
  margin-top: 0.12rem;
  color: var(--brand);
  font-size: 0.62rem;
  font-weight: 760;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
}

.page-hero {
  padding-block: clamp(3.7rem, 7vw, 7rem);
}

.prose {
  min-width: 0;
  max-width: var(--measure);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.sources h2,
.example-card h3 {
  color: var(--ink);
  text-wrap: balance;
}

.prose h1 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.55rem, 5.7vw, 5.3rem);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.19;
}

.page--home .prose h1 {
  font-size: clamp(3rem, 6.5vw, 6rem);
}

.detail-copy--main,
.detail-copy--main-leading,
.detail-copy--main-trailing,
.offer-detail__main,
.content-detail__lead {
  max-width: 59ch;
  color: var(--ink-soft);
  font-size: var(--intro-copy-size);
  line-height: var(--intro-copy-line-height);
}

.detail-copy--marginal,
.offer-detail__marginal,
.content-detail__marginal {
  max-width: 43ch;
  color: var(--ink-soft);
  font-size: var(--marginal-copy-size);
  line-height: var(--marginal-copy-line-height);
}

.article-content {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}

.article-content h2 {
  margin: 3.8rem 0 1rem;
  font-size: clamp(1.8rem, 3.4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.3;
}

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

.article-content h3 {
  margin: 2.7rem 0 0.75rem;
  font-size: clamp(1.28rem, 2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.35;
}

.article-content h4 {
  margin: 2rem 0 0.6rem;
  font-size: 1.12rem;
  line-height: 1.4;
}

.article-content p,
.article-content ul,
.article-content ol,
.article-content blockquote,
.article-content dl {
  max-width: var(--measure);
}

.article-content li + li {
  margin-top: 0.48rem;
}

.article-content li::marker {
  color: var(--brand);
  font-weight: 800;
}

.article-content blockquote {
  margin: 2rem 0;
  padding: 1.2rem 1.4rem;
  border-left: 0.35rem solid var(--coral);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  background: var(--surface);
  box-shadow: 0 0.5rem 1.5rem rgb(17 41 39 / 5%);
}

.article-content blockquote > :first-child {
  margin-top: 0;
}

.article-content blockquote > :last-child {
  margin-bottom: 0;
}

.article-content code {
  padding: 0.12em 0.35em;
  border: 1px solid var(--line);
  border-radius: 0.3rem;
  background: var(--surface);
  font-size: 0.88em;
}

.article-content hr {
  margin-block: 3rem;
  border: 0;
  border-top: 1px solid var(--line);
}

.article-content a[data-link-kind="external"]::after {
  margin-left: 0.2em;
  content: "↗";
  font-size: 0.75em;
}

/* Shared text-link treatment. Typography and external markers remain contextual. */

.utility-page__intro ul a {
  color: var(--text-link-color);
  text-decoration-color: var(--text-link-decoration-color);
  text-underline-offset: 0.28em;
}

.offer-detail__marginal a,
.offer-detail__main a,
.offer-detail__copy-pair a,
.offer-detail__steps a,
.offer-detail__related a,
.content-detail__lead a,
.content-detail__body a,
.content-detail__subsection-body a,
.sources a,
.home-hero__content > .detail-copy--marginal a,
.home-section__intro > .detail-copy--marginal a,
.home-card__body > p:last-child > a:only-child,
.example-card h3 a,
.contact-privacy-note a,
.contact-alternative a,
.contact-problem p a {
  padding-inline: 0.08em;
  border-radius: 0.16rem;
  color: var(--text-link-color);
  box-decoration-break: clone;
  text-decoration-color: var(--text-link-decoration-color);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.28em;
  -webkit-box-decoration-break: clone;
}

.offer-detail__marginal a:hover,
.offer-detail__main a:hover,
.offer-detail__copy-pair a:hover,
.offer-detail__steps a:hover,
.offer-detail__related a:hover,
.content-detail__lead a:hover,
.content-detail__body a:hover,
.content-detail__subsection-body a:hover,
.sources a:hover,
.home-hero__content > .detail-copy--marginal a:hover,
.home-section__intro > .detail-copy--marginal a:hover,
.home-card__body > p:last-child > a:only-child:hover,
.example-card h3 a:hover,
.contact-privacy-note a:hover,
.contact-alternative a:hover,
.contact-problem p a:hover,
.utility-page__intro ul a:hover,
.page-radar__node > a:hover {
  background: var(--text-link-hover-background);
  color: var(--text-link-color);
  text-decoration-line: underline;
  text-decoration-color: var(--text-link-hover-decoration-color);
  text-decoration-thickness: var(--marker-hover-underline-thickness);
}

.table-scroll {
  width: 100%;
  max-width: var(--measure);
  min-width: 0;
  margin-block: 2rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
}

.table-scroll:focus-visible {
  outline-offset: 0.1rem;
}

.article-content table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.55;
}

.article-content th,
.article-content td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}

.article-content th {
  background: var(--surface-tint);
  color: var(--brand-dark);
  font-weight: 750;
}

.article-content tr:last-child td {
  border-bottom: 0;
}

.button-link {
  display: inline-flex;
  min-height: 3rem;
  padding: 0.68rem 1.1rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 2px solid var(--brand-dark);
  border-radius: 999px;
  background: var(--brand-dark);
  color: white;
  font-weight: 750;
  text-decoration: none;
}

.button-link:hover {
  border-color: var(--brand);
  background: var(--brand);
  color: white;
}

/* Shared fountain-pen divider */

.home-thought-divider {
  --ink-height: 2px;
  --nib-gap: 0.34rem;

  display: flex;
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: center;
  isolation: isolate;
}

.home-thought-divider__line {
  position: relative;
  z-index: 0;
  height: var(--ink-height);
  flex: 1 1 auto;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(15 103 93 / 72%) 12%,
    var(--brand) 82%,
    var(--brand-dark)
  );
  box-shadow: 0 1px 0 rgb(17 41 39 / 8%);
  transform: rotate(-0.18deg);
  transform-origin: right center;
}

.home-thought-divider__line::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.24rem;
  height: 0.24rem;
  border-radius: 50%;
  background: var(--brand-dark);
  content: "";
  box-shadow: 0 0 0 1px rgb(17 41 39 / 7%);
  transform: translate(50%, -50%);
}

.home-thought-divider__pen {
  position: relative;
  z-index: 1;
  width: 6rem;
  aspect-ratio: 192 / 31;
  margin-left: var(--nib-gap);
  flex: 0 0 auto;
  background: url("/assets/images/erklaermarken/kontextklar-fueller-transparent.png") center / contain no-repeat;
  transform: translateY(-14.7%);
  transform-origin: left center;
}

/* Shared numbered-card chrome */

.numbered-card,
.offer-detail__steps li,
.content-detail__section--ordered .content-detail__body > ol > li {
  border: var(--numbered-card-border);
  border-radius: var(--radius);
  background: var(--numbered-card-surface);
  box-shadow: var(--numbered-card-shadow);
}

.numbered-card__strip,
.offer-detail__steps li::before,
.content-detail__section--ordered .content-detail__body > ol > li::before {
  min-height: var(--numbered-card-strip-height);
  border-bottom: 1px solid rgb(17 41 39 / 10%);
  background: var(--numbered-card-strip-background);
}

.numbered-card__index,
.offer-detail__steps li::before,
.content-detail__section--ordered .content-detail__body > ol > li::before {
  color: var(--numbered-card-number-color);
  font-size: var(--numbered-card-number-size);
  font-weight: 750;
  letter-spacing: -0.08em;
  line-height: 1;
}

.numbered-card__strip::before,
.numbered-card__strip::after {
  content: none;
}
/* Kontextklar KI helper */

.assistant-dock {
  position: relative;
  height: min(38rem, calc(100dvh - var(--site-header-height) - 2rem));
  min-height: 31rem;
  margin-block: 1rem 2rem;
  scroll-margin-top: calc(var(--site-header-height) + 1rem);
}

.assistant-dock[data-collapsed="true"] {
  height: 6.4rem;
  min-height: 0;
}

.assistant-dock[data-dock-mode="floating"] {
  height: 0;
  min-height: 0;
  margin-block: 0;
}

.assistant-dock[data-dock-mode=parked]{display:none}

.assistant-shell {
  position: relative;
  display: flex;
  width: min(100%, 64rem);
  height: 100%;
  min-height: 0;
  margin-inline: auto;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgb(17 41 39 / 16%);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1.35rem 3.5rem rgb(17 41 39 / 13%);
}

.assistant-shell[data-collapsed="true"] {
  overflow: visible;
}

.assistant-shell[data-collapsed=true]>.assistant-header{border-radius:inherit}

.assistant-dock[data-dock-mode="floating"] .assistant-shell {
  position: fixed;
  z-index: 45;
  width: min(29rem, calc(100vw - 2rem));
  height: min(40rem, calc(100dvh - var(--assistant-viewport-top, 6.75rem) - 1rem));
  min-height: min(31rem, calc(100dvh - var(--assistant-viewport-top, 6.75rem) - 1rem));
  margin: 0;
  transform-origin: top left;
  animation: assistant-floating-enter 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes assistant-floating-enter {
  from {
    opacity: 0;
    transform: translateY(0.7rem) scale(0.975);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.assistant-header {
  position: relative;
  display: flex;
  min-height: 6.4rem;
  padding: 0.85rem 1rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid rgb(17 41 39 / 11%);
  background:
    radial-gradient(circle at 5% 0%, rgb(217 239 130 / 34%), transparent 8rem),
    linear-gradient(135deg, rgb(232 242 237 / 82%), rgb(255 253 248 / 94%));
}

.assistant-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
}

.assistant-avatar {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  width: 4rem;
  height: 4rem;
  flex: 0 0 auto;
  border: 2px solid rgb(255 253 248 / 90%);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0.4rem 1rem rgb(17 41 39 / 15%);
}

.assistant-avatar:disabled { cursor: default; }
.assistant-avatar:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 4px;
}
.assistant-avatar:not(:disabled):hover {
  box-shadow: 0 0 0 3px rgb(15 103 93 / 18%), 0 0.4rem 1rem rgb(17 41 39 / 15%);
}
.assistant-avatar > img,
.assistant-mascot-wave-art {
  display: block;
  width: 100%;
  height: 100%;
}
.assistant-mascot-wave-art {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.assistant-avatar[data-artwork-ready="true"][data-motion="wave"] .assistant-mascot-wave-art,
.assistant-avatar[data-artwork-ready="true"][data-motion="greet"] .assistant-mascot-wave-art { opacity: 1; }
.assistant-mascot-hand {
  transform-box: view-box;
  transform-origin: 17.96875% 51.40625%;
}
.assistant-avatar[data-motion="wave"] .assistant-mascot-hand {
  animation: assistant-mascot-wave 1.6s ease-in-out both;
}
.assistant-mascot-sparkle {
  position: absolute;
  top: 21%;
  right: 27%;
  width: 24%;
  height: 24%;
  fill: #fff6ba;
  stroke: #93652c;
  stroke-width: 0.6;
  opacity: 0;
  pointer-events: none;
}
.assistant-avatar[data-motion="idle"] .assistant-mascot-sparkle {
  animation: assistant-mascot-sparkle 1.1s ease-in-out both;
}
@keyframes assistant-mascot-wave {
  0%, 100% { transform: rotate(0deg); }
  22%, 62% { transform: rotate(-6deg); }
  42%, 80% { transform: rotate(2deg); }
}
@keyframes assistant-mascot-sparkle {
  0%, 100% { opacity: 0; transform: scale(0.65); }
  45% { opacity: 1; transform: scale(1); }
}

.assistant-identity > div {
  min-width: 0;
}

.assistant-identity p {
  margin: 0 0 0.1rem;
  color: var(--brand);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.assistant-identity h2 {
  margin: 0;
  overflow: hidden;
  font-size: 0.96rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-title-short {
  display: none;
}

.assistant-source-state {
  display: inline-flex;
  margin-top: 0.25rem;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.64rem;
  line-height: 1.3;
}

.assistant-source-state i {
  width: 0.42rem;
  height: 0.42rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0.18rem rgb(15 103 93 / 11%);
}

.assistant-controls {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.3rem;
}

.assistant-shell[data-view-mode="floating"] .assistant-identity p,
.assistant-shell[data-view-mode="floating"] .assistant-source-state {
  display: none;
}

.assistant-shell[data-view-mode="floating"] .assistant-identity {
  flex: 1 1 auto;
  gap: 0.5rem;
}

.assistant-shell[data-view-mode="floating"] .assistant-avatar {
  display: block;
  width: 3rem;
  height: 3rem;
}

.assistant-shell[data-view-mode="floating"] .assistant-identity h2 {
  font-size: 0.78rem;
}

.assistant-shell[data-view-mode="floating"] .assistant-title-short {
  display: inline;
}

.assistant-shell[data-view-mode="floating"] .assistant-title-full {
  display: none;
}

.assistant-icon-button,
.assistant-settings > summary {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(17 41 39 / 16%);
  border-radius: 0.6rem;
  background: rgb(255 253 248 / 74%);
  color: var(--ink);
  box-shadow: 0 0.18rem 0.5rem rgb(17 41 39 / 5%);
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.assistant-icon-button:hover,
.assistant-settings > summary:hover {
  border-color: rgb(15 103 93 / 44%);
  background: var(--surface-tint);
  color: var(--brand-dark);
  box-shadow: 0 0.3rem 0.7rem rgb(17 41 39 / 9%);
}

.assistant-icon-button:focus-visible,
.assistant-settings > summary:focus-visible {
  border-color: var(--brand);
  outline: 0.18rem solid rgb(15 103 93 / 20%);
  outline-offset: 0.1rem;
}

.assistant-icon-button svg,
.assistant-settings > summary svg {
  width: 1.3rem;
  height: 1.3rem;
  overflow: visible;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

[data-assistant-action="collapse"] svg {
  width: 1.45rem;
  height: 1.45rem;
  stroke-width: 2.25;
}

.assistant-drag-handle {
  cursor: grab;
  touch-action: none;
}

.assistant-shell[data-view-mode="floating"] .assistant-drag-handle,
.assistant-shell[data-view-mode="parked"] .assistant-drag-handle,
.assistant-shell[data-collapsed="true"] [data-assistant-action="collapse"],
.assistant-settings[open] > summary {
  border-color: rgb(15 103 93 / 42%);
  background: rgb(232 242 237 / 92%);
  color: var(--brand-dark);
}

body.assistant-dragging {
  cursor: grabbing;
  user-select: none;
}

.assistant-settings {
  position: static;
}

.assistant-settings > summary {
  list-style: none;
}

.assistant-settings > summary::-webkit-details-marker {
  display: none;
}

.assistant-settings > summary svg circle {
  fill: currentcolor;
  stroke: none;
}

.assistant-settings__panel {
  position: absolute;
  z-index: 4;
  top: calc(100% + 0.4rem);
  right: 0;
  width: 16rem;
  padding: 0.42rem;
  border: 1px solid rgb(17 41 39 / 14%);
  border-radius: var(--radius-small);
  background: var(--surface);
  box-shadow: 0 0.9rem 2rem rgb(17 41 39 / 16%);
}

.assistant-settings__panel button {
  display: block;
  width: 100%;
  min-height: 2.55rem;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 650;
  text-align: left;
}

.assistant-settings__panel button[hidden],
.assistant-suggestions[hidden],
.assistant-icon-button[hidden] {
  display: none;
}

.assistant-settings__panel button:hover {
  background: var(--surface-tint);
}

.assistant-content {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.assistant-chat-view {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.assistant-chat-view[hidden],
.assistant-help[hidden] {
  display: none;
}

.assistant-help {
  min-height: 0;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  overflow-y: auto;
  flex: 1 1 auto;
  background:
    radial-gradient(circle at 100% 0%, rgb(217 239 130 / 22%), transparent 14rem),
    var(--surface);
  color: var(--ink);
}

.assistant-help__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.assistant-help__header p,
.assistant-help__header h3,
.assistant-help h4,
.assistant-help__privacy {
  margin: 0;
}

.assistant-help__header p {
  color: var(--brand);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.assistant-help__header h3 {
  margin-top: 0.16rem;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.assistant-help__header h3:focus {
  outline: 0;
}

.assistant-help__close {
  flex: 0 0 auto;
}

.assistant-help__steps {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: assistant-help-step;
}

.assistant-help__steps li {
  display: grid;
  padding-block: 0.7rem;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: 0.65rem;
  border-top: 1px solid var(--line);
  counter-increment: assistant-help-step;
  font-size: 0.78rem;
  line-height: 1.55;
}

.assistant-help__steps li::before {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--brand-dark);
  content: counter(assistant-help-step);
  font-size: 0.68rem;
  font-weight: 780;
}

.assistant-help h4 {
  margin-top: 1rem;
  font-size: 0.84rem;
}

.assistant-help__controls {
  display: grid;
  margin: 0.55rem 0 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.assistant-help__controls li {
  display: grid;
  min-width: 0;
  padding-block: 0.65rem;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  border-top: 1px solid var(--line);
  font-size: 0.74rem;
  line-height: 1.5;
}

.assistant-help__controls svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.08rem;
  fill: none;
  stroke: var(--brand-dark);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.assistant-shell[data-view-mode="floating"] .assistant-help__controls {
  grid-template-columns: 1fr;
}

.assistant-help__states {
  margin: 0.55rem 0 0;
}

.assistant-help__states div {
  display: grid;
  padding-block: 0.6rem;
  grid-template-columns: minmax(7rem, 0.4fr) minmax(0, 1fr);
  gap: 0.65rem;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  line-height: 1.5;
}

.assistant-help__states dt {
  font-weight: 750;
}

.assistant-help__states dd {
  margin: 0;
  color: var(--ink-soft);
}

.assistant-guide-control {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.assistant-guide-control__icon {
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgb(15 103 93 / 20%);
  border-radius: 0.55rem;
  background: var(--surface-tint);
  color: var(--brand-dark);
}

.assistant-guide-control__icon svg,
.assistant-guide-control__icon img {
  width: 1.2rem;
  height: 1.2rem;
}

.assistant-guide-control__icon svg {
  overflow: visible;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.assistant-guide-control__icon svg circle {
  fill: currentcolor;
  stroke: none;
}

.assistant-help__privacy {
  margin-top: 0.85rem;
  color: var(--ink-soft);
  font-size: 0.7rem;
  line-height: 1.55;
}

.assistant-help__actions {
  display: flex;
  margin-top: 1rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.assistant-help__actions button {
  min-height: 2.55rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--brand);
  border-radius: var(--radius-small);
  background: var(--brand);
  color: white;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 740;
}

.assistant-help__actions button:hover {
  background: var(--brand-dark);
}

.assistant-help__actions a,
.assistant-noscript a {
  color: var(--text-link-color);
  font-size: 0.74rem;
  font-weight: 680;
  text-decoration-color: var(--text-link-decoration-color);
}

.assistant-help__actions a:hover,
.assistant-noscript a:hover {
  background: var(--text-link-hover-background);
  color: var(--brand-dark);
  text-decoration-color: var(--text-link-hover-decoration-color);
  text-decoration-thickness: var(--marker-hover-underline-thickness);
}

.assistant-mode {
  display: flex;
  min-height: 2.35rem;
  padding: 0.55rem 1rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgb(17 41 39 / 9%);
  background: rgb(232 242 237 / 46%);
  color: var(--ink-soft);
  font-size: 0.68rem;
  line-height: 1.35;
}

.assistant-mode strong {
  color: var(--brand-dark);
  font-weight: 750;
}

.assistant-conversation {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  scroll-behavior: smooth;
}

.assistant-messages {
  display: flex;
  min-height: 8rem;
  padding: 1.15rem clamp(0.8rem, 2.5vw, 1.5rem) 0.65rem;
  flex-direction: column;
  gap: 0.9rem;
}

.assistant-message {
  display: flex;
  width: min(100%, 44rem);
  align-items: flex-start;
  gap: 0.55rem;
}

.assistant-message--user {
  margin-left: auto;
  justify-content: flex-end;
}

.assistant-message__mark {
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-tint);
}

.assistant-message__mark img {
  width: 1.2rem;
  height: 1.2rem;
}

.assistant-message__mark--user {
  border: 1px solid rgb(15 103 93 / 20%);
  background: rgb(232 242 237 / 78%);
  color: var(--brand-dark);
}

.assistant-message__mark--user svg {
  width: 1.12rem;
  height: 1.12rem;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.assistant-message__bubble {
  max-width: min(100%, 38rem);
  padding: 0.75rem 0.9rem;
  border: 1px solid rgb(17 41 39 / 12%);
  border-radius: 0.95rem;
  background: rgb(255 253 248 / 92%);
  box-shadow: 0 0.45rem 1.25rem rgb(17 41 39 / 5%);
}

.assistant-message--pending .assistant-message__bubble {
  color: var(--ink-soft);
  opacity: 0.82;
}

.assistant-message--user .assistant-message__bubble {
  border-color: rgb(15 103 93 / 20%);
  background: rgb(232 242 237 / 68%);
}

.assistant-message__label,
.assistant-message__text,
.assistant-message__sources > p,
.assistant-message__suggestions > p {
  margin: 0;
}

.assistant-message__label {
  margin-bottom: 0.25rem;
  color: var(--brand);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.assistant-message__text {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.assistant-message__sources {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}

.assistant-message__sources > p {
  color: var(--ink-soft);
  font-size: 0.65rem;
  font-weight: 720;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.assistant-message__sources ul {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}

.assistant-message__sources li + li {
  margin-top: 0.3rem;
}

.assistant-message__sources a,
.assistant-message__handoff {
  color: var(--text-link-color);
  font-size: 0.75rem;
  font-weight: 680;
  text-decoration-color: var(--text-link-decoration-color);
}

.assistant-message__sources a:hover,
.assistant-message__handoff:hover {
  background: var(--text-link-hover-background);
  color: var(--brand-dark);
  text-decoration-color: var(--text-link-hover-decoration-color);
  text-decoration-thickness: var(--marker-hover-underline-thickness);
}

.assistant-message__suggestions {
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}

.assistant-message__suggestions > p {
  color: var(--ink-soft);
  font-size: 0.65rem;
  font-weight: 720;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.assistant-message__suggestions ul {
  display: flex;
  margin: 0.45rem 0 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
}

.assistant-message__suggestions li {
  display: flex;
  max-width: 100%;
}

.assistant-message__handoff {
  display: inline-block;
  margin-top: 0.7rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration-line: underline;
  text-underline-offset: 0.18em;
}

.assistant-suggestions {
  display: flex;
  max-width: 100%;
  padding: 0.25rem 1rem 1rem;
  overflow-x: auto;
  gap: 0.45rem;
}

.assistant-suggestions button,
.assistant-message__suggestions button {
  min-height: 2.35rem;
  padding: 0.45rem 0.7rem;
  flex: 0 0 auto;
  border: 1px solid rgb(15 103 93 / 22%);
  border-radius: 999px;
  background: rgb(232 242 237 / 58%);
  color: var(--brand-dark);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 680;
  line-height: 1.4;
  text-align: left;
}

.assistant-message__suggestions button {
  max-width: 100%;
  white-space: normal;
}

.assistant-suggestions button:hover,
.assistant-message__suggestions button:hover {
  border-color: var(--brand);
  background: rgb(217 239 130 / 35%);
}

.assistant-suggestions button:disabled,
.assistant-message__suggestions button:disabled,
.assistant-composer button:disabled,
.assistant-marker:disabled {
  cursor: wait;
  opacity: 0.55;
}

.assistant-consent {
  margin: 0.25rem 1rem 1rem;
  padding: 1rem;
  border: 1px solid rgb(15 103 93 / 28%);
  border-radius: var(--radius-small);
  background: var(--surface-tint);
}

.assistant-consent__kicker,
.assistant-consent h3,
.assistant-consent > p {
  margin: 0;
}

.assistant-consent__kicker {
  color: var(--brand);
  font-size: 0.63rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.assistant-consent h3 {
  margin-top: 0.18rem;
  font-size: 1rem;
}

.assistant-consent > p:not(.assistant-consent__kicker) {
  margin-top: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
  line-height: 1.55;
}

.assistant-consent label {
  display: grid;
  margin-top: 0.75rem;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.55rem;
  color: var(--ink);
  font-size: 0.72rem;
  line-height: 1.5;
}

.assistant-consent input {
  width: 1rem;
  height: 1rem;
  margin: 0.2rem 0 0;
  accent-color: var(--brand);
}

.assistant-consent__links {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.assistant-consent__links a,
.assistant-consent__links button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-link-color);
  cursor: pointer;
  font-size: 0.7rem;
  text-decoration: underline;
  text-decoration-color: var(--text-link-decoration-color);
  text-underline-offset: 0.18em;
}

.assistant-consent__submit {
  min-height: 2.65rem;
  margin-top: 0.75rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--brand);
  border-radius: var(--radius-small);
  background: var(--brand);
  color: white;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 750;
}

.assistant-composer {
  padding: 0.75rem 1rem 1rem;
  flex: 0 0 auto;
  border-top: 1px solid rgb(17 41 39 / 10%);
  background: rgb(255 253 248 / 95%);
}

.assistant-composer > label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 720;
}

.assistant-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.45rem;
  border: 1px solid rgb(17 41 39 / 23%);
  border-radius: 0.85rem;
  background: white;
}

.assistant-input-wrap:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.18rem rgb(15 103 93 / 10%);
}

.assistant-input-wrap textarea {
  width: 100%;
  min-height: 3.4rem;
  max-height: 8rem;
  padding: 0.7rem 0 0.7rem 0.8rem;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.5;
}

.assistant-send {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  margin: 0 0.42rem 0.42rem 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 0.7rem;
  background: var(--brand);
  color: white;
  cursor: pointer;
}

.assistant-send:hover {
  background: var(--brand-dark);
}

.assistant-send svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.assistant-input-meta {
  display: flex;
  margin-top: 0.4rem;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.62rem;
  line-height: 1.45;
}

.assistant-input-meta p,
.assistant-input-error {
  margin: 0;
}

.assistant-input-meta span {
  flex: 0 0 auto;
}

.assistant-input-error {
  min-height: 1.2em;
  margin-top: 0.3rem;
  color: var(--error);
  font-size: 0.7rem;
  font-weight: 650;
}

.assistant-noscript {
  margin: 0;
  padding: 0.75rem 1rem;
  color: var(--ink-soft);
  font-size: 0.75rem;
}

.assistant-dock[data-collapsed="true"] .assistant-content {
  display: none;
}

.assistant-dock[data-collapsed="true"] .assistant-shell {
  height: 6.4rem;
  min-height: 0;
}

.assistant-dialog {
  width: min(72rem, calc(100vw - 2rem));
  height: min(48rem, calc(100dvh - 2rem));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.assistant-dialog::backdrop {
  background: rgb(17 41 39 / 48%);
  backdrop-filter: blur(0.2rem);
}

.assistant-dialog [data-assistant-dialog-mount],
.assistant-dialog .assistant-shell {
  width: 100%;
  height: 100%;
}

.assistant-dialog .assistant-shell {
  max-width: none;
}

.assistant-dialog .assistant-drag-handle {
  display: none;
}

.assistant-dialog [data-assistant-action="collapse"],
.assistant-dialog [data-assistant-action="toggle-collapse"] {
  display: none;
}

.assistant-term-popover {
  position: fixed;
  z-index: 60;
  inset: auto;
  top: var(--assistant-term-top, calc(var(--site-header-height) + 1rem));
  left: var(--assistant-term-left, 1rem);
  display: none;
  width: min(27rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  margin: 0;
  padding: 1rem 1rem 1rem 0.8rem;
  overflow: auto;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  align-items: start;
  gap: 0.85rem;
  border: 1px solid rgb(17 41 39 / 22%);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 7% 7%, rgb(217 239 130 / 22%), transparent 8rem),
    var(--surface);
  color: var(--ink);
  box-shadow: 0 1.2rem 3rem rgb(17 41 39 / 22%);
}

.assistant-term-popover.is-open {
  display: grid;
  transform-origin: top left;
  animation: assistant-term-popover-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes assistant-term-popover-enter {
  from {
    opacity: 0;
    transform: translateY(0.45rem) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.assistant-term-popover::backdrop {
  background: transparent;
}

.assistant-term-popover__close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.assistant-term-popover__close:hover {
  border-color: rgb(15 103 93 / 24%);
  background: var(--surface-tint);
  color: var(--brand-dark);
}

.assistant-term-popover__close:focus-visible,
.assistant-term-popover__actions a:focus-visible,
.assistant-term-popover__actions button:focus-visible {
  outline: 0.18rem solid rgb(15 103 93 / 22%);
  outline-offset: 0.12rem;
}

.assistant-term-popover__close svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.assistant-term-popover__visual {
  display: grid;
  width: 5.25rem;
  height: 5.25rem;
  margin-top: 0.15rem;
  place-items: center;
  border-radius: 50%;
  background: rgb(232 242 237 / 72%);
}

.assistant-term-popover__visual img {
  width: 4.65rem;
  height: 4.65rem;
  object-fit: contain;
}

.assistant-term-popover__content {
  min-width: 0;
  padding-right: 1.7rem;
}

main p a[data-assistant-term-link]::after {
  --assistant-term-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.5 2.75c.75 3.9 2.35 5.5 6.25 6.25-3.9.75-5.5 2.35-6.25 6.25C10.75 11.35 9.15 9.75 5.25 9c3.9-.75 5.5-2.35 6.25-6.25Z'/%3E%3Cpath d='M18.25 14.5c.35 1.85 1.15 2.65 3 3-1.85.35-2.65 1.15-3 3-.35-1.85-1.15-2.65-3-3 1.85-.35 2.65-1.15 3-3Z'/%3E%3C/svg%3E");

  display: inline-block;
  width: 0.82em;
  height: 0.82em;
  margin-inline-start: 0;
  background: currentcolor;
  content: "";
  -webkit-mask: var(--assistant-term-icon) center / contain no-repeat;
  mask: var(--assistant-term-icon) center / contain no-repeat;
  vertical-align: 0.15em;
}

.assistant-term-popover__kicker,
.assistant-term-popover h2 {
  margin: 0;
}

.assistant-term-popover__kicker {
  color: var(--brand);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.assistant-term-popover h2 {
  margin-top: 0.14rem;
  padding-right: 0.5rem;
  font-size: 1rem;
  line-height: 1.35;
}

.assistant-term-popover__actions {
  display: flex;
  margin-top: 0.8rem;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.55rem;
}

.assistant-term-popover__actions a,
.assistant-term-popover__actions button {
  display: inline-flex;
  padding: 0;
  align-items: center;
  gap: 0.38rem;
  border: 0;
  background: transparent;
  color: var(--text-link-color);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 680;
  line-height: 1.45;
  text-decoration-line: underline;
  text-decoration-color: var(--text-link-decoration-color);
  text-underline-offset: 0.18em;
}

.assistant-term-popover__actions a:hover,
.assistant-term-popover__actions button:hover {
  background: var(--text-link-hover-background);
  color: var(--brand-dark);
  text-decoration-color: var(--text-link-hover-decoration-color);
  text-decoration-thickness: var(--marker-hover-underline-thickness);
}

.assistant-term-popover__actions button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.assistant-marker {
  display: grid;
  width: min(100%, 45rem);
  min-height: 4.75rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0.55rem 0.85rem 0.55rem 0.5rem;
  grid-template-columns: 3.65rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgb(15 103 93 / 22%);
  border-radius: var(--radius-small);
  background: rgb(232 242 237 / 55%);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, translate 0.18s ease;
}

.assistant-marker:hover {
  border-color: var(--brand);
  box-shadow: 0 0.8rem 1.8rem rgb(17 41 39 / 8%);
  translate: 0 -0.1rem;
}

.assistant-marker img {
  width: 3.65rem;
  height: 3.65rem;
  border-radius: 50%;
  object-fit: cover;
}

.assistant-marker > span:not(.assistant-marker__action) {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.assistant-marker small {
  color: var(--brand);
  font-size: 0.63rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.assistant-marker strong {
  margin-top: 0.12rem;
  font-size: 0.86rem;
  line-height: 1.4;
}

.assistant-marker__action {
  color: var(--brand-dark);
  font-size: 0.68rem;
  font-weight: 720;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

@media (max-width: 44rem) {
  .assistant-dock {
    width: min(calc(100% - 1rem), var(--shell));
    height: min(36rem, calc(100dvh - var(--site-header-height) - 1rem));
    min-height: 29rem;
    margin-block: 0.5rem 1.5rem;
  }

  .assistant-dock[data-collapsed="true"] {
    height: 5.5rem;
  }

  .assistant-dock[data-collapsed="true"] .assistant-shell {
    height: 5.5rem;
  }

  .assistant-shell,
  .assistant-header {
    border-radius: 1rem;
  }

  .assistant-header {
    min-height: 5.5rem;
    padding: 0.65rem;
  }

  .assistant-avatar {
    width: 3.45rem;
    height: 3.45rem;
  }

  .assistant-identity h2 {
    font-size: 0.82rem;
  }

  .assistant-source-state {
    display: none;
  }

  .assistant-icon-button,
  .assistant-settings > summary {
    width: 2.4rem;
    height: 2.4rem;
  }

  .assistant-mode span {
    display: none;
  }

  .assistant-help__controls {
    grid-template-columns: 1fr;
  }

  .assistant-dialog {
    width: calc(100vw - 0.75rem);
    height: calc(100dvh - 0.75rem);
  }

  .assistant-term-popover {
    inset: auto 0.5rem 0.5rem;
    width: auto;
    max-height: min(26rem, calc(100dvh - 1rem));
  }

  .assistant-marker {
    grid-template-columns: 3.25rem minmax(0, 1fr);
  }

  .assistant-marker img {
    width: 3.25rem;
    height: 3.25rem;
  }

  .assistant-marker__action {
    display: none;
  }
}

@media (max-width: 32rem) {
  .assistant-shell[data-view-mode="floating"] .assistant-header {
    gap: 0.4rem;
  }

  .assistant-shell[data-view-mode="floating"] .assistant-identity {
    gap: 0.4rem;
  }

  .assistant-shell[data-view-mode="floating"] .assistant-avatar {
    width: 2.75rem;
    height: 2.75rem;
  }

  .assistant-shell[data-view-mode="floating"] .assistant-identity h2 {
    font-size: 0.72rem;
  }

  .assistant-shell[data-view-mode="floating"] .assistant-controls {
    gap: 0.18rem;
  }

  .assistant-shell[data-view-mode="floating"] .assistant-icon-button,
  .assistant-shell[data-view-mode="floating"] .assistant-settings > summary {
    width: 2.15rem;
    height: 2.15rem;
  }
}

/* Keep identity and controls on separate rows throughout narrow phone widths. */
@media (max-width: 32rem) {
  .assistant-avatar,
  .assistant-shell[data-view-mode="floating"] .assistant-avatar {
    width: 2.75rem;
    height: 2.75rem;
  }

  .assistant-header {
    min-height: 6.75rem;
    flex-wrap: wrap;
    align-content: center;
    gap: 0.3rem;
  }

  .assistant-identity,
  .assistant-controls { width: 100%; }
  .assistant-controls { justify-content: space-between; }
  .assistant-title-short { display: inline; }
  .assistant-title-full { display: none; }

  .assistant-dock[data-collapsed="true"],
  .assistant-dock[data-collapsed="true"] .assistant-shell { height: 6.75rem; }

  .assistant-identity p {
    display: none;
  }

  .assistant-controls {
    gap: 0.18rem;
  }

  .assistant-icon-button,
  .assistant-settings > summary {
    width: 2.05rem;
    height: 2.05rem;
  }

  .assistant-icon-button svg,
  .assistant-settings > summary svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  [data-assistant-action="collapse"] svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .assistant-shell[data-view-mode="floating"] .assistant-header {
    min-height: 6.5rem;
    flex-wrap: wrap;
    align-content: center;
    gap: 0.3rem;
  }

  .assistant-shell[data-view-mode="floating"] .assistant-identity,
  .assistant-shell[data-view-mode="floating"] .assistant-controls {
    width: 100%;
  }

  .assistant-shell[data-view-mode="floating"] .assistant-identity {
    flex: 0 0 100%;
  }

  .assistant-shell[data-view-mode="floating"] .assistant-avatar {
    width: 2.75rem;
    height: 2.75rem;
  }

  .assistant-shell[data-view-mode="floating"] .assistant-controls {
    justify-content: space-between;
  }

  .assistant-shell[data-view-mode="floating"] .assistant-suggestions {
    overflow-x: visible;
    flex-wrap: wrap;
  }

  .assistant-shell[data-view-mode="floating"] .assistant-suggestions button {
    max-width: 100%;
    white-space: normal;
  }

  .assistant-dock[data-dock-mode="floating"][data-collapsed="true"] .assistant-shell {
    height: 6.5rem;
  }

  .assistant-settings__panel {
    width: min(16rem, calc(100vw - 2rem));
  }

  .assistant-suggestions {
    padding-inline: 0.65rem;
  }

  .assistant-composer,
  .assistant-consent {
    margin-inline: 0.65rem;
    padding-inline: 0.65rem;
  }

  .assistant-term-popover {
    padding: 0.8rem;
    grid-template-columns: 4.15rem minmax(0, 1fr);
    gap: 0.65rem;
  }

  .assistant-term-popover__visual {
    width: 4.15rem;
    height: 4.15rem;
  }

  .assistant-term-popover__visual img {
    width: 3.7rem;
    height: 3.7rem;
  }

  .assistant-term-popover__content {
    padding-right: 1.45rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  .assistant-avatar[data-motion] .assistant-mascot-hand,
  .assistant-avatar[data-motion] .assistant-mascot-sparkle { animation: none; transition: none; }

  .assistant-conversation {
    scroll-behavior: auto;
  }

  .assistant-term-popover.is-open {
    animation: none;
  }

  .assistant-dock[data-dock-mode="floating"] .assistant-shell {
    animation: none;
  }

  .assistant-marker {
    transition: none;
  }
}
/* Illustrations */

.explainer-figure {
  margin: 0;
}

.explainer-figure a,
.explainer-figure>div {
  display: block;
  overflow: hidden;
  border: 1px solid rgb(17 41 39 / 13%);
  border-radius: var(--radius);
  background: #f5f0e3;
  box-shadow: var(--shadow);
}

.explainer-figure img {
  width: 100%;
  height: auto;
}

.explainer-figure figcaption {
  max-width: 68ch;
  margin: 0.8rem 0 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.55;
}

.explainer-figure--article {
  width: 100%;
}

.explainer-figure--article a {
  width: 100%;
}

.explainer-figure--article figcaption {
  max-width: var(--measure);
}

.content-detail__section-illustration{grid-column:1/-1;width:100%;margin:0 0 clamp(1.75rem,4vw,3rem)}
.explainer-figure--section figcaption{max-width:var(--measure)}

/* KK-011: an ink-drawn visitor, behind navigation and the knowledge helper. */
.bumblebee {
  position: fixed;
  inset: 0;
  z-index: 42;
  pointer-events: none;
}

.bumblebee[data-space="compact"] {
  --bee-scale: .7;
  --bee-wing-time: 125ms;
}

.bumblebee__target {
  position: fixed;
  top: 0;
  left: 0;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.bumblebee [hidden],
.bumblebee[data-state="hidden"] .bumblebee__target {
  display: none;
}

.bumblebee__art {
  width: 48px;
  height: 40px;
  overflow: visible;
  pointer-events: none;
  transform: scale(var(--bee-scale, 1)) scaleX(var(--bee-facing, 1)) rotate(var(--bee-tilt, 0deg));
  transform-origin: 50% 57%;
}

.bumblebee__pose {
  transform-origin: 62px 54px;
}

.bumblebee__wing {
  transform-origin: 65px 48px;
}

.bumblebee:is([data-state="entering"], [data-state="relocating"], [data-state="evading"], [data-state="stinging"], [data-state="leaving"]) .bumblebee__target {
  pointer-events: none;
}

.bumblebee[data-passive="true"] .bumblebee__target {
  pointer-events: none;
}

.bumblebee__legs {
  transform-origin: 64px 58px;
}

.bumblebee__surprise {
  opacity: 0;
}

.bumblebee:is([data-state="entering"], [data-state="relocating"], [data-state="evading"], [data-state="stinging"], [data-state="leaving"]) .bumblebee__wing--near {
  animation: bumblebee-wing-near var(--bee-wing-time, 92ms) ease-in-out infinite alternate;
}

.bumblebee:is([data-state="entering"], [data-state="relocating"], [data-state="evading"], [data-state="stinging"], [data-state="leaving"]) .bumblebee__wing--far {
  animation: bumblebee-wing-far var(--bee-wing-time, 92ms) ease-in-out infinite alternate-reverse;
}

.bumblebee:is([data-state="entering"], [data-state="relocating"], [data-state="evading"], [data-state="stinging"], [data-state="leaving"]) .bumblebee__legs {
  transform: rotate(-11deg) scaleY(.83);
}

.bumblebee[data-state="perched"] .bumblebee__wing--near,
.bumblebee[data-state="static"] .bumblebee__wing--near {
  transform: rotate(-47deg) scaleY(.68);
}

.bumblebee[data-state="perched"] .bumblebee__wing--far,
.bumblebee[data-state="static"] .bumblebee__wing--far {
  transform: rotate(-64deg) scaleY(.78);
}

.bumblebee:is([data-state="startled"], [data-state="relocating"]) .bumblebee__pose {
  animation: bumblebee-flinch 420ms ease-out both;
}

.bumblebee:is([data-state="startled"], [data-state="relocating"]) .bumblebee__surprise {
  animation: bumblebee-surprise 420ms ease-out both;
}

.bumblebee[data-state="startled"] .bumblebee__antennae {
  transform: rotate(9deg);
  transform-origin: 90px 42px;
}

.bumblebee[data-state="perched"] .bumblebee__pose {
  animation: bumblebee-settle 380ms ease-out both;
}

.bumblebee-controls {
  position: fixed;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: max(12px, env(safe-area-inset-left));
  pointer-events: auto;
  font-size: .78rem;
  line-height: 1.55;
}

.bumblebee-controls__summary {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: .45rem;
  padding: .35rem .65rem;
  border: 1px solid rgb(17 41 39 / 17%);
  border-radius: .55rem;
  background: var(--paper);
  color: var(--ink-soft);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.bumblebee-controls__summary::-webkit-details-marker {
  display: none;
}

.bumblebee-controls__summary:hover,
.bumblebee-controls[open] .bumblebee-controls__summary {
  border-color: var(--brand);
  color: var(--brand-dark);
}

.bumblebee-controls__panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: min(310px, calc(100vw - 24px));
  max-height: min(650px, calc(100dvh - var(--site-header-height) - 80px - env(safe-area-inset-bottom)));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--paper);
  box-shadow: 0 .5rem 2rem rgb(17 41 39 / 10%);
  color: var(--ink);
}

.bumblebee-controls__title {
  margin: 0 0 .25rem;
  font-size: .95rem;
  font-weight: 700;
}

.bumblebee-controls__description {
  margin: 0 0 .6rem;
  color: var(--ink-soft);
}

.bumblebee-controls__current {
  min-height: 2.8em;
  margin: .4rem 0 .6rem;
  color: var(--ink-soft);
  font-size: .78rem;
  line-height: 1.4;
}

.bumblebee-controls__diagnostics {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}

.bumblebee-controls__diagnostics :is(textarea, pre) {
  width: 100%;
  max-width: 100%;
  min-height: 10rem;
  overflow: auto;
  font: .7rem/1.4 monospace;
}

.bumblebee-controls__diagnostics button {
  min-height: 44px;
  max-width: 100%;
  padding: .55rem .75rem;
  border: 1px solid var(--brand);
  border-radius: .45rem;
  background: var(--paper);
  color: var(--brand-dark);
  font: inherit;
  cursor: pointer;
}

.bumblebee-controls__diagnostics button:hover {
  background: var(--text-link-hover-background);
}

.bumblebee-controls__character {
  min-width: 0;
  margin: .85rem 0 .4rem;
  padding: .45rem 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.bumblebee-controls__character legend {
  padding: 0 .4rem 0 0;
  color: var(--ink-soft);
  font-weight: 700;
}

.bumblebee-controls__character label {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-weight: 600;
}

.bumblebee-controls__character output {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.bumblebee-controls__character input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  margin: 0;
  accent-color: var(--brand-dark);
  cursor: pointer;
}

.bumblebee-controls__character p {
  margin: 0 0 .65rem;
  color: var(--ink-soft);
  font-size: .73rem;
  line-height: 1.4;
}

.bumblebee-controls__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.bumblebee-controls__actions button,
.bumblebee-controls__motion {
  min-height: 40px;
  padding: .5rem 0;
  border: 0;
  border-bottom: 1px solid rgb(17 41 39 / 10%);
  border-radius: 0;
  background: transparent;
  color: var(--brand-dark);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-underline-offset: .2em;
  cursor: pointer;
}

.bumblebee-controls__actions button:hover,
.bumblebee-controls__motion:hover {
  background: var(--text-link-hover-background);
}

.bumblebee-controls__motion {
  width: 100%;
  margin-top: .4rem;
  border-bottom: 0;
  color: var(--ink-soft);
  text-decoration: none;
}

.bumblebee-controls :is(button, summary, input):focus-visible,
.bumblebee__target:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.bumblebee-controls button:disabled {
  color: var(--ink-soft);
  text-decoration: none;
  cursor: default;
  opacity: .65;
}

.bumblebee-controls__status {
  margin: .45rem 0 0;
  color: var(--ink-soft);
}

.bumblebee-controls__status:empty {
  display: none;
}

.bumblebee-controls__cameo {
  width: 48px;
  margin: .5rem auto 0;
}

.bumblebee__cursor-cameo {
  display: block;
  animation: bumblebee-cursor-cameo 5s ease-out both;
  transform-origin: 6px 4px;
}

.bumblebee-controls__review {
  min-width: 0;
  margin: .9rem 0 0;
  padding: .55rem 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.bumblebee-controls__review legend {
  padding: 0 .4rem 0 0;
  color: var(--ink-soft);
  font-weight: 700;
}

.bumblebee-controls__review p {
  margin: 0 0 .2rem;
  color: var(--ink-soft);
}

@keyframes bumblebee-wing-near {
  from { transform: rotate(-8deg) scaleY(.84); }
  to { transform: rotate(14deg) scaleY(.34); }
}

@keyframes bumblebee-wing-far {
  from { transform: rotate(-5deg) scaleX(.85); }
  to { transform: rotate(17deg) scaleX(.42); }
}

@keyframes bumblebee-flinch {
  0%, 100% { transform: translateY(0) rotate(0); }
  22% { transform: translateY(-5px) rotate(-9deg) scale(1.035); }
  52% { transform: translateY(-2px) rotate(5deg); }
  78% { transform: translateY(-1px) rotate(-2deg); }
}

@keyframes bumblebee-surprise {
  0%, 100% { opacity: 0; }
  15%, 58% { opacity: .85; }
}

@keyframes bumblebee-settle {
  0% { transform: translateY(-2px); }
  55% { transform: translateY(1px) scaleY(.97); }
  100% { transform: translateY(0); }
}

@keyframes bumblebee-cursor-cameo {
  0% { transform: scale(.78); opacity: 0; }
  8% { transform: scale(1.04); opacity: 1; }
  16%, 85% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.95); opacity: 0; }
}

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

@media print {
  .bumblebee { display: none; }
}
/* Individual offer pages */

.offer-detail-hero,
.content-detail-hero {
  padding-block: clamp(3.7rem, 7vw, 6.5rem) 0;
}

.offer-detail__eyebrow,
.content-detail__eyebrow {
  display: flex;
  margin: 0 0 1.2rem;
  align-items: center;
  gap: 0.48rem;
}

.offer-detail__eyebrow::before,
.content-detail__eyebrow::before {
  width: 0.9rem;
  height: 1.16rem;
  flex: 0 0 auto;
  background: url("/assets/images/erklaermarken/kontextklar-feder.svg") center / contain no-repeat;
  content: "";
}

.offer-detail-hero__title,
.content-detail-hero__title {
  max-width: none;
}

.offer-detail-hero__title h1,
.content-detail-hero__title h1 {
  max-width: none;
  font-size: clamp(3.2rem, 6.7vw, 6rem);
  line-height: 1.14;
}

.offer-detail__split,
.content-detail__intro {
  display: grid;
  margin-top: clamp(2rem, 4vw, 3.2rem);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
}

.offer-detail__split {
  align-items: last baseline;
}

.offer-detail__split--marginal-left,
.content-detail__intro {
  grid-template-columns: minmax(0, 0.75fr) minmax(24rem, 1.25fr);
}

.offer-detail__split--main-left {
  grid-template-columns: minmax(0, 1.12fr) minmax(20rem, 0.68fr);
}

.offer-detail__split--marginal-left > .offer-detail__marginal,
.offer-detail__split--marginal-left.offer-detail__copy-pair > .detail-copy--marginal {
  grid-column: 1;
}

.offer-detail__split--marginal-left > .offer-detail__main,
.offer-detail__split--marginal-left.offer-detail__copy-pair > .detail-copy--main {
  grid-row: 1;
  grid-column: 2;
}

.offer-detail__split--main-left > .offer-detail__main,
.offer-detail__split--main-left.offer-detail__copy-pair > .detail-copy--main {
  grid-row: 1;
  grid-column: 1;
}

.offer-detail__split--main-left > .offer-detail__marginal,
.offer-detail__split--main-left.offer-detail__copy-pair > .detail-copy--marginal {
  grid-row: 1;
  grid-column: 2;
}

.offer-detail__main > :first-child,
.offer-detail__copy-pair > .detail-copy--first {
  margin-top: 0;
}

.offer-detail__main > :last-child,
.offer-detail__copy-pair > .detail-copy--last,
.offer-detail__marginal {
  margin-bottom: 0;
}

.offer-detail__marginal a,
.offer-detail__copy-pair > .detail-copy--marginal a,
.offer-detail__steps a,
.offer-detail__related a {
  font-weight: 700;
}

.offer-detail__main a,
.offer-detail__copy-pair > .detail-copy--main a {
  font-weight: inherit;
}

.offer-detail-hero .home-thought-divider,
.content-detail-hero .home-thought-divider {
  margin-top: clamp(4rem, 5vw, 4.5rem);
}

.offer-detail__illustration,
.content-detail__illustration {
  margin-top: clamp(4.5rem, 6.5vw, 6.5rem);
}

.offer-detail__section,
.content-detail__section {
  padding-block: clamp(4.5rem, 6.5vw, 6.5rem) 0;
}

.content-detail__video {
  padding-top: clamp(4.5rem, 6.5vw, 6.5rem);
}

.content-detail__video .video-companion {
  margin-top: 0;
}

.offer-detail__heading,
.content-detail__heading {
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}

.offer-detail__heading .eyebrow {
  margin-bottom: 1.2rem;
}

.offer-detail__heading h2,
.offer-detail__contact h2,
.content-detail__heading h2,
.content-detail__contact h2 {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  text-wrap: balance;
}

.offer-detail__heading + .offer-detail__split {
  margin-top: 0;
}

.offer-detail__section .home-thought-divider,
.content-detail__section .home-thought-divider {
  margin-top: clamp(3.5rem, 5.5vw, 5rem);
}

.offer-detail__steps ol {
  --numbered-card-strip-height: 6.5rem;
  --numbered-card-number-size: 3.6rem;
  --numbered-card-strip-background:
    linear-gradient(90deg, transparent, rgb(15 103 93 / 7%) 50%, transparent),
    rgb(255 253 248 / 42%);

  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  counter-reset: offer-step;
  list-style: none;
}

.offer-detail__steps li {
  position: relative;
  min-height: 15rem;
  padding: 8.7rem var(--numbered-card-padding) var(--numbered-card-padding);
  overflow: hidden;
  color: var(--ink-soft);
  counter-increment: offer-step;
  font-size: 0.94rem;
  line-height: 1.7;
}

.offer-detail__steps li::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  place-items: center;
  content: "0" counter(offer-step);
}

.offer-detail__steps li:nth-child(2),
.offer-detail__steps li:nth-child(5) {
  background: var(--surface-tint);
}

.offer-detail__steps li:nth-child(3),
.offer-detail__steps li:nth-child(6) {
  background: #f8e0d6;
}

.offer-detail__related li {
  border-bottom: 1px solid var(--line);
}

.offer-detail__related a {
  min-height: 4.25rem;
  font-size: 0.92rem;
}

.offer-detail__related a::after,
.content-detail__section--link-list .content-detail__body > ul a::after,
.content-detail__section--related .content-detail__body > ul a::after,
.content-detail__section--subnavigation .content-detail__body > ul a::after {
  flex: 0 0 auto;
  color: var(--brand);
  content: "→";
  text-decoration: none;
}

.offer-detail__contact,
.content-detail__contact {
  padding-block: clamp(4.5rem, 7vw, 7rem) clamp(2.5rem, 5vw, 4rem);
}

.offer-detail__contact-card,
.content-detail__contact-card {
  display: grid;
  padding: clamp(2rem, 6vw, 5rem);
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 17rem);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
  border: 1px solid rgb(17 41 39 / 14%);
  border-radius: var(--radius-large);
  background:
    radial-gradient(circle at 88% 20%, rgb(242 155 125 / 28%), transparent 22rem),
    linear-gradient(125deg, rgb(217 239 130 / 42%), rgb(255 253 248 / 90%));
  box-shadow: var(--shadow);
}

.offer-detail__contact-copy > p:not(.eyebrow),
.content-detail__contact-copy > p:not(.eyebrow) {
  max-width: 54ch;
  margin: 1.35rem 0 0;
  color: var(--ink-soft);
  line-height: 1.75;
}

.offer-detail__contact-copy .button-link,
.content-detail__contact-copy .button-link {
  margin-top: 1.6rem;
}

.offer-detail__contact-icon,
.content-detail__contact-icon {
  width: min(100%, 17rem);
  height: auto;
  justify-self: end;
  object-fit: contain;
}

.cockpit-detail__illustration-hint {
  display: none;
}

.cockpit-detail__contact .offer-detail__contact-copy > blockquote {
  max-width: 54ch;
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--brand-dark);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.6;
}

.cockpit-detail__contact .offer-detail__contact-copy > blockquote p {
  margin: 0;
}

/* Shared content pages */

.page--offer .content-detail__intro {
  align-items: last baseline;
}

.content-detail__marginal > p {
  margin: 0;
}

.content-context-visual {
  display: grid;
  width: min(100%, 15rem);
  min-height: 9rem;
  margin-bottom: 1.35rem;
  place-items: center;
}

.content-context-visual img {
  width: 7.5rem;
  height: 7.5rem;
  object-fit: contain;
}

.content-detail__marginal--visual .content-context-visual {
  margin-bottom: 0;
}

.content-detail-hero .content-context-visual {
  width: 100%;
  min-height: 20rem;
}

.content-detail-hero .content-context-visual img {
  width: min(100%, 20rem);
  height: auto;
}

@media (min-width: 67rem) {
  .offer-detail__marginal,
  .offer-detail__copy-pair > .detail-copy--marginal,
  .page--offer .content-detail__marginal {
    transform: translateY(1px);
  }
}

@media (min-width: 80rem) {
  .offer-detail__marginal,
  .offer-detail__copy-pair > .detail-copy--marginal,
  .page--offer .content-detail__marginal {
    transform: translateY(2px);
  }
}

.content-detail__lead > :last-child {
  margin-bottom: 0;
}

.article-content .content-detail__lead-title {
  margin: 0 0 1rem;
  color: var(--brand-dark);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.45;
  text-transform: uppercase;
}

.content-detail__lead--description > p {
  margin: 0;
}

.content-detail__intro--single-main > .content-detail__lead {
  grid-column: 2;
}

.content-detail__intro--main-first > .content-detail__lead {
  grid-column: 2;
  grid-row: 1;
}

.content-detail__intro--main-first > .content-detail__marginal {
  grid-column: 1;
  grid-row: 1;
}

.content-detail__illustration .explainer-figure {
  width: 100%;
}

.content-detail__section > .shell {
  display: grid;
  grid-template-columns: minmax(12rem, 0.48fr) minmax(0, 1.12fr);
  column-gap: clamp(2rem, 7vw, 7rem);
}

.content-detail__heading,
.content-detail__section .home-thought-divider {
  grid-column: 1 / -1;
}

.content-detail__heading .content-detail__eyebrow {
  margin-bottom: 1rem;
}

.content-detail__body {
  max-width: var(--measure);
  grid-column: 2;
}

.content-detail__body > :first-child {
  margin-top: 0;
}

.content-detail__body > :last-child {
  margin-bottom: 0;
}

.content-detail__subsections {
  display: grid;
  max-width: var(--measure);
  grid-column: 2;
  gap: 2.25rem;
}

.content-detail__body + .content-detail__subsections {
  margin-top: 2.25rem;
}

.content-detail__subsection h3 {
  margin: 0 0 0.8rem;
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.4;
}

.content-detail__subsection-body > :first-child {
  margin-top: 0;
}

.content-detail__subsection-body > :last-child {
  margin-bottom: 0;
}

.content-detail__section--subsection-grid .content-detail__subsections{max-width:none;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem}
.content-detail__section--subsection-grid .content-detail__subsection{padding-block:1.25rem;border-top:1px solid var(--line)}
.content-detail__section--subsection-grid .content-detail__subsection:nth-last-child(-n+2){border-bottom:1px solid var(--line)}

.content-detail__section--with-visual .content-context-visual {
  grid-column: 1;
  align-self: start;
  justify-self: start;
  margin-bottom: 0;
}

.content-detail__section--split-prose > .shell,
.content-detail__section--paired-prose > .shell {
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.65fr);
  row-gap: 0;
}

.content-detail__section--split-prose .content-detail__body,
.content-detail__section--paired-prose .content-detail__body {
  display: contents;
}

.content-detail__section--split-prose .content-context-visual {
  grid-row: 2;
  grid-column: 2;
  width: 100%;
  height: 15rem;
  min-height: 15rem;
  margin: 0 0 1rem;
  overflow: hidden;
  justify-self: stretch;
}

.content-detail__section--split-prose .content-context-visual img {
  width: min(108%, 22.5rem);
  max-width: none;
  height: auto;
}

.content-detail__section--split-prose .content-detail__body > .detail-copy,
.content-detail__section--paired-prose .content-detail__body > .detail-copy {
  margin: 0;
}

.content-detail__section--split-prose .content-detail__body > .detail-copy--main-leading,
.content-detail__section--split-prose .content-detail__body > .detail-copy--main-trailing,
.content-detail__section--paired-prose .content-detail__body > .detail-copy--main {
  grid-column: 1;
}

.content-detail__section--split-prose .content-detail__body > .detail-copy--marginal,
.content-detail__section--paired-prose .content-detail__body > .detail-copy--marginal {
  grid-column: 2;
  align-self: end;
  transform: translateY(-1px);
}

.content-detail__section--split-prose .content-detail__body > .detail-copy--marginal {
  margin-top: 1rem;
  grid-row: 3;
}

.content-detail__section--split-prose .content-detail__body > .detail-copy--main-leading {
  grid-row: 2;
}

.content-detail__section--split-prose .content-detail__body > .detail-copy--main-trailing {
  margin-top: 1rem;
  grid-row: 3;
  align-self: end;
}

.content-detail__section--paired-prose .content-detail__body > .detail-copy--main {
  grid-row: 2;
}

.content-detail__section--paired-prose .content-detail__body > .detail-copy--marginal {
  grid-row: 2;
}

.content-detail__section--marginal-left > .shell {
  grid-template-columns: minmax(18rem, 0.65fr) minmax(0, 1.05fr);
}

.content-detail__section--marginal-left .content-detail__body > .detail-copy--main {
  grid-column: 2;
}

.content-detail__section--marginal-left .content-detail__body > .detail-copy--marginal {
  grid-column: 1;
}

.content-detail__section--split-content > .shell {
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.65fr);
}

.content-detail__section--split-content.content-detail__section--marginal-left > .shell {
  grid-template-columns: minmax(18rem, 0.65fr) minmax(0, 1.05fr);
}

.content-detail__section--split-content .content-detail__body {
  display: contents;
}

.content-detail__section--split-content .content-detail__main-group,
.content-detail__section--split-content .content-detail__marginal-group {
  grid-row: 2;
  align-self: start;
}

.content-detail__section--split-content .content-detail__main-group {
  min-width: 0;
  grid-column: 1;
}

.content-detail__section--split-content .content-detail__marginal-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1.5rem;
  grid-column: 2;
}

.content-detail__section--split-content.content-detail__section--marginal-left .content-detail__main-group {
  grid-column: 2;
}

.content-detail__section--split-content.content-detail__section--marginal-left .content-detail__marginal-group {
  grid-column: 1;
}

.content-detail__section--split-content .detail-copy > :first-child {
  margin-top: 0;
}

.content-detail__section--split-content .detail-copy > :last-child {
  margin-bottom: 0;
}

.content-figure {
  width: min(100%, 14rem);
  margin: 0;
}

.content-figure--small {
  width: min(100%, 10rem);
}

.content-figure--portrait {
  width: min(100%, 20rem);
  margin-top: 0;
  align-self: center;
}

.content-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.content-figure--portrait img {
  border-radius: 50%;
}

.content-detail__intro--bottom-marginal > .content-detail__marginal {
  display: flex;
  max-width: none;
  flex-direction: column;
  gap: 1.5rem;
}

.content-detail--bottom-marginals .content-detail__main-group {
  align-self: end;
}

.content-detail--bottom-marginals .content-detail__marginal-group,
.content-detail__intro--bottom-marginal > .content-detail__marginal {
  align-self: stretch;
}

.content-detail--bottom-marginals .content-detail__marginal-group > .detail-copy,
.content-detail__intro--bottom-marginal > .content-detail__marginal > p {
  max-width: 43ch;
  margin-top: auto;
  transform: translateY(-1px);
}

.content-detail__intro--bottom-marginal .explainer-figure,
.content-detail__section-illustration--marginal {
  width: 100%;
  max-width: 28rem;
  margin: 0;
  align-self: start;
}

.content-detail__section--visual-prose > .shell {
  align-items: center;
}

.content-detail__section--visual-left > .shell {
  grid-template-columns: minmax(15rem, 0.75fr) minmax(24rem, 1.25fr);
}

.content-detail__section--visual-right > .shell {
  grid-template-columns: minmax(24rem, 1.25fr) minmax(15rem, 0.75fr);
}

.content-detail__section--visual-prose .content-context-visual {
  width: 100%;
  min-height: 18rem;
  margin: 0;
  overflow: hidden;
  align-self: center;
  justify-self: stretch;
}

.content-detail__section--visual-prose .content-context-visual img {
  width: min(100%, 20rem);
  height: auto;
}

.content-detail__section--visual-compact .content-context-visual {
  min-height: 12rem;
}

.content-detail__section--visual-compact .content-context-visual img {
  width: min(100%, 15rem);
}

.content-detail__section--visual-prose .content-context-visual--expanded img {
  width: min(120%, 24rem);
  max-width: none;
}

.content-detail__section--visual-prose .content-context-visual--wide {
  min-height: 13rem;
}

.content-detail__section--visual-prose .content-context-visual--wide img {
  width: min(100%, 28rem);
  max-width: none;
}

.content-detail__section--visual-prose .content-detail__body {
  max-width: 59ch;
  align-self: center;
}

.content-detail__section--visual-prose .content-detail__body > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--intro-copy-size);
  line-height: var(--intro-copy-line-height);
}

.content-detail__section--visual-prose .content-detail__body > p + p {
  margin-top: 1.2rem;
}

.content-detail__section--visual-prose.content-detail__section--has-subsections > .shell {
  align-items: start;
}

.content-detail__section--visual-prose.content-detail__section--has-subsections
  .content-context-visual,
.content-detail__section--visual-prose.content-detail__section--has-subsections
  .content-detail__body {
  align-self: start;
}

.content-detail__section--visual-prose.content-detail__section--has-subsections
  .content-context-visual {
  place-items: start center;
}

.content-detail__section--visual-prose.content-detail__section--has-subsections
  .content-detail__subsections {
  max-width: 59ch;
  margin-top: 2rem;
  grid-row: 3;
}

.content-detail__section--visual-right.content-detail__section--has-subsections
  .content-detail__subsections {
  grid-column: 1;
}

.content-detail__section--visual-left.content-detail__section--has-subsections
  .content-detail__subsections {
  grid-column: 2;
}

.content-detail__section--visual-left .content-context-visual {
  grid-row: 2;
  grid-column: 1;
}

.content-detail__section--visual-left .content-detail__body {
  grid-row: 2;
  grid-column: 2;
}

.content-detail__section--visual-right .content-detail__body {
  grid-row: 2;
  grid-column: 1;
}

.content-detail__section--visual-right .content-context-visual {
  grid-row: 2;
  grid-column: 2;
}

.content-detail__section--table .content-detail__body {
  max-width: none;
  grid-column: 1 / -1;
}

.content-detail__section--table .table-scroll {
  max-width: none;
  margin-top: 0;
}

@media (min-width: 64.01rem) {
  .content-detail__section--table.content-detail__section--with-visual:not(.content-detail__section--visual-prose) .content-detail__body,
  .content-detail__section--table.content-detail__section--with-visual:not(.content-detail__section--visual-prose) .content-detail__subsections,
  .content-detail__section--table.content-detail__section--visual-left .content-detail__body,
  .content-detail__section--table.content-detail__section--visual-left .content-detail__subsections {
    grid-column: 2;
  }

  .content-detail__section--table.content-detail__section--visual-right .content-detail__body,
  .content-detail__section--table.content-detail__section--visual-right .content-detail__subsections {
    grid-column: 1;
  }
}

.content-detail__section--ordered .content-detail__body {
  max-width: none;
  grid-column: 1 / -1;
}

.content-detail__section--ordered .content-detail__body > ol {
  display: grid;
  max-width: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  counter-reset: content-step;
  list-style: none;
}

.content-detail__section--ordered-three .content-detail__body > ol {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-detail__section--ordered .content-detail__body > ol > li {
  position: relative;
  min-height: 13.5rem;
  margin: 0;
  padding:
    calc(var(--numbered-card-strip-height) + var(--numbered-card-content-gap))
    var(--numbered-card-padding) var(--numbered-card-padding);
  overflow: hidden;
  color: var(--ink-soft);
  counter-increment: content-step;
  font-size: 0.94rem;
  line-height: 1.7;
}

.content-detail__section--ordered .content-detail__body > ol > li::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  place-items: center;
  content: "0" counter(content-step);
}

.content-detail__section--ordered .content-detail__body > ol + * {
  max-width: var(--measure);
  margin-right: auto;
  margin-left: auto;
}

.content-detail__section--key-list .content-detail__body,
.content-detail__section--link-list .content-detail__body,
.content-detail__section--related .content-detail__body,
.content-detail__section--subnavigation .content-detail__body {
  max-width: none;
  grid-column: 1 / -1;
}

.content-detail__section--related nav,
.content-detail__section--subnavigation nav {
  min-width: 0;
  grid-column: 1 / -1;
}

.offer-detail__related ul,
.content-detail__section--key-list .content-detail__body > ul,
.content-detail__section--link-list .content-detail__body > ul,
.content-detail__section--related .content-detail__body > ul,
.content-detail__section--subnavigation .content-detail__body > ul {
  display: grid;
  max-width: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3rem;
  list-style: none;
}

.content-detail__section--key-list .content-detail__body {
  display: grid;
  grid-template-columns: minmax(12rem, 0.48fr) minmax(0, 1.12fr);
  column-gap: clamp(2rem, 7vw, 7rem);
}

.content-detail__section--key-list .content-detail__body > ul {
  grid-column: 1 / -1;
}

.content-detail__section--key-list .content-detail__body > p {
  width: 100%;
  max-width: var(--measure);
  margin: 0;
  grid-column: 2;
}

.content-detail__section--key-list .content-detail__body > p + ul,
.content-detail__section--key-list .content-detail__body > ul + p {
  margin-top: 2rem;
}

.content-detail__section--key-list .content-detail__body > p + p {
  margin-top: 1.2rem;
}

.content-detail__section--key-list.content-detail__section--with-visual .content-detail__body {
  display: contents;
}

.content-detail__section--key-list.content-detail__section--with-visual .content-context-visual {
  width: 100%;
  min-height: 18rem;
  margin: 0;
  grid-row: 2 / span 2;
  grid-column: 1;
  align-self: center;
  justify-self: stretch;
}

.content-detail__section--key-list.content-detail__section--with-visual .content-context-visual img {
  width: min(100%, 16rem);
  height: auto;
}

.content-detail__section--key-list.content-detail__section--with-visual .content-context-visual--expanded img {
  width: min(112%, 18rem);
  max-width: none;
}

.helper-operating-guide .content-detail__section--visual-prose .content-context-visual {
  min-height: 13rem;
}

.helper-operating-guide .content-detail__section--visual-prose .content-context-visual img {
  width: min(100%, 12rem);
}

.helper-operating-guide .content-detail__section--visual-prose[aria-labelledby="ansicht-steuern"]
  .content-context-visual {
  min-height: 19rem;
}

.helper-operating-guide .content-detail__section--visual-prose[aria-labelledby="ansicht-steuern"]
  .content-context-visual img {
  width: min(100%, 24rem);
}

.content-detail__section--visual-trailing-prose .content-detail__body > ul {
  grid-row: 2;
}

.content-detail__section--visual-trailing-prose .content-detail__body > ul + p {
  margin-top: clamp(3rem, 4vw, 4rem);
  grid-row: 3;
  grid-column: 1;
}

.content-detail__section--visual-trailing-prose > .shell {
  grid-template-columns: minmax(0, 1.12fr) minmax(12rem, 0.48fr);
}

.content-detail__section--key-list.content-detail__section--visual-trailing-prose .content-context-visual {
  position: relative;
  width: min(100%, 16rem);
  height: 9.95rem;
  min-height: 0;
  margin: clamp(3rem, 4vw, 4rem) 0 0;
  overflow: hidden;
  grid-row: 3;
  grid-column: 2;
  align-self: start;
  justify-self: center;
}

.content-detail__section--key-list.content-detail__section--visual-trailing-prose .content-context-visual img {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  width: 100%;
  max-width: none;
  height: auto;
  translate: -50% -18.125%;
}

.content-detail__section--visual-after-body:not(.content-detail__section--key-list) .content-detail__body,
.content-detail__section--visual-after-body:not(.content-detail__section--key-list) .content-context-visual {
  grid-row: 2;
}

.content-detail__section--visual-after-body:not(.content-detail__section--key-list) .content-context-visual {
  position: relative;
  width: 100%;
  height: 7.05rem;
  min-height: 0;
  margin: 0;
  align-self: start;
  justify-self: stretch;
}

.content-detail__section--visual-after-body:not(.content-detail__section--key-list) .content-context-visual img {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  width: min(100%, 16rem);
  height: auto;
  translate: -50% -21.5625%;
}

.content-detail__section--key-list .content-detail__body > ul > li {
  position: relative;
  margin: 0;
  padding: 1rem 0 1rem 1.45rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}

.content-detail__section--key-list .content-detail__body > ul > li::before {
  position: absolute;
  top: 1.72rem;
  left: 0.15rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--brand);
  content: "";
}

.content-detail__section--key-list .content-detail__body > ul > li:nth-last-child(-n + 2) {
  border-bottom: 1px solid var(--line);
}

.content-detail__section--link-list .content-detail__body > ul > li,
.content-detail__section--related .content-detail__body > ul > li,
.content-detail__section--subnavigation .content-detail__body > ul > li,
.sources li {
  margin: 0;
  border-top: 1px solid var(--line);
}

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

.content-detail__section--link-list .content-detail__body > ul > li:nth-last-child(-n + 2),
.content-detail__section--related .content-detail__body > ul > li:nth-last-child(-n + 2),
.content-detail__section--subnavigation .content-detail__body > ul > li:nth-last-child(-n + 2) {
  border-bottom: 1px solid var(--line);
}

.offer-detail__related a,
.content-detail__section--link-list .content-detail__body > ul a,
.content-detail__section--related .content-detail__body > ul a,
.content-detail__section--subnavigation .content-detail__body > ul a,
.sources a {
  display: flex;
  padding-block: 0.85rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.content-detail__section--link-list .content-detail__body > ul a,
.content-detail__section--related .content-detail__body > ul a,
.content-detail__section--subnavigation .content-detail__body > ul a,
.sources a {
  min-height: 4rem;
  font-weight: 700;
}

.sources a > span {
  flex: 0 0 auto;
  color: var(--brand);
  text-decoration: none;
}

.content-detail > .sources {
  margin-top: clamp(4.5rem, 6.5vw, 6.5rem);
  border-top: 0;
}

.content-detail__contact-question blockquote {
  max-width: 32ch;
  margin: 1.35rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--brand-dark);
  font-size: var(--intro-copy-size);
  line-height: var(--intro-copy-line-height);
}

.content-detail__contact-question blockquote p {
  margin: 0;
}
/* Utility and legal pages */

.utility-page__intro {
  display: grid;
  grid-template-columns: minmax(12rem, 0.48fr) minmax(0, 1.12fr);
  column-gap: clamp(2rem, 7vw, 7rem);
}

.utility-page__intro > h1 {
  grid-column: 1 / -1;
}

.utility-page__intro > :not(h1) {
  max-width: var(--measure);
  grid-column: 2;
}

.utility-page__intro > h1 + * {
  margin-top: clamp(2rem, 4vw, 3.2rem);
}

.utility-page__intro blockquote {
  margin-bottom: 0;
  padding: 1.2rem 1.4rem;
  border-left: 0.35rem solid var(--coral);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  background: var(--surface);
  box-shadow: 0 0.5rem 1.5rem rgb(17 41 39 / 5%);
  color: var(--ink-soft);
  line-height: 1.7;
}

.utility-page__intro blockquote p {
  margin: 0;
}

.utility-page__intro > p,
.utility-page__intro ul {
  color: var(--ink-soft);
  font-size: var(--intro-copy-size);
  line-height: var(--intro-copy-line-height);
}

.utility-page__intro ul {
  padding-left: 1.2rem;
}

.utility-page__intro--contact,
.utility-page__intro--imprint,
.utility-page__intro--privacy {
  align-items: center;
}

.utility-page__intro--imprint,
.utility-page__intro--privacy {
  row-gap: 0;
}

.utility-page__intro--contact .utility-page__intro-copy,
.utility-page__intro--imprint .utility-page__intro-copy,
.utility-page__intro--privacy .utility-page__intro-copy {
  display: contents;
}

.utility-page__intro--contact .utility-page__intro-copy h1,
.utility-page__intro--imprint .utility-page__intro-copy h1,
.utility-page__intro--privacy .utility-page__intro-copy h1 {
  grid-row: 1;
  grid-column: 1 / -1;
}

.utility-page__intro--contact .utility-page__intro-copy > .detail-copy--main,
.utility-page__intro--imprint .utility-page__intro-copy > .detail-copy--main-leading,
.utility-page__intro--privacy .utility-page__intro-copy > .detail-copy--main-leading {
  margin: clamp(2rem, 4vw, 3.2rem) 0 0;
  grid-row: 2;
}

.utility-page__intro--contact .utility-page__intro-copy > .detail-copy--main {
  grid-column: 2;
}

.utility-page__intro--contact > .content-context-visual,
.utility-page__intro--imprint > .content-context-visual,
.utility-page__intro--privacy > .content-context-visual {
  margin: clamp(2rem, 4vw, 3.2rem) 0 0;
  grid-column: 1;
}

.utility-page__intro--contact > .content-context-visual {
  width: 100%;
  min-height: 16rem;
  grid-row: 2;
}

.utility-page__intro--contact > .content-context-visual img {
  width: min(82%, 16rem);
}

.utility-page__intro--imprint .utility-page__intro-copy > .detail-copy {
  max-width: 36rem;
  grid-column: 2;
}

.utility-page__intro--imprint .utility-page__intro-copy > .detail-copy--main-trailing {
  margin: 1.4rem 0 0;
  grid-row: 3;
  color: var(--ink);
  font-size: clamp(1.08rem, 1.8vw, 1.22rem);
  line-height: 1.75;
}

.utility-page__intro--imprint > .content-context-visual {
  width: 100%;
  min-height: 15rem;
  grid-row: 2 / 4;
}

.utility-page__intro--imprint > .content-context-visual img {
  width: min(92%, 15rem);
  height: auto;
}

.utility-page__intro--privacy .utility-page__intro-copy > .detail-copy {
  max-width: 39rem;
  grid-column: 2;
}

.utility-page__intro--privacy .utility-page__intro-copy > .detail-copy--main-trailing {
  margin: 1.35rem 0 0;
  grid-row: 3;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.utility-page__intro--privacy > .content-context-visual {
  width: min(100%, 13rem);
  min-height: 12rem;
  grid-row: 2 / 4;
  justify-self: start;
}

.utility-page__intro--privacy > .content-context-visual img {
  width: min(75%, 9rem);
  height: auto;
}

.page--not-found .utility-page__hero {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.utility-page__intro--not-found .utility-page__intro-copy {
  display: contents;
}

.utility-page__intro--not-found .utility-page__intro-copy h1 {
  grid-column: 1 / -1;
  grid-row: 1;
}

.utility-page__intro--not-found .utility-page__intro-copy > :not(h1) {
  grid-column: 2;
}

.utility-page__intro--not-found .detail-copy {
  margin: clamp(2rem, 4vw, 3.2rem) 0 0;
  grid-row: 2;
}

.utility-page__intro--not-found .utility-page__intro-copy > ul {
  margin: 1.2rem 0 0;
  grid-row: 3;
}

.utility-page__intro--not-found > .content-context-visual {
  width: 100%;
  max-width: 22rem;
  min-height: 0;
  margin: clamp(2rem, 4vw, 3.2rem) 0 0;
  grid-column: 1;
  grid-row: 2 / 4;
  align-self: center;
}

.utility-page__intro--not-found > .content-context-visual img {
  width: 100%;
  height: auto;
}

.privacy-page__content {
  padding-block: clamp(3.5rem, 6vw, 5rem) clamp(4.5rem, 7vw, 6.5rem);
}

.privacy-page__content .content-detail__section {
  padding: 0;
}

.privacy-page__content .content-detail__section > .shell {
  grid-template-columns: minmax(12rem, 0.48fr) minmax(0, 1.12fr);
  column-gap: clamp(2rem, 7vw, 7rem);
  padding-block: clamp(2.8rem, 4.5vw, 4rem);
  align-items: start;
  border-top: 1px solid var(--line);
}

.privacy-page__content .content-detail__section:first-child > .shell {
  padding-top: 0;
  border-top: 0;
}

.privacy-page__content .content-detail__heading {
  margin: 0;
  grid-column: 1;
}

.privacy-page__content .content-detail__heading h2 {
  margin: 0;
  overflow-wrap: normal;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 500;
  hyphens: none;
  line-height: 1.35;
}

.privacy-page__content .content-detail__body,
.privacy-page__content .content-detail__subsections {
  max-width: var(--measure);
  grid-column: 2;
}

.privacy-page__content .content-detail__body,
.privacy-page__content .content-detail__subsection-body {
  color: var(--ink-soft);
  line-height: 1.75;
}

.privacy-page__content .content-detail__subsections {
  gap: 2rem;
}

.privacy-page__content .content-detail__body + .content-detail__subsections {
  margin-top: 2rem;
}

.privacy-page__content .content-detail__subsection h3 {
  margin-bottom: 0.65rem;
  font-size: clamp(1.08rem, 1.7vw, 1.24rem);
  font-weight: 650;
  line-height: 1.4;
}

.privacy-page__content .content-detail__section--privacy-assistant .content-detail__heading,
.privacy-page__content .content-detail__section--privacy-assistant .content-detail__body {
  grid-row: 1;
}

.privacy-page__content .content-detail__section--privacy-assistant .content-detail__subsections,
.privacy-page__content .content-detail__section--privacy-assistant .content-context-visual {
  margin-top: 2rem;
  grid-row: 2;
}

.privacy-page__content .content-detail__section--privacy-assistant .content-context-visual {
  width: min(100%, 11rem);
  min-height: 8.5rem;
  margin-bottom: 0;
  grid-column: 1;
  justify-self: start;
}

.privacy-page__content .content-detail__section--privacy-assistant .content-context-visual img {
  width: min(72%, 7.5rem);
  height: auto;
}

.privacy-page__content .content-detail__section--rights .content-detail__body > ul {
  margin: 1.2rem 0 0;
  padding-left: 1.2rem;
}

.privacy-page__content .content-detail__section--rights .content-detail__body > ul > li {
  margin: 0;
  padding-block: 0.7rem;
  border-top: 1px solid var(--line);
}

.privacy-page__content .content-detail__section--rights .content-detail__body > ul > li:last-child {
  border-bottom: 1px solid var(--line);
}

.privacy-page__content .content-detail__section--rights .content-detail__body > ul > li::marker {
  color: var(--brand);
}

.legal-page__content {
  padding-block: clamp(4rem, 6vw, 5.5rem) clamp(4.5rem, 7vw, 6.5rem);
}

.legal-page__details {
  display: grid;
  grid-template-columns: minmax(15.5rem, 0.48fr) minmax(0, 1.12fr);
  column-gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
}

.legal-page__section {
  min-width: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.legal-page__section--contact,
.legal-page__section--responsibility {
  border-top: 0;
}

.legal-page__section--contact {
  grid-row: 1;
  grid-column: 1;
}

.legal-page__section--tax {
  margin-top: 2.5rem;
  grid-row: 2;
  grid-column: 1;
}

.legal-page__section--responsibility {
  grid-row: 1 / 3;
  grid-column: 2;
}

.legal-page__section .content-detail__heading {
  margin-bottom: 1.5rem;
}

.legal-page__section .content-detail__heading h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vw, 2.55rem);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  text-wrap: balance;
}

.legal-page__section--tax .content-detail__heading h2 {
  font-size: clamp(1.55rem, 2.4vw, 2rem);
}

.legal-page__section .content-detail__body {
  max-width: 40rem;
  grid-column: auto;
  color: var(--ink-soft);
  line-height: 1.75;
}

.legal-page__section--contact .content-detail__body,
.legal-page__section--tax .content-detail__body {
  font-size: var(--marginal-copy-size);
  line-height: var(--marginal-copy-line-height);
}

.legal-page__section--contact .content-detail__body > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-page__section--contact .content-detail__body > ul > li {
  margin: 0;
  padding-block: 0.72rem;
}

.content-detail__form {
  grid-column: 2;
  margin-top: 3rem;
}

.contact-page__form-section > .shell {
  grid-template-columns: minmax(15rem, 0.58fr) minmax(0, 1.12fr);
  align-items: start;
}

.contact-page__guidance {
  max-width: 43ch;
  grid-row: 2;
  grid-column: 1;
  color: var(--ink-soft);
  font-size: var(--marginal-copy-size);
  line-height: var(--marginal-copy-line-height);
}

.contact-page__guidance > p {
  margin: 0;
}

.contact-page__guidance > ul {
  margin: 1.4rem 0;
  padding: 0;
  list-style: none;
}

.contact-page__guidance > ul > li {
  position: relative;
  margin: 0;
  padding: 0.85rem 0 0.85rem 1.25rem;
  border-top: 1px solid var(--line);
}

.contact-page__guidance > ul > li:last-child {
  border-bottom: 1px solid var(--line);
}

.contact-page__guidance > ul > li::before {
  position: absolute;
  top: 1.38rem;
  left: 0.15rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--brand);
  content: "";
}

.contact-page__form-section .content-detail__form {
  width: 100%;
  margin-top: 0;
  grid-row: 2;
  grid-column: 2;
}

.contact-page__terminal-section {
  padding-bottom: clamp(3.5rem, 5vw, 5rem);
}
/* Shared native video companion for the homepage and article pages. */

.video-companion {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.video-companion [hidden] { display: none; }
.video-companion__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.video-companion__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgb(17 41 39 / 16%);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.video-companion__cover,
.video-companion__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.video-companion__player { display: block; object-fit: contain; background: #000; }
.video-companion__player:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: -3px; }
.video-companion__load {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: 0.65rem 1rem;
  border: 1px solid var(--brand-dark);
  border-radius: 2rem;
  background: var(--brand-dark);
  color: #fffdf8;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transform: translateX(-50%);
}
.video-companion__load:hover { background: var(--ink); color: #fffdf8; text-decoration: none; }
.video-companion__load:focus-visible { outline: 3px solid #fffdf8; outline-offset: 3px; box-shadow: 0 0 0 6px var(--ink); }
.video-companion__load svg { width: 1.1rem; height: 1.1rem; flex: none; fill: currentColor; }
.video-companion__duration {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  padding: 0.15rem 0.45rem;
  border-radius: 0.3rem;
  background: var(--ink);
  color: #fffdf8;
  font-size: 0.8rem;
  font-weight: 700;
}
.video-companion__copy .eyebrow { margin: 0 0 0.65rem; }
.video-companion__copy h2 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 400; line-height: 1.3; text-wrap: balance; }
.video-companion__description { margin: 1rem 0 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.7; }
.video-companion__status { margin: 0.5rem 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 760px) {
  .video-companion__layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .video-companion__load { bottom: 0.7rem; padding: 0.6rem 0.8rem; font-size: 0.8rem; }
}

/* Homepage */
.home-hero {
  padding-block: clamp(4rem, 7vw, 7rem) 0;
}

.home-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.48rem;
}

.home-hero__nib {
  width: 0.9rem;
  height: 1.16rem;
  flex: 0 0 auto;
  object-fit: contain;
}

.home-hero__content {
  display: grid;
  max-width: none;
  grid-template-columns: minmax(0, 1.12fr) minmax(20rem, 0.68fr);
  column-gap: clamp(3rem, 8vw, 8rem);
}

.home-hero__content h1 {
  max-width: none;
  grid-column: 1 / -1;
  line-height: 1.14;
}

.home-hero__content > .detail-copy {
  margin: clamp(1.8rem, 4vw, 3rem) 0 0;
  align-self: end;
}

.home-hero__content > .detail-copy--marginal a,
.home-section__intro > .detail-copy--marginal a {
  font-weight: 700;
}

.home-process {
  margin: clamp(3rem, 6vw, 5rem) 0 0;
}

.home-process__crop {
  width: 100%;
  aspect-ratio: 3.1;
  overflow: hidden;
  border: 1px solid rgb(17 41 39 / 13%);
  border-radius: var(--radius);
  background: #f5f0e3;
  box-shadow: var(--shadow);
}

.home-process__crop img {
  width: 100%;
  height: auto;
  transform: translateY(-24%);
}

.home-hero .home-thought-divider {
  margin-top: clamp(4rem, 5vw, 4.5rem);
}

.home-section {
  padding-block: clamp(4.5rem, 6.5vw, 6.5rem) 0;
}

.home-hero + .home-section {
  padding-top: clamp(4.5rem, 6vw, 5rem);
}

.home-section .home-thought-divider {
  margin-top: clamp(3.5rem, 5.5vw, 5rem);
}

.home-section__header {
  display: grid;
  margin-bottom: clamp(2.2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(17rem, 0.75fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
}

.home-section__header--split {
  align-items: start;
  row-gap: 0;
}

.home-section__header--marginal-left {
  grid-template-columns: minmax(0, 0.75fr) minmax(24rem, 1.25fr);
}

.home-section__header--main-left {
  grid-template-columns: minmax(0, 1.12fr) minmax(20rem, 0.68fr);
}

.home-section__header--split .home-section__heading {
  grid-column: 1 / -1;
}

.home-section__header--split .home-section__heading h2 {
  max-width: none;
}

.home-section__header--split .home-section__intro {
  display: contents;
}

.home-section__header--split .home-section__intro > .detail-copy {
  margin: clamp(1.8rem, 4vw, 3rem) 0 0;
  align-self: end;
}

.home-section__header .eyebrow,
.home-contact .eyebrow {
  margin-bottom: 0.7rem;
}

.home-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.48rem;
}

.home-section__eyebrow::before {
  width: 0.9rem;
  height: 1.16rem;
  flex: 0 0 auto;
  background: url("/assets/images/erklaermarken/kontextklar-feder.svg") center / contain no-repeat;
  content: "";
}

.home-section__header h2,
.home-contact h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  text-wrap: balance;
}

.home-section__header h2 {
  max-width: 20ch;
}

.home-section__intro {
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.16rem);
  line-height: 1.75;
}

.home-section__intro > .detail-copy--first,
.home-card__body > :first-child,
.home-contact__body > .detail-copy--first {
  margin-top: 0;
}

.home-section__intro > .detail-copy--last,
.home-card__body > :last-child,
.home-contact__body > .detail-copy--last {
  margin-bottom: 0;
}

.home-section__intro > p > a:only-child {
  display: inline-flex;
  margin-top: 0.45rem;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 750;
}

.home-section__intro > p > a:only-child::after,
.home-card__body > p:last-child > a:only-child::after {
  content: "→";
  text-decoration: none;
}

.home-grid {
  display: grid;
  gap: 1rem;
}

.home-grid--principles {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.home-grid--solutions,
.home-grid--audiences {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-grid--examples,
.home-grid--steps,
.home-grid--knowledge {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-grid--freedom {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-card {
  --home-card-padding: clamp(1.25rem, 2.4vw, 2rem);

  position: relative;
  display: flex;
  min-width: 0;
  min-height: 16rem;
  padding: var(--home-card-padding);
  overflow: hidden;
  flex-direction: column;
}

.home-card:where(:not(.numbered-card)) {
  border: var(--numbered-card-border);
  border-radius: var(--radius);
  background: var(--numbered-card-surface);
  box-shadow: var(--numbered-card-shadow);
}

.home-card h3 {
  position: relative;
  z-index: 1;
  margin: 2.5rem 0 0.7rem;
  color: var(--ink);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 700;
  line-height: 1.32;
  text-wrap: balance;
}

.home-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.67;
}

.home-card__body > p {
  margin: 0 0 1rem;
}

.home-card__body > p:last-child {
  margin-top: auto;
}

.home-card__body > p:last-child > a:only-child {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 750;
}

.home-card__icon {
  width: 5.75rem;
  height: 5.75rem;
  object-fit: contain;
  pointer-events: none;
}

.home-card__visual {
  position: relative;
  z-index: 0;
  display: grid;
  margin: calc(0px - var(--home-card-padding)) calc(0px - var(--home-card-padding))
    var(--numbered-card-content-gap);
  overflow: hidden;
  place-items: center;
}

.home-card__visual:where(:not(.numbered-card__strip)) {
  min-height: 7.25rem;
  border-bottom: 1px solid rgb(17 41 39 / 10%);
  background:
    linear-gradient(90deg, transparent, rgb(15 103 93 / 7%) 50%, transparent),
    rgb(255 253 248 / 42%);
}

.home-card__visual:where(:not(.numbered-card__strip))::before,
.home-card__visual:where(:not(.numbered-card__strip))::after {
  position: absolute;
  top: 50%;
  width: calc(50% - 4.5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(15 103 93 / 22%));
  content: "";
}

.home-card__visual:where(:not(.numbered-card__strip))::before {
  left: 0;
}

.home-card__visual:where(:not(.numbered-card__strip))::after {
  right: 0;
  transform: scaleX(-1);
}

.home-card__visual ~ h3 {
  margin-top: 0;
}

.home-card--solutions,
.home-card--audiences {
  min-height: 19rem;
}

.home-card--solutions .home-card__icon,
.home-card--audiences .home-card__icon {
  width: 6.25rem;
  height: 6.25rem;
}

.home-card--solutions:nth-child(2),
.home-card--audiences:nth-child(2),
.home-card--knowledge:nth-child(2) {
  background: var(--surface-tint);
}

.home-card--solutions:nth-child(3),
.home-card--examples:nth-child(3) {
  background: #f8e0d6;
}

.home-card--principles {
  --home-card-padding: 1.35rem;

  min-height: 19rem;
  box-shadow: none;
}

.home-card--principles .home-card__visual {
  min-height: 6.5rem;
  margin-bottom: 1.25rem;
}

.home-card--principles .home-card__visual .home-card__icon {
  width: 4.5rem;
  height: 4.5rem;
}

.home-card--principles h3 {
  margin: 0 0 0.8rem;
  font-size: 1.08rem;
}

.home-card--principles .home-card__body {
  font-size: 0.94rem;
  line-height: 1.7;
}

.home-card--examples,
.home-card--knowledge {
  min-height: 22rem;
}

.home-card--examples .home-card__icon,
.home-card--knowledge .home-card__icon {
  width: 5.5rem;
  height: 5.5rem;
}

.home-card__status {
  position: absolute;
  z-index: 1;
  top: 1.35rem;
  left: 1.35rem;
  max-width: calc(100% - 8rem);
  padding: 0.32rem 0.58rem;
  border-radius: 999px;
  border: 1px solid var(--evidence-badge-border);
  background: var(--evidence-badge);
  color: var(--ink);
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1.35;
}

.home-card--examples .home-card__status {
  position: static;
  max-width: none;
  margin: -0.35rem 0 1rem;
  align-self: flex-start;
}

.home-card--freedom {
  min-height: 18rem;
  background:
    radial-gradient(circle at 100% 0%, rgb(217 239 130 / 25%), transparent 55%),
    rgb(255 253 248 / 76%);
  box-shadow: none;
}

.home-card--freedom h3 {
  margin-top: 0;
}

.home-card--steps {
  --home-card-padding: var(--numbered-card-padding);

  min-height: 19rem;
}

.home-section--contact {
  padding-block: clamp(4.5rem, 6.5vw, 6.5rem) clamp(2.5rem, 5vw, 4rem);
}

.home-contact {
  display: grid;
  padding: clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
  border: 1px solid rgb(17 41 39 / 14%);
  border-radius: var(--radius-large);
  background:
    radial-gradient(circle at 88% 20%, rgb(242 155 125 / 32%), transparent 24rem),
    linear-gradient(125deg, rgb(217 239 130 / 46%), rgb(255 253 248 / 90%));
  box-shadow: var(--shadow);
}

.home-contact__content {
  min-width: 0;
}

.home-contact h2 {
  max-width: 21ch;
}

.home-contact__body {
  max-width: 62ch;
  margin-top: 1.35rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.75;
}

.home-contact__persona {
  width: min(100%, 20rem);
  justify-self: end;
}

.home-contact__persona img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid rgb(17 41 39 / 14%);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 1.1rem 3rem rgb(17 41 39 / 12%);
}

.home-contact__action {
  min-height: 3.15rem;
  margin-top: 0.6rem;
  padding: 0.72rem 1.15rem;
  font-size: 0.9rem;
}
/* Evidence, sources and collections */

.evidence-labels {
  display: flex;
  margin: 1.5rem 0 0;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.evidence-labels div {
  display: flex;
  padding: 0.45rem 0.7rem;
  align-items: baseline;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.72rem;
}

.evidence-labels dt {
  color: var(--ink-soft);
}

.evidence-labels dd {
  margin: 0;
  color: var(--brand-dark);
  font-weight: 800;
}

.sources {
  display: grid;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  grid-template-columns: minmax(10rem, 0.5fr) minmax(0, 1fr);
  gap: 2rem;
  border-top: 1px solid var(--line);
}

.sources h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
}

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

.collection-section {
  padding-block: clamp(4.5rem, 6.5vw, 6.5rem) 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.card-grid--examples {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.example-card {
  position: relative;
  display: flex;
  min-height: 18rem;
  padding: 0;
  overflow: hidden;
  flex-direction: column;
}

.example-card__strip {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
}

.example-card__body {
  position: relative;
  display: flex;
  min-height: 0;
  padding: var(--numbered-card-content-gap) var(--numbered-card-padding)
    var(--numbered-card-padding);
  flex: 1 1 auto;
  flex-direction: column;
}

.example-card h3 {
  margin: 0 0 0.7rem;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
}

.example-card__body > p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.6;
}
/* Contact form injected by the same-origin Symfony runtime */

.contact-form {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgb(241 255 184 / 28%), transparent 32%),
    var(--surface);
  box-shadow: var(--shadow);
}

.contact-form__header {
  margin-bottom: 2rem;
}

.contact-form__header h3,
.contact-problem h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 400;
  line-height: 1.25;
  text-wrap: balance;
}

.contact-form__header p {
  max-width: 52ch;
  margin: 0.75rem 0 0;
  color: var(--ink-soft);
  font-size: 0.83rem;
  line-height: 1.6;
}

.contact-form__required-note > span,
.form-field label .required-marker {
  color: var(--error);
  font-size: inherit;
  font-weight: 750;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem 1.25rem;
}

.form-field {
  min-width: 0;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field label,
.form-field legend {
  display: block;
  margin-bottom: 0.48rem;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 750;
}

.form-field label span {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 500;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.78rem 0.9rem;
  border: 1.5px solid #8ca39c;
  border-radius: 0.55rem;
  background: rgb(255 255 255 / 88%);
  color: var(--ink);
}

.form-field :where(input, select, textarea):hover {
  border-color: var(--brand);
}

.form-field :where(input, select, textarea):focus-visible {
  border-color: var(--brand-dark);
}

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

.form-field :where(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error);
}

.field-hint {
  margin: 0.42rem 0 0;
  color: var(--ink-soft);
  font-size: 0.76rem;
  line-height: 1.55;
}

.field-error {
  margin: 0.35rem 0 0;
  color: var(--error);
  font-size: 0.78rem;
  font-weight: 750;
}

.form-errors {
  margin: 0 0 1.7rem;
  padding: 1rem 1.15rem;
  border-left: 0.35rem solid var(--error);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  background: #fae2db;
  color: #68180a;
}

.form-errors h4 {
  margin: 0;
  font-size: 1rem;
}

.form-errors ul {
  margin: 0.65rem 0 0;
  padding-left: 1.25rem;
}

.form-errors a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
}

.form-errors a:hover {
  background: var(--text-link-hover-background);
  text-decoration-color: currentcolor;
}

.contact-privacy-note {
  max-width: 62ch;
  margin: 0.2rem 0 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.65;
}

.submit-button,
.contact-form button[type="submit"] {
  display: inline-flex;
  min-height: 3.2rem;
  padding: 0.72rem 1.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border: 2px solid var(--brand-dark);
  border-radius: 999px;
  background: var(--brand-dark);
  color: white;
  cursor: pointer;
  font-weight: 780;
}

.submit-button:hover,
.contact-form button[type="submit"]:hover {
  border-color: var(--brand);
  background: var(--brand);
}

.contact-alternative {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.65;
}

.contact-problem {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgb(255 229 218 / 52%), transparent 34%),
    var(--surface);
  box-shadow: var(--shadow);
}

.contact-problem .content-detail__eyebrow {
  margin-bottom: 1rem;
  color: var(--error);
}

.contact-problem > p:not(.eyebrow) {
  margin: 1rem 0 0;
  color: var(--ink-soft);
  line-height: 1.7;
}

.contact-problem .button-link {
  margin-top: 1.5rem;
}

.contact-confirmation {
  padding-bottom: clamp(4.5rem, 7vw, 6.5rem);
}

.contact-confirmation__surface {
  display: grid;
  padding: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(13rem, 0.58fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  border: 1px solid rgb(17 41 39 / 8%);
  border-radius: calc(var(--radius) + 0.35rem);
  background:
    linear-gradient(120deg, rgb(237 255 167 / 74%), rgb(255 250 242 / 86%) 58%, rgb(255 226 211 / 72%));
  box-shadow: 0 1.5rem 3rem rgb(17 41 39 / 9%);
}

.contact-confirmation__copy h1 {
  margin: 0;
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  line-height: 1.13;
}

.contact-confirmation__copy > p:not(:last-child) {
  max-width: 50ch;
  margin: 1.25rem 0 0;
  color: var(--ink-soft);
  font-size: var(--intro-copy-size);
  line-height: var(--intro-copy-line-height);
}

.contact-confirmation__copy > p:last-child {
  margin: 1.7rem 0 0;
}

.contact-confirmation__surface .content-context-visual {
  width: 100%;
  min-height: 14rem;
  margin: 0;
}

.contact-confirmation__surface .content-context-visual img {
  width: min(100%, 15rem);
  height: auto;
}

.contact-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
/* Footer */

.site-footer {
  padding-block: clamp(3.5rem, 7vw, 6rem) 1.5rem;
  border-top: 1px solid rgb(17 41 39 / 10%);
  background: rgb(255 253 248 / 62%);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(18rem, 1.7fr) 1fr 1fr;
  gap: clamp(2rem, 7vw, 6rem);
}

.footer-brand img {
  width: 10.4rem;
  height: auto;
}

.footer-brand p {
  max-width: 34ch;
  margin: 1rem 0 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.footer-grid nav {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.45rem;
}

.footer-grid nav p {
  margin: 0 0 0.35rem;
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-grid nav a {
  min-height: 2rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  transition: color 0.15s ease;
}

.footer-grid nav a:hover,
.footer-bottom a:hover {
  background: transparent;
  color: var(--brand);
}

.footer-bottom {
  display: flex;
  margin-top: 3rem;
  padding-top: 1rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.2rem;
  border-top: 1px solid rgb(17 41 39 / 10%);
  color: var(--ink-soft);
  font-size: 0.72rem;
}
@media (max-width: 64rem) {
  .utility-page__intro--not-found {
    display: flex;
    flex-direction: column;
  }

  .utility-page__intro--not-found > .content-context-visual {
    align-self: start;
  }
  .content-detail .content-detail__section--split-content > .shell {
    display: flex;
    flex-direction: column;
  }

  .content-detail__section--split-content .content-detail__main-group,
  .content-detail__section--split-content .content-detail__marginal-group {
    width: 100%;
  }

  .content-detail__section--split-content .content-detail__marginal-group {
    margin-top: 1.75rem;
  }

  .content-figure--portrait {
    margin-top: 0;
  }

  .content-detail__intro--bottom-marginal {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    align-items: stretch;
  }

  .content-detail__intro--bottom-marginal > .content-detail__marginal {
    width: 100%;
  }

  .content-detail--bottom-marginals .content-detail__marginal-group > .detail-copy,
  .content-detail__intro--bottom-marginal > .content-detail__marginal > p {
    margin-top: 0;
    transform: none;
  }
  :root {
    --site-header-height: 4.8rem;
  }

  .brand {
    width: 9.4rem;
  }

  .nav-drawer > .menu-toggle {
    display: flex;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }

  .menu-toggle__icon,
  .menu-toggle__icon::before,
  .menu-toggle__icon::after {
    display: block;
    width: 1.6rem;
    height: 2px;
    background: currentcolor;
    content: "";
  }

  .menu-toggle__icon {
    position: relative;
  }

  .menu-toggle__icon::before,
  .menu-toggle__icon::after {
    position: absolute;
    left: 0;
  }

  .menu-toggle__icon::before {
    top: -0.4rem;
  }

  .menu-toggle__icon::after {
    top: 0.4rem;
  }

  .nav-drawer[open] .menu-toggle__icon {
    background: transparent;
  }

  .nav-drawer[open] .menu-toggle__icon::before {
    top: 0;
    rotate: 45deg;
  }

  .nav-drawer[open] .menu-toggle__icon::after {
    top: 0;
    rotate: -45deg;
  }

  .nav-surface {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    max-height: calc(100vh - 5rem);
    max-height: calc(100dvh - 5rem);
    padding: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: stretch;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid rgb(17 41 39 / 12%);
    border-radius: 0 0 1.2rem 1.2rem;
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .nav-drawer:not([open]) > .nav-surface {
    display: none;
  }

  .primary-nav {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  .primary-nav > a,
  .nav-group > summary,
  .nav-meta > a {
    display: flex;
    min-height: 3rem;
    padding: 0.72rem 0.25rem;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgb(17 41 39 / 10%);
    font-size: 0.94rem;
  }

  .primary-nav > a::after,
  .nav-group > summary::before {
    display: none;
  }

  .primary-nav > a[aria-current="page"],
  .primary-nav > a[data-current-branch="true"],
  .nav-group[data-active="true"] > summary {
    padding-left: 0.7rem;
    border-left: 0.22rem solid var(--brand);
    background: var(--surface-tint);
  }

  .nav-panel {
    position: static;
    width: auto;
    padding: 0.7rem 0 1rem;
    grid-template-columns: 1fr;
    border: 0;
    border-bottom: 1px solid rgb(17 41 39 / 10%);
    border-radius: 0;
    box-shadow: none;
  }

  .nav-panel__intro {
    display: none;
  }

  .nav-grid {
    grid-template-columns: 1fr;
  }

  .nav-grid > a:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .nav-grid a {
    min-height: 4.7rem;
    padding-left: 3.3rem;
    justify-content: center;
  }

  .nav-grid .nav-link__icon {
    top: 50%;
    right: auto;
    left: 0.25rem;
    width: 2.6rem;
    height: 2.6rem;
    translate: 0 -50%;
  }

  .nav-meta {
    display: flex;
    align-items: stretch;
    flex-direction: column;
  }

  .nav-meta a {
    color: var(--ink);
    text-decoration: none;
  }

  .explainer-figure--hero {
    width: min(100%, 54rem);
  }

  .content-detail__section > .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .content-detail__body,
  .content-detail__subsections,
  .content-detail__form {
    grid-column: 1;
  }

  .privacy-page__content .content-detail__section > .shell {
    grid-template-columns: minmax(12rem, 0.48fr) minmax(0, 1.12fr);
  }

  .privacy-page__content .content-detail__body,
  .privacy-page__content .content-detail__subsections {
    grid-column: 2;
  }

  .contact-page__form-section > .shell {
    grid-template-columns: minmax(14rem, 0.58fr) minmax(24rem, 1.12fr);
  }

  .contact-page__form-section .contact-page__guidance {
    grid-column: 1;
  }

  .contact-page__form-section .content-detail__form {
    grid-column: 2;
  }

  .content-detail__section--with-visual .content-context-visual {
    margin-bottom: 1.5rem;
  }

  .content-detail__section--key-list .content-detail__body {
    grid-template-columns: 1fr;
  }

  .content-detail__section--key-list .content-detail__body > p {
    grid-column: 1;
  }

  .content-detail__section--key-list.content-detail__section--with-visual > .shell {
    grid-template-columns: minmax(15rem, 0.75fr) minmax(24rem, 1.25fr);
  }

  .content-detail__section--visual-after-body:not(.content-detail__section--key-list) > .shell {
    grid-template-columns: minmax(15rem, 0.75fr) minmax(24rem, 1.25fr);
  }

  .content-detail__section--visual-after-body:not(.content-detail__section--key-list) .content-detail__body {
    grid-column: 2;
  }

  .content-detail__section--visual-after-body:not(.content-detail__section--key-list) .content-context-visual {
    grid-column: 1;
  }

  .content-detail__section--key-list.content-detail__section--with-visual .content-detail__body > p {
    grid-column: 2;
  }

  .content-detail__section--key-list.content-detail__section--visual-trailing-prose > .shell {
    grid-template-columns: minmax(24rem, 1.25fr) minmax(15rem, 0.75fr);
  }

  .content-detail__section--key-list.content-detail__section--visual-trailing-prose .content-detail__body > ul + p {
    grid-column: 1;
  }

  .content-detail__section--key-list.content-detail__section--visual-trailing-prose .content-context-visual {
    grid-column: 2;
  }

  .content-detail__section--split-prose > .shell,
  .content-detail__section--paired-prose > .shell {
    grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.65fr);
  }

  .content-detail__section--visual-left > .shell {
    grid-template-columns: minmax(15rem, 0.75fr) minmax(24rem, 1.25fr);
  }

  .content-detail__section--visual-right > .shell {
    grid-template-columns: minmax(24rem, 1.25fr) minmax(15rem, 0.75fr);
  }

  .content-detail__section--ordered-three .content-detail__body > ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .offer-detail__steps ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-hero__content {
    grid-template-columns: 1fr;
  }

  .home-hero__content h1 {
    grid-column: auto;
  }

  .home-hero__content > .detail-copy--marginal {
    max-width: 60ch;
    align-self: auto;
  }

  .home-grid--principles,
  .home-grid--examples,
  .home-grid--freedom,
  .home-grid--steps,
  .home-grid--knowledge {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 44rem) {
  .content-detail__intro--main-first > .content-detail__lead,
  .content-detail__intro--main-first > .content-detail__marginal {
    grid-column: auto;
    grid-row: auto;
  }
  :root {
    --intro-copy-size: 1.08rem;
    --intro-copy-line-height: 1.7;
    --numbered-card-padding: 1.25rem;
    --numbered-card-strip-height: 6rem;
    --numbered-card-content-gap: 1.35rem;
    --numbered-card-number-size: 3.25rem;
    --numbered-card-rule-width: calc(50% - 3.8rem);
    --page-orientation-height: 3.75rem;
  }

  body {
    font-size: 1rem;
  }

  .shell {
    width: min(calc(100% - 1.25rem), var(--shell));
  }

  .breadcrumbs {
    padding-top: 1rem;
  }

  .page-orientation__inner {
    gap: 0.2rem;
  }

  .page-position ol {
    width: max-content;
  }

  .page-position {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .page-position::-webkit-scrollbar {
    display: none;
  }

  .page-position li {
    flex: 0 0 auto;
    line-height: 1.25;
  }

  .page-position li:not(:first-child)::before {
    display: inline;
  }

  .page-position__root,
  .page-position__ancestor {
    font-size: 0.7rem;
  }

  .page-position__current {
    font-size: 0.76rem;
  }

  .page-position a,
  .page-position span {
    max-width: 12rem;
  }

  .page-orientation__control {
    min-height: 3rem;
    padding-inline: 0.55rem;
    gap: 0.3rem;
    font-size: 0.72rem;
  }

  .page-radar__trigger {
    min-height: 2.7rem;
    margin-block: 0.5rem;
  }

  .page-radar__label-long,
  .page-to-top__long {
    display: none;
  }

  .page-radar__label-short,
  .page-to-top__short {
    display: inline;
  }

  .page-assistant-launcher__label {
    display: none;
  }

  .page-radar__panel {
    right: 0.625rem;
    width: calc(100vw - 1.25rem);
    padding: 0;
  }

  .page-radar__heading {
    padding: 1rem;
    grid-template-columns: 2.55rem minmax(0, 1fr);
    gap: 0.75rem;
  }

  .page-radar__heading-mark {
    width: 2.55rem;
    height: 2.55rem;
  }

  .page-radar__heading-mark svg {
    width: 1.55rem;
    height: 1.55rem;
  }

  .page-radar__panel h2 {
    font-size: 1.13rem;
  }

  .page-radar__navigation {
    padding: 0.7rem 0.7rem 1rem;
  }

  .page-radar__tree .page-radar__tree {
    margin-left: 0.25rem;
    padding-left: 0.58rem;
  }

  .page-radar__tree .page-radar__tree > .page-radar__node::before {
    left: -0.58rem;
    width: 0.44rem;
  }

  .page-hero {
    padding-block: 2.8rem 3.7rem;
  }

  .prose h1,
  .page--home .prose h1 {
    font-size: clamp(2.45rem, 12.5vw, 4rem);
    line-height: 1.22;
  }

  .offer-detail-hero,
  .content-detail-hero {
    padding-block: 2.8rem 0;
  }

  .offer-detail-hero__title h1,
  .content-detail-hero__title h1 {
    overflow-wrap: normal;
    hyphens: none;
    line-height: 1.22;
  }

  .offer-detail-hero__title h1 {
    font-size: clamp(2rem, 10.5vw, 3rem);
  }

  .offer-detail__split,
  .offer-detail__split--marginal-left,
  .offer-detail__split--main-left {
    grid-template-columns: 1fr;
    gap: 1.3rem;
    align-items: stretch;
  }

  .offer-detail__marginal,
  .offer-detail__copy-pair > .detail-copy--marginal,
  .page--offer .content-detail__marginal {
    transform: none;
  }

  .offer-detail__split--marginal-left > .offer-detail__marginal,
  .offer-detail__split--marginal-left > .offer-detail__main,
  .offer-detail__split--main-left > .offer-detail__main,
  .offer-detail__split--main-left > .offer-detail__marginal,
  .offer-detail__split--marginal-left.offer-detail__copy-pair > .detail-copy,
  .offer-detail__split--main-left.offer-detail__copy-pair > .detail-copy {
    grid-row: auto;
    grid-column: auto;
  }

  .offer-detail__marginal,
  .offer-detail__copy-pair > .detail-copy--marginal {
    max-width: 50ch;
  }

  .offer-detail-hero .home-thought-divider,
  .content-detail-hero .home-thought-divider {
    margin-top: 2.75rem;
  }

  .offer-detail__section,
  .content-detail__section {
    padding-block: 4rem 0;
  }

  .offer-detail__heading,
  .content-detail__heading {
    margin-bottom: 2.2rem;
  }

  .offer-detail__heading h2,
  .offer-detail__contact h2 {
    font-size: clamp(1.9rem, 9vw, 2.65rem);
  }

  .offer-detail__section .home-thought-divider,
  .content-detail__section .home-thought-divider {
    margin-top: 3.5rem;
  }

  .offer-detail__steps ol,
  .offer-detail__related ul,
  .offer-detail__contact-card,
  .content-detail__contact-card {
    grid-template-columns: 1fr;
  }

  .offer-detail__steps li {
    min-height: 0;
    padding: 8.2rem 1.35rem 1.35rem;
  }

  .offer-detail__contact,
  .content-detail__contact {
    padding-block: 4rem 2rem;
  }

  .offer-detail__contact-card,
  .content-detail__contact-card {
    padding: 1.7rem;
    gap: 1.2rem;
    border-radius: var(--radius);
  }

  .offer-detail__contact-icon,
  .content-detail__contact-icon {
    width: min(55%, 11rem);
  }

  .cockpit-detail__illustration .explainer-figure img {
    height: 13rem;
    object-fit: cover;
    object-position: left center;
  }

  .cockpit-detail__illustration-hint {
    display: block;
    margin: 0.55rem 0 0;
    color: var(--ink-soft);
    font-size: 0.73rem;
    line-height: 1.5;
  }

  .explainer-figure:not(.explainer-figure--fit-width)>div{overflow-x:auto}
  .explainer-figure:not(.explainer-figure--fit-width)>div img{width:44rem;max-width:none}

  .content-detail-hero__title h1 {
    font-size: clamp(1.85rem, 9.25vw, 3rem);
  }

  .content-detail__intro,
  .utility-page__intro {
    grid-template-columns: 1fr;
    gap: 1.3rem;
  }

  .utility-page__intro--contact .utility-page__intro-copy h1,
  .utility-page__intro--imprint .utility-page__intro-copy h1,
  .utility-page__intro--privacy .utility-page__intro-copy h1 {
    grid-row: 1;
    grid-column: 1;
  }

  .utility-page__intro--contact .utility-page__intro-copy > .detail-copy--main,
  .utility-page__intro--imprint .utility-page__intro-copy > .detail-copy--main-leading,
  .utility-page__intro--privacy .utility-page__intro-copy > .detail-copy--main-leading {
    margin-top: 1.6rem;
    grid-row: 2;
    grid-column: 1;
  }

  .utility-page__intro--contact > .content-context-visual {
    min-height: 13rem;
    margin-top: 0.5rem;
    grid-row: 3;
    grid-column: 1;
  }

  .utility-page__intro--contact > .content-context-visual img {
    width: min(78%, 13rem);
  }

  .utility-page__intro--imprint .utility-page__intro-copy > .detail-copy,
  .utility-page__intro--privacy .utility-page__intro-copy > .detail-copy {
    grid-column: 1;
  }

  .utility-page__intro--imprint .utility-page__intro-copy > .detail-copy--main-trailing,
  .utility-page__intro--privacy .utility-page__intro-copy > .detail-copy--main-trailing {
    grid-row: 3;
  }

  .utility-page__intro--imprint > .content-context-visual {
    width: min(100%, 14rem);
    min-height: 11rem;
    margin-top: 1.5rem;
    grid-row: 4;
    grid-column: 1;
    justify-items: start;
  }

  .utility-page__intro--imprint > .content-context-visual img {
    width: min(100%, 11.5rem);
  }

  .utility-page__intro--privacy > .content-context-visual {
    width: min(100%, 11rem);
    min-height: 8.5rem;
    margin-top: 1.2rem;
    grid-row: 4;
    grid-column: 1;
    justify-items: start;
  }

  .utility-page__intro--privacy > .content-context-visual img {
    width: min(100%, 7.5rem);
  }

  .privacy-page__content {
    padding-block: 3.75rem 4.5rem;
  }

  .privacy-page__content .content-detail__section > .shell {
    grid-template-columns: 1fr;
    padding-block: 2.7rem;
  }

  .privacy-page__content .content-detail__heading,
  .privacy-page__content .content-detail__body,
  .privacy-page__content .content-detail__subsections {
    grid-column: 1;
  }

  .privacy-page__content .content-detail__heading {
    margin-bottom: 1.4rem;
  }

  .privacy-page__content .content-detail__heading h2 {
    font-size: clamp(1.45rem, 7.5vw, 1.85rem);
  }

  .privacy-page__content .content-detail__section--privacy-assistant .content-detail__heading {
    grid-row: 1;
  }

  .privacy-page__content .content-detail__section--privacy-assistant .content-detail__body {
    grid-row: 2;
  }

  .privacy-page__content .content-detail__section--privacy-assistant .content-detail__subsections {
    grid-row: 3;
  }

  .privacy-page__content .content-detail__section--privacy-assistant .content-context-visual {
    width: min(100%, 10rem);
    min-height: 7.5rem;
    margin: 2rem 0 0;
    grid-row: 4;
    grid-column: 1;
  }

  .privacy-page__content .content-detail__section--privacy-assistant .content-context-visual img {
    width: min(68%, 6.5rem);
  }

  .legal-page__content {
    padding-block: 4rem;
  }

  .legal-page__details {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .legal-page__section--contact,
  .legal-page__section--tax,
  .legal-page__section--responsibility {
    margin-top: 0;
    grid-row: auto;
    grid-column: 1;
  }

  .legal-page__section .content-detail__heading h2 {
    font-size: clamp(1.85rem, 8vw, 2.35rem);
  }

  .page--offer .content-detail__intro {
    align-items: stretch;
  }

  .content-detail__intro--single-main > .content-detail__lead,
  .utility-page__intro > h1,
  .utility-page__intro > :not(h1) {
    grid-column: auto;
  }

  .content-detail__marginal {
    max-width: 50ch;
  }

  .content-detail__intro--visual-after-copy > .content-detail__lead {
    grid-row: 1;
  }

  .content-detail__intro--visual-after-copy > .content-detail__marginal--visual {
    grid-row: 2;
  }

  .content-detail__intro--promoted-visual > .content-detail__marginal {
    display: contents;
  }

  .content-detail__intro--promoted-visual > .content-detail__marginal > p {
    grid-row: 1;
    grid-column: 1;
  }

  .content-detail__intro--promoted-visual > .content-detail__lead {
    grid-row: 2;
    grid-column: 1;
  }

  .content-detail__intro--promoted-visual > .content-detail__marginal > .content-context-visual {
    width: 100%;
    min-height: 18rem;
    margin: 0;
    grid-row: 3;
    grid-column: 1;
  }

  .content-detail__intro--promoted-visual.content-detail__intro--has-evidence > .content-detail__marginal > .evidence-labels {
    margin-top: 0;
    grid-row: 2;
    grid-column: 1;
  }

  .content-detail__intro--promoted-visual.content-detail__intro--has-evidence > .content-detail__lead {
    grid-row: 3;
  }

  .content-detail__intro--promoted-visual.content-detail__intro--has-evidence > .content-detail__marginal > .content-context-visual {
    grid-row: 4;
  }

  .content-detail__illustration {
    margin-top: 4rem;
  }

  .contact-page__form-section > .shell {
    grid-template-columns: 1fr;
  }

  .contact-page__form-section .contact-page__guidance {
    grid-row: 2;
    grid-column: 1;
  }

  .contact-page__form-section .content-detail__form {
    margin-top: 2.5rem;
    grid-row: 3;
    grid-column: 1;
  }

  .content-detail__heading h2,
  .content-detail__contact h2 {
    overflow-wrap: normal;
    font-size: clamp(1.7rem, 8.5vw, 2.65rem);
    hyphens: none;
  }

  .content-detail__section--ordered .content-detail__body > ol,
  .content-detail__section--key-list .content-detail__body > ul,
  .content-detail__section--link-list .content-detail__body > ul,
  .content-detail__section--related .content-detail__body > ul,
  .content-detail__section--subnavigation .content-detail__body > ul,
  .content-detail__section--subsection-grid .content-detail__subsections {
    grid-template-columns: 1fr;
  }

  .content-detail__section--subsection-grid .content-detail__subsection:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .content-detail__section--subsection-grid .content-detail__subsection:last-child {
    border-bottom: 1px solid var(--line);
  }

  .content-context-visual {
    width: 11rem;
    min-height: 7.5rem;
  }

  .content-context-visual img {
    width: 6.5rem;
    height: 6.5rem;
  }

  .content-detail__section--split-prose .content-detail__body > .detail-copy--main-leading {
    grid-row: 2;
    grid-column: 1;
  }

  .content-detail__section--split-prose .content-context-visual {
    height: 14rem;
    min-height: 14rem;
    margin: 1.5rem 0;
    grid-row: 3;
    grid-column: 1;
  }

  .content-detail__section--split-prose .content-detail__body > .detail-copy--marginal {
    grid-row: 4;
    grid-column: 1;
    transform: none;
  }

  .content-detail__section--split-prose .content-detail__body > .detail-copy--main-trailing {
    grid-row: 5;
    grid-column: 1;
  }

  .content-detail__section--split-prose > .shell,
  .content-detail__section--paired-prose > .shell,
  .content-detail__section--key-list.content-detail__section--with-visual > .shell,
  .content-detail__section--visual-after-body:not(.content-detail__section--key-list) > .shell,
  .content-detail__section--visual-left > .shell,
  .content-detail__section--visual-right > .shell {
    grid-template-columns: 1fr;
  }

  .content-detail__section--key-list.content-detail__section--with-visual .content-detail__body {
    display: grid;
    grid-row: auto;
    grid-column: 1;
  }

  .content-detail__section--key-list.content-detail__section--with-visual .content-detail__body > p {
    grid-column: 1;
  }

  .content-detail__section--key-list.content-detail__section--with-visual .content-context-visual {
    width: 100%;
    min-height: 13rem;
    margin: 1.5rem 0 0;
    grid-row: auto;
    grid-column: 1;
  }

  .content-detail__section--key-list.content-detail__section--with-visual .content-context-visual img,
  .content-detail__section--key-list.content-detail__section--with-visual .content-context-visual--expanded img {
    width: min(78%, 12rem);
    max-width: none;
  }

  .content-detail__section--visual-trailing-prose .content-detail__body > ul,
  .content-detail__section--visual-trailing-prose .content-detail__body > ul + p {
    grid-row: auto;
  }

  .content-detail__section--visual-trailing-prose .content-detail__body > ul + p {
    margin-top: 2.5rem;
  }

  .content-detail__section--key-list.content-detail__section--visual-trailing-prose .content-context-visual {
    width: min(78%, 12rem);
    height: 7.4625rem;
    min-height: 0;
    margin: 1.5rem auto 0;
    overflow: hidden;
  }

  .content-detail__section--key-list.content-detail__section--visual-trailing-prose .content-context-visual img {
    width: 100%;
    translate: -50% -18.125%;
  }

  .content-detail__section--visual-after-body:not(.content-detail__section--key-list) .content-detail__body {
    grid-row: 2;
    grid-column: 1;
  }

  .content-detail__section--visual-after-body:not(.content-detail__section--key-list) .content-context-visual {
    height: 6.17rem;
    min-height: 0;
    margin: 1.5rem 0 0;
    grid-row: 3;
    grid-column: 1;
  }

  .content-detail__section--visual-after-body:not(.content-detail__section--key-list) .content-context-visual img {
    width: min(78%, 14rem);
    translate: -50% -21.5625%;
  }

  .content-detail__section--paired-prose .content-detail__body > .detail-copy--main {
    grid-row: 2;
    grid-column: 1;
  }

  .content-detail__section--paired-prose .content-detail__body > .detail-copy--marginal {
    margin-top: 1.3rem;
    grid-row: 3;
    grid-column: 1;
    transform: none;
  }

  .content-detail__section--visual-prose .content-detail__body {
    grid-row: 2;
    grid-column: 1;
  }

  .content-detail__section--visual-prose .content-context-visual {
    min-height: 14rem;
    margin: 1.5rem 0 0;
    grid-row: 3;
    grid-column: 1;
  }

  .content-detail__section--visual-prose.content-detail__section--has-subsections
    .content-detail__subsections {
    margin-top: 2rem;
    grid-row: 3;
    grid-column: 1;
  }

  .content-detail__section--visual-prose.content-detail__section--has-subsections
    .content-context-visual {
    grid-row: 4;
  }

  .content-detail__section--visual-compact .content-context-visual {
    min-height: 9rem;
  }

  .content-detail__section--visual-compact .content-context-visual img {
    width: min(82%, 12rem);
  }

  .helper-operating-guide .content-detail__section--visual-prose .content-context-visual {
    min-height: 11rem;
  }

  .helper-operating-guide .content-detail__section--visual-prose .content-context-visual img {
    width: min(100%, 9.5rem);
  }

  .helper-operating-guide .content-detail__section--visual-prose[aria-labelledby="ansicht-steuern"]
    .content-context-visual {
    min-height: 15rem;
  }

  .helper-operating-guide .content-detail__section--visual-prose[aria-labelledby="ansicht-steuern"]
    .content-context-visual img {
    width: min(100%, 22rem);
  }

  .content-detail__section--visual-prose .content-context-visual--expanded img {
    width: min(120%, 24rem);
    max-width: none;
  }

  .content-detail__section--visual-prose .content-context-visual--wide {
    min-height: 10rem;
  }

  .content-detail__section--visual-prose .content-context-visual--wide img {
    width: min(100%, 28rem);
  }

  .content-detail-hero .content-context-visual,
  .content-detail-hero .content-detail__marginal--visual .content-context-visual {
    width: 100%;
    min-height: 18rem;
  }

  .content-detail-hero .content-context-visual img,
  .content-detail-hero .content-detail__marginal--visual .content-context-visual img {
    width: min(96%, 18rem);
    height: auto;
  }

  .content-detail__section--ordered .content-detail__body > ol > li {
    min-height: 0;
    padding:
      calc(var(--numbered-card-strip-height) + var(--numbered-card-content-gap))
      var(--numbered-card-padding) var(--numbered-card-padding);
  }

  .content-detail__section--link-list .content-detail__body > ul > li:nth-last-child(-n + 2),
  .content-detail__section--related .content-detail__body > ul > li:nth-last-child(-n + 2),
  .content-detail__section--subnavigation .content-detail__body > ul > li:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .content-detail__section--link-list .content-detail__body > ul > li:last-child,
  .content-detail__section--related .content-detail__body > ul > li:last-child,
  .content-detail__section--subnavigation .content-detail__body > ul > li:last-child {
    border-bottom: 1px solid var(--line);
  }

  .content-detail__section--key-list .content-detail__body > ul > li:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .content-detail__section--key-list .content-detail__body > ul > li:last-child {
    border-bottom: 1px solid var(--line);
  }

  .contact-form {
    padding: 1.3rem;
  }

  .contact-confirmation__surface {
    padding: 1.7rem;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .contact-confirmation {
    padding-bottom: 4rem;
  }

  .contact-confirmation__copy h1 {
    overflow-wrap: normal;
    font-size: clamp(2rem, 10vw, 3rem);
    hyphens: none;
  }

  .contact-confirmation__surface .content-context-visual {
    min-height: 10rem;
  }

  .contact-confirmation__surface .content-context-visual img {
    width: min(65%, 11rem);
  }

  .utility-page__intro > h1 + * {
    margin-top: 1.6rem;
  }

  .home-hero {
    padding-block: 3rem 0;
  }

  .home-hero__content > .detail-copy,
  .home-section__header--split .home-section__intro > .detail-copy {
    margin-top: 1.6rem;
    align-self: stretch;
  }

  .home-process {
    display: none;
  }

  .home-thought-divider {
    margin-top: 2.2rem;
  }

  .home-hero .home-thought-divider {
    margin-top: 2.75rem;
  }

  .home-thought-divider__pen {
    width: 5.5rem;
  }

  .home-section {
    padding-block: 4rem 0;
  }

  .home-hero + .home-section {
    padding-top: 4rem;
  }

  .home-section .home-thought-divider {
    margin-top: 3.5rem;
  }

  .home-section__header {
    margin-bottom: 2.2rem;
    grid-template-columns: 1fr;
    gap: 1.3rem;
  }

  .home-section__header--split {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .home-section__header--split .home-section__heading,
  .home-section__header--split .home-section__intro > .detail-copy {
    grid-column: auto;
  }

  .home-section__intro > .detail-copy--marginal {
    max-width: 50ch;
  }

  .home-section__header h2,
  .home-contact h2 {
    font-size: clamp(1.9rem, 9vw, 2.65rem);
  }

  .home-grid--principles,
  .home-grid--solutions,
  .home-grid--audiences,
  .home-grid--examples,
  .home-grid--freedom,
  .home-grid--steps,
  .home-grid--knowledge {
    grid-template-columns: 1fr;
  }

  .home-card {
    min-height: 0;
  }

  .home-card--solutions,
  .home-card--audiences,
  .home-card--examples,
  .home-card--knowledge {
    padding-top: var(--home-card-padding);
  }

  .home-card__visual:where(:not(.numbered-card__strip)) {
    min-height: 6rem;
  }

  .home-card__visual .home-card__icon {
    width: 4.8rem;
    height: 4.8rem;
  }

  .home-card__visual:where(:not(.numbered-card__strip))::before,
  .home-card__visual:where(:not(.numbered-card__strip))::after {
    width: calc(50% - 3.8rem);
  }

  .home-contact {
    padding: 1.7rem;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    border-radius: var(--radius);
  }

  .home-contact__persona {
    width: min(55%, 11rem);
  }

  .home-section--contact {
    padding-bottom: 2rem;
  }

  .article-content h2 {
    margin-top: 3rem;
    font-size: 1.8rem;
  }

  .explainer-figure a {
    border-radius: 0.85rem;
  }

  .explainer-figure figcaption {
    font-size: 0.73rem;
  }

  .sources {
    grid-template-columns: 1fr;
  }

  .card-grid,
  .form-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .form-field--full,
  .footer-brand {
    grid-column: auto;
  }

  .example-card {
    min-height: 0;
  }

}

@media (max-height: 32rem) {
  :root {
    --page-orientation-height: 0rem;
    --sticky-content-offset: calc(var(--site-header-height) + 1rem);
  }

  .page-orientation {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .content-detail__contact,
  .breadcrumbs,
  .page-orientation {
    display: none;
  }

  body {
    background: white;
  }

  .page-hero,
  .home-section {
    padding-block: 1rem;
  }
}