/* Forttrieb Studio — Einheitliches Designsystem
   Fundament: NOWIK Designbasis 0.17.1 (Nowik Sans, monochromes System, ruhige Bewegung),
   eigenständig adaptiert für Forttrieb Studio. */

@font-face {
  font-family: "Nowik Sans";
  src: url("fonts/NowikSans-Variable.woff2?v=8c652b2369") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --ft-canvas: #0c0c0d;
  --ft-surface: #141416;
  --ft-surface-raised: #1b1b1e;
  --ft-surface-well: #101012;
  --ft-light-canvas: #ececea;
  --ft-light-surface: #f7f7f5;
  --ft-light-border: #c8c8c4;
  --ft-light-text: #111112;
  --ft-light-muted: #4f4f52;
  --ft-text: #f4f4f3;
  --ft-text-secondary: #a6a6ab;
  --ft-text-muted: #8c8c92;
  --ft-border: #2a2a2e;
  --ft-border-strong: #45454b;
  --ft-inverse: #f0f0ee;
  --ft-on-inverse: #0e0e10;
  --ft-inverse-hover: #ffffff;
  --ft-focus: #ffffff;

  --ft-font: "Nowik Sans", system-ui, -apple-system, sans-serif;
  --ft-radius-sm: 0.375rem;
  --ft-radius-md: 0.5rem;
  --ft-radius-lg: 0.625rem;
  --ft-radius-pill: 999px;
  --ft-target: 2.75rem;
  --ft-max: 88rem;
  --ft-reading: 65ch;
  --ft-header-h: 4.5rem;

  --ft-ease: cubic-bezier(0.32, 0, 0.2, 1);
  --ft-fast: 160ms;
  --ft-med: 280ms;

  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ft-header-h) + 1.5rem);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ft-canvas);
  color: var(--ft-text);
  font: 400 1rem / 1.6 var(--ft-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1 0 auto;
}

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

h1,
h2,
h3,
h4 {
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}

:is(a, button, summary):focus-visible {
  outline: 2px solid var(--ft-focus);
  outline-offset: 4px;
  border-radius: 3px;
}

::selection {
  background: var(--ft-inverse);
  color: var(--ft-on-inverse);
}

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

/* Skip Link */
.skip-link {
  position: fixed;
  z-index: 200;
  inset-block-start: 0.75rem;
  inset-inline-start: 1rem;
  padding: 0.65rem 1.1rem;
  border-radius: var(--ft-radius-sm);
  background: var(--ft-inverse);
  color: var(--ft-on-inverse);
  font-size: 0.875rem;
  font-weight: 500;
  transform: translateY(-220%);
  transition: transform var(--ft-fast) var(--ft-ease);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Container */
.wrap {
  inline-size: min(calc(100% - 6rem), var(--ft-max));
  margin-inline: auto;
}

/* Typography Utilities */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ft-text-muted);
}

.arrow {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: none;
  transition: transform var(--ft-fast) var(--ft-ease);
}

/* Sticky Studio Header */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: rgb(12 12 13 / 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--ft-border);
}

.header-inner {
  inline-size: min(calc(100% - 6rem), var(--ft-max));
  margin-inline: auto;
  min-block-size: var(--ft-header-h);
  display: flex;
  align-items: safe center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand-link {
  display: inline-flex;
  gap: 0.75rem;
  min-block-size: var(--ft-target);
  align-items: center;
  flex: none;
}

.brand-mark {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
}

.brand-dot {
  display: inline-block;
  inline-size: 0.34em;
  block-size: 0.34em;
  background: currentColor;
}

.brand-sub {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ft-text-secondary);
  padding-inline-start: 0.75rem;
  border-inline-start: 1px solid var(--ft-border);
}

.brand-link:is([aria-current="page"], [aria-current="true"]) .brand-sub {
  color: var(--ft-text);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.3rem;
}

.site-nav {
  display: flex;
  align-items: center;
}

.menu-button {
  display: none;
  align-items: center;
  gap: 0.65rem;
  min-block-size: var(--ft-target);
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--ft-border-strong);
  border-radius: var(--ft-radius-sm);
  background: var(--ft-surface);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.menu-glyph {
  position: relative;
  inline-size: 0.875rem;
  block-size: 0.875rem;
}

.menu-glyph::before,
.menu-glyph::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 1.5px;
  background: currentColor;
  transition: transform var(--ft-fast) var(--ft-ease), top var(--ft-fast) var(--ft-ease);
}

.menu-glyph::before {
  inset-block-start: 0.25rem;
}

.menu-glyph::after {
  inset-block-start: 0.5625rem;
}

.menu-button[aria-expanded="true"] .menu-glyph::before {
  inset-block-start: 0.40625rem;
  transform: rotate(45deg);
}

.menu-button[aria-expanded="true"] .menu-glyph::after {
  inset-block-start: 0.40625rem;
  transform: rotate(-45deg);
}

.site-menu {
  list-style: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-menu a {
  min-block-size: var(--ft-target);
  padding-inline: 0.85rem;
  border-radius: var(--ft-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  font-weight: 450;
  color: var(--ft-text-secondary);
  transition: color var(--ft-fast) var(--ft-ease), background var(--ft-fast) var(--ft-ease);
}

.site-menu a:hover {
  color: var(--ft-text);
  background: var(--ft-surface);
}

.site-menu a:is([aria-current="page"], [aria-current="true"]) {
  color: var(--ft-text);
  background: transparent;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.32rem;
}

.site-menu li.nav-cta {
  margin-inline-start: 0.75rem;
}

.site-menu li.nav-cta a {
  border: 1px solid var(--ft-border-strong);
  color: var(--ft-text);
  padding-inline: 0.95rem;
}

.site-menu li.nav-cta a:hover {
  border-color: var(--ft-inverse);
  background: var(--ft-surface-raised);
}

/* Buttons & Action Links */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-block-size: 3.125rem;
  padding: 0.75rem 1.2rem;
  border-radius: var(--ft-radius-sm);
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--ft-fast) var(--ft-ease), border-color var(--ft-fast) var(--ft-ease), color var(--ft-fast) var(--ft-ease);
}

.btn--primary {
  background: var(--ft-inverse);
  color: var(--ft-on-inverse);
}

.btn--primary:hover {
  background: var(--ft-inverse-hover);
}

.btn--secondary {
  background: transparent;
  border-color: var(--ft-border-strong);
  color: var(--ft-text);
}

.btn--secondary:hover {
  background: var(--ft-surface-raised);
  border-color: var(--ft-text-secondary);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-block-size: var(--ft-target);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ft-text);
  transition: color var(--ft-fast) var(--ft-ease);
}

.text-link--muted {
  color: var(--ft-text-secondary);
}

.text-link--muted:hover {
  color: var(--ft-text);
}

:is(.btn, .text-link, .ledger-link, .register-row a):hover .arrow {
  transform: translateX(3px);
}

:is(.btn, .text-link, .register-row a):hover .arrow--diag {
  transform: translate(2px, -2px);
}

/* Status Pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--ft-border-strong);
  border-radius: var(--ft-radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ft-text-secondary);
  white-space: nowrap;
}

.status-pill::before {
  content: "";
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.status-pill--live {
  color: var(--ft-text);
  border-color: #63636b;
}

/* Hero (Homepage) */
.hero {
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 0;
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block-end: 2rem;
  border-block-end: 1px solid var(--ft-border);
}

.hero-edition {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ft-text-muted);
}

.hero h1 {
  font-size: clamp(2.75rem, 6.8vw, 6.25rem);
  font-weight: 400;
  line-height: 1.06;
  margin-block: clamp(2.25rem, 4.5vw, 3.75rem) clamp(2rem, 3.5vw, 3rem);
}

.hero h1 span {
  color: var(--ft-text-muted);
}

.hero-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}

.hero-lead {
  max-inline-size: 36rem;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--ft-text-secondary);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: balance;
  gap: 0.75rem;
}

/* Architectural Sparten Index Bar under Hero */
.sparten-ledger {
  margin-block-start: clamp(3rem, 5.5vw, 4.75rem);
  border-block: 1px solid var(--ft-border);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ledger-link {
  padding: 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-inline-size: 0;
  border-inline-start: 1px solid var(--ft-border);
  transition: background var(--ft-fast) var(--ft-ease);
}

.ledger-link:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.ledger-link:last-child {
  padding-inline-end: 0;
}

.ledger-link:hover {
  background: var(--ft-surface);
  padding-inline: 1.25rem;
}

.ledger-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--ft-text-muted);
}

.ledger-name {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ft-text);
}

.ledger-role {
  font-size: 0.8125rem;
  color: var(--ft-text-secondary);
}

/* Section Rhythm & Headers */
.section {
  padding-block-start: clamp(5rem, 8vw, 8rem);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) 2.2fr;
  gap: 3rem;
  align-items: start;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}

.section-head > .eyebrow {
  padding-block-start: 0.55rem;
}

.section-head h2 {
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  line-height: 1.16;
}

.section-head h2 span {
  color: var(--ft-text-muted);
}

.section-intro {
  margin-block-start: 1.25rem;
  max-inline-size: 40rem;
  font-size: 1rem;
  color: var(--ft-text-secondary);
}

/* Four works in a balanced two-column grid. */
.sparten-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.75rem;
  row-gap: 4rem;
}

.sparte-card {
  min-inline-size: 0;
  grid-row: span 6;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  grid-template-rows: subgrid;
  row-gap: 0;
}

/* Unified Monochrome Visual Stages */
.stage {
  aspect-ratio: 16 / 10;
  border-radius: var(--ft-radius-lg);
  border: 1px solid var(--ft-border);
  background: var(--ft-surface);
  overflow: clip;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem 1.375rem;
}

.stage--stone {
  background: #deddd7;
  border-color: #323236;
  color: #151516;
}

.stage--studio {
  background: #e4e4e2;
  border-color: #323236;
  color: #141416;
  padding: 1.125rem 1.375rem;
}

.stage--obsidian {
  background: #141416;
}

.stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  z-index: 2;
}

.stage-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  opacity: 0.75;
  z-index: 2;
}

/* Stage 01: Books (Seitenwerk) */
.stage-books {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding-block: 0.5rem;
  min-block-size: 0;
}

.stage-books img {
  block-size: 100%;
  max-block-size: 12.5rem;
  inline-size: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 3px 6px 6px 3px;
  border: 1px solid rgb(0 0 0 / 0.14);
  transition: transform var(--ft-med) var(--ft-ease);
}

.stage-books img:first-child {
  transform: rotate(-4deg);
}

.stage-books img:last-child {
  transform: rotate(4deg);
}

.sparte-card:hover .stage-books img:first-child {
  transform: rotate(-6deg) translateY(-3px);
}

.sparte-card:hover .stage-books img:last-child {
  transform: rotate(6deg) translateY(-3px);
}

/* Stage 02: Ghostwriter Manuscript Architecture */
.stage-manuscript {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.625rem;
  padding-block: 0.5rem;
}

.ms-step {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--ft-radius-sm);
  border: 1px solid var(--ft-border);
  background: var(--ft-canvas);
  font-size: 0.8125rem;
}

.ms-step--active {
  background: var(--ft-inverse);
  color: var(--ft-on-inverse);
  border-color: var(--ft-inverse);
}

.ms-label {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}

.ms-text {
  font-weight: 500;
  overflow: clip;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-tag {
  font-size: 0.6875rem;
  opacity: 0.75;
}

/* Stage 03: Kleinwerk / Mundwerk m| Signet & Voice */
.stage-kleinwerk {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem 1rem;
  margin-block: 0.5rem;
  border-radius: var(--ft-radius-md);
  border: 1px solid var(--ft-border);
  background: var(--ft-canvas);
}

.mw-signet {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: var(--ft-radius-md);
  border: 1px solid var(--ft-border-strong);
  background: var(--ft-surface);
  display: grid;
  place-items: center;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.mw-signet i {
  font-style: normal;
  display: inline-block;
  inline-size: 2px;
  block-size: 1.05em;
  background: var(--ft-text);
  margin-inline-start: 2px;
  vertical-align: -0.12em;
}

.mw-flow {
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.mw-bars {
  display: flex;
  align-items: center;
  gap: 4px;
  block-size: 1.75rem;
}

.mw-bars span {
  display: block;
  inline-size: 3px;
  block-size: 0.45rem;
  border-radius: 2px;
  background: var(--ft-text-secondary);
}

.mw-bars span:nth-child(4n + 1) {
  block-size: 0.65rem;
}

.mw-bars span:nth-child(4n + 2) {
  block-size: 1.25rem;
  background: var(--ft-text);
}

.mw-bars span:nth-child(4n + 3) {
  block-size: 0.85rem;
}

.mw-bars span:nth-child(5n) {
  block-size: 1.55rem;
  background: var(--ft-text);
}

.mw-output {
  font-size: 0.875rem;
  color: var(--ft-text);
  font-weight: 450;
}

/* Stage 04: Macchina Vehicle Stage */
.stage-car {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-block-size: 0;
  margin-block: 0.5rem;
  border-radius: var(--ft-radius-sm);
  overflow: clip;
  border: 1px solid rgb(0 0 0 / 0.1);
}

.stage-car img {
  inline-size: 100%;
  block-size: 100%;
  max-block-size: 13.5rem;
  object-fit: cover;
  object-position: center 58%;
}

/* Sparte Card Body */
.sparte-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block: 1.375rem 0.85rem;
}

.sparte-card h3 {
  font-size: clamp(1.625rem, 2.3vw, 2.125rem);
  font-weight: 500;
}

.sparte-claim {
  font-size: 1.125rem;
  color: var(--ft-text-secondary);
  margin-block-start: 0.45rem;
}

.sparte-body {
  margin-block-start: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.sparte-desc {
  margin-block: 0.95rem 1.25rem;
  font-size: 0.96875rem;
  color: var(--ft-text-secondary);
  max-inline-size: var(--ft-reading);
}

/* Native Details / Steckbrief (Accordion Guide Compliant) */
.spec-disclosure {
  align-self: start;
  inline-size: 100%;
  border-block: 1px solid var(--ft-border);
}

.spec-disclosure summary {
  list-style: none;
  cursor: pointer;
  min-block-size: 3.125rem;
  padding-block: 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ft-text);
}

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

.spec-marker {
  position: relative;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  flex: none;
}

.spec-marker::before,
.spec-marker::after {
  content: "";
  position: absolute;
  background: currentColor;
  inset-block-start: 0.4rem;
  inset-inline-start: 0.0625rem;
  inline-size: 0.75rem;
  block-size: 1.25px;
  transition: transform var(--ft-fast) var(--ft-ease);
}

.spec-marker::after {
  transform: rotate(90deg);
}

.spec-disclosure[open] > summary .spec-marker::after {
  transform: rotate(0deg);
}

.spec-disclosure::details-content {
  interpolate-size: allow-keywords;
  overflow: clip;
  contain: layout;
}

.spec-disclosure:not([open])::details-content {
  block-size: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .spec-disclosure::details-content {
    transition: block-size var(--ft-med) var(--ft-ease), content-visibility var(--ft-med) var(--ft-ease), display var(--ft-med) var(--ft-ease);
    transition-behavior: allow-discrete;
  }
}

.spec-content {
  padding-block: 0.25rem 1.25rem;
  font-size: 0.875rem;
  color: var(--ft-text-secondary);
}

.spec-list {
  display: grid;
  gap: 0.6rem;
}

.spec-list > div {
  display: grid;
  grid-template-columns: 7.25rem 1fr;
  gap: 1rem;
  align-items: baseline;
}

.spec-list dt {
  color: var(--ft-text);
  font-weight: 500;
  font-size: 0.8125rem;
}

.spec-list dd {
  color: var(--ft-text-secondary);
}

.sparte-actions {
  margin-block-start: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-wrap: balance;
  gap: 0.5rem 1.5rem;
}

/* Light Architectural Contrast Band: Gesamtregister aller Sparten & Produkte */
.light-band {
  margin-block-start: clamp(5rem, 8vw, 8rem);
  padding-block: clamp(4rem, 7vw, 6.25rem);
  background: var(--ft-light-canvas);
  color: var(--ft-light-text);
}

.light-band .eyebrow {
  color: var(--ft-light-muted);
}

.light-band .section-head h2 span {
  color: #59595e;
}

.light-band .section-intro {
  color: var(--ft-light-muted);
}

.light-band :is(a, button, summary):focus-visible {
  outline-color: var(--ft-light-text);
}

.register-table {
  border-block-start: 1px solid var(--ft-light-border);
}

.register-row {
  display: grid;
  grid-template-columns: 9.5rem 11.5rem 1fr 11rem auto;
  gap: 1.5rem;
  align-items: center;
  padding-block: 1.25rem;
  border-block-end: 1px solid var(--ft-light-border);
  font-size: 0.9375rem;
}

.register-sparte {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ft-light-muted);
}

.register-name {
  font-weight: 600;
  font-size: 1.0625rem;
}

.register-purpose {
  color: var(--ft-light-muted);
}

.register-state {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ft-light-text);
}

.register-row a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-block-size: var(--ft-target);
  font-size: 0.875rem;
  font-weight: 500;
  justify-self: end;
}

/* Principles / Studio Section */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.25rem;
}

.principle {
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--ft-border);
}

.principle h3 {
  font-size: 1.375rem;
  margin-block: 1rem 0.75rem;
}

.principle p {
  color: var(--ft-text-secondary);
  font-size: 0.9375rem;
  max-inline-size: 32ch;
}

/* Subpages: Unified Sparte & Product Architecture */
.page-hero {
  padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(2.5rem, 4vw, 3.5rem);
  border-block-end: 1px solid var(--ft-border);
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: 2rem;
  font-size: 0.8125rem;
  color: var(--ft-text-muted);
}

.breadcrumb a {
  min-block-size: 2rem;
  display: inline-flex;
  align-items: center;
  transition: color var(--ft-fast) var(--ft-ease);
}

.breadcrumb a:hover {
  color: var(--ft-text);
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: end;
}

.page-hero-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-block-end: 1.35rem;
}

.page-hero h1 {
  font-size: clamp(2.35rem, 5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.08;
}

.page-hero h1 span {
  color: var(--ft-text-muted);
}

.page-lead {
  margin-block-start: 1.5rem;
  max-inline-size: 40rem;
  font-size: clamp(1.0625rem, 1.35vw, 1.2rem);
  color: var(--ft-text-secondary);
}

.page-actions {
  margin-block-start: 2rem;
  display: flex;
  flex-wrap: wrap;
  flex-wrap: balance;
  gap: 0.75rem 1rem;
}

/* Subpage Key-Fact Box / Stage */
.fact-panel {
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-surface);
  padding: 1.5rem 1.625rem;
  display: grid;
  gap: 1rem;
}

.fact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block-end: 0.85rem;
  border-block-end: 1px solid var(--ft-border);
  font-size: 0.875rem;
}

.fact-row:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.fact-row span:first-child {
  color: var(--ft-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.fact-row strong {
  font-weight: 500;
  text-align: right;
}

/* Subpage Module Cards (2-col or 3-col) */
.module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

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

.module-card {
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-surface);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-inline-size: 0;
}

.module-card--inverse {
  background: var(--ft-light-canvas);
  color: var(--ft-light-text);
  border-color: var(--ft-light-canvas);
}

.module-card--inverse .eyebrow,
.module-card--inverse .module-note {
  color: var(--ft-light-muted);
}

.module-card--inverse p {
  color: #323236;
}

.module-card--inverse .status-pill {
  color: var(--ft-light-text);
  border-color: #8c8c88;
}

.module-card--inverse .btn--primary {
  background: var(--ft-on-inverse);
  color: var(--ft-text);
}

.module-card--inverse .btn--primary:hover {
  background: #222226;
}

.module-card--inverse :is(a, button, summary):focus-visible {
  outline-color: var(--ft-on-inverse);
}

.module-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.module-card h3 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}

.module-claim {
  font-size: 1.0625rem;
  font-weight: 500;
}

.module-card p {
  color: var(--ft-text-secondary);
  font-size: 0.9375rem;
  max-inline-size: var(--ft-reading);
}

.module-card--inverse p {
  color: #2b2b2f;
}

.module-card--inverse .module-claim {
  color: var(--ft-light-text);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: balance;
  gap: 0.45rem;
  margin-block-start: 0.25rem;
}

.tag-row span {
  padding: 0.25rem 0.6rem;
  border-radius: var(--ft-radius-sm);
  border: 1px solid currentColor;
  opacity: 0.75;
  font-size: 0.75rem;
}

.module-foot {
  margin-block-start: auto;
  padding-block-start: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.module-note {
  font-size: 0.8125rem;
  color: var(--ft-text-muted);
}

/* Numbered Steps (01 / 02 / 03) */
.steps-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.steps-list li {
  padding-block-start: 1.35rem;
  border-block-start: 1px solid var(--ft-border);
}

.step-num {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ft-text-muted);
  margin-block-end: 0.9rem;
}

.steps-list h3 {
  font-size: 1.25rem;
  margin-block-end: 0.65rem;
}

.steps-list p {
  font-size: 0.9375rem;
  color: var(--ft-text-secondary);
}

.steps-list + .module-grid {
  margin-block-start: 2.5rem;
}

/* Sibling Sparten Switcher at Bottom of Subpages */
.sibling-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.sibling-card {
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-surface);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: border-color var(--ft-fast) var(--ft-ease), background var(--ft-fast) var(--ft-ease);
}

.sibling-card:hover {
  border-color: var(--ft-border-strong);
  background: var(--ft-surface-raised);
}

.sibling-card strong {
  font-size: 1.125rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sibling-card span {
  font-size: 0.875rem;
  color: var(--ft-text-secondary);
}

/* Contact Section */
.contact-section {
  margin-block-start: clamp(5rem, 8vw, 8rem);
  padding-block: clamp(3.75rem, 6vw, 5.25rem);
  border-block-start: 1px solid var(--ft-border);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: end;
}

.contact-grid h2 {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  margin-block-start: 0.85rem;
}

.contact-grid h2 span {
  color: var(--ft-text-muted);
}

.contact-box p {
  color: var(--ft-text-secondary);
  margin-block-end: 1.5rem;
  max-inline-size: 34rem;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

/* Legal Pages */
.legal-wrap {
  padding-block: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: 13rem minmax(0, 46rem);
  gap: 4rem;
  align-items: start;
}

.legal-aside {
  position: sticky;
  inset-block-start: calc(var(--ft-header-h) + 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.legal-aside .eyebrow {
  margin-block-end: 0.75rem;
}

.legal-aside a {
  min-block-size: var(--ft-target);
  display: inline-flex;
  align-items: center;
  padding-inline: 0.75rem;
  border-radius: var(--ft-radius-sm);
  font-size: 0.875rem;
  color: var(--ft-text-secondary);
}

.legal-aside a:hover {
  color: var(--ft-text);
  background: var(--ft-surface);
}

.legal-aside a[aria-current="page"] {
  color: var(--ft-on-inverse);
  background: var(--ft-inverse);
  font-weight: 500;
}

.prose {
  overflow-wrap: anywhere;
}

.prose h1 {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  margin-block: 0.65rem 2rem;
}

.prose h2 {
  font-size: 1.375rem;
  margin-block: 2.5rem 0.75rem;
}

.prose p {
  color: var(--ft-text-secondary);
  line-height: 1.72;
  margin-block-end: 1rem;
  max-inline-size: var(--ft-reading);
}

.prose strong {
  color: var(--ft-text);
  font-weight: 550;
}

.prose a {
  color: var(--ft-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.legal-meta {
  margin-block-start: 2.5rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--ft-border);
  font-size: 0.8125rem;
  color: var(--ft-text-muted);
}

/* Footer */
.site-footer {
  border-block-start: 1px solid var(--ft-border);
  padding-block: 3rem 2.25rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding-block-end: 2.5rem;
}

.footer-brand p {
  margin-block-start: 0.85rem;
  max-inline-size: 26ch;
  font-size: 0.875rem;
  color: var(--ft-text-secondary);
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-col .eyebrow {
  margin-block-end: 0.75rem;
}

.footer-col a {
  min-block-size: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--ft-text-secondary);
  transition: color var(--ft-fast) var(--ft-ease);
}

.footer-col a:hover {
  color: var(--ft-text);
}

.footer-bottom {
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--ft-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  font-size: 0.75rem;
  color: var(--ft-text-muted);
}

/* Visually Hidden Utility (Preserves Accessibility Tree) */
.visually-hidden {
  position: absolute;
  clip-path: inset(50%);
  overflow: hidden;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

/* Mundwerk Product, Pricing, Account & Native Modal Dialogs */
.mw-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.mw-price-card {
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-surface);
  padding: clamp(1.5rem, 2.8vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.mw-price-card--featured {
  border-color: var(--ft-border-strong);
  background: var(--ft-surface-raised);
}

.mw-price-figure {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.mw-price-amount {
  font-size: clamp(2.25rem, 3.8vw, 3.125rem);
  font-weight: 500;
  line-height: 1;
  color: var(--ft-text);
}

.mw-price-period {
  font-size: 0.9375rem;
  color: var(--ft-text-secondary);
}

.mw-price-tax {
  font-size: 0.8125rem;
  color: var(--ft-text-muted);
}

.mw-feature-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  margin-block: 0.25rem 0.5rem;
  font-size: 0.9375rem;
  color: var(--ft-text-secondary);
}

.mw-feature-list li {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
}

.mw-feature-list li::before {
  content: "—";
  color: var(--ft-text);
  flex: none;
}

.mw-auth-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.75rem;
  align-items: start;
}

.mw-form-card,
.mw-account-card {
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-surface);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
}

.mw-form-card h3,
.mw-account-card h3 {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  margin-block-end: 0.4rem;
}

.mw-form-sub {
  font-size: 0.9375rem;
  color: var(--ft-text-secondary);
  margin-block-end: 1.5rem;
}

.mw-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  margin-block-end: 1.25rem;
}

.mw-field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ft-text);
}

.mw-field input[type="text"],
.mw-field input[type="email"],
.mw-field input[type="password"] {
  font: inherit;
  font-size: max(1rem, 1em);
  min-block-size: 3rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--ft-radius-sm);
  border: 1px solid var(--ft-border-strong);
  background: var(--ft-canvas);
  color: var(--ft-text);
  transition: border-color var(--ft-fast) var(--ft-ease);
}

.mw-field input:focus-visible {
  outline: 2px solid var(--ft-focus);
  outline-offset: 2px;
  border-color: var(--ft-focus);
}

.mw-field input:user-invalid,
.mw-field input[aria-invalid="true"] {
  border-color: var(--ft-inverse);
  background: #1a1517;
}

.mw-pw-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: stretch;
}

.mw-pw-toggle {
  min-block-size: 3rem;
  padding-inline: 0.9rem;
  border-radius: var(--ft-radius-sm);
  border: 1px solid var(--ft-border-strong);
  background: var(--ft-surface-raised);
  color: var(--ft-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.mw-pw-toggle:hover,
.mw-pw-toggle[aria-pressed="true"] {
  color: var(--ft-text);
  border-color: var(--ft-text-secondary);
}

.mw-field-hint {
  font-size: 0.8125rem;
  color: var(--ft-text-muted);
}

.mw-field-error {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ft-text);
}

.mw-field-error[hidden] {
  display: none;
}

.mw-plan-fieldset {
  margin: 0 0 1.35rem;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.mw-plan-fieldset legend {
  padding: 0;
  margin-block-end: 0.55rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ft-text);
}

.mw-radio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.mw-radio-option {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 0.95rem;
  border-radius: var(--ft-radius-sm);
  border: 1px solid var(--ft-border-strong);
  background: var(--ft-canvas);
}

.mw-radio-option:has(input:checked) {
  border-color: var(--ft-inverse);
  background: var(--ft-surface-raised);
}

.mw-radio-option input[type="radio"],
.mw-check-row input[type="checkbox"] {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--ft-inverse);
  flex: none;
}

.mw-radio-option label {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.875rem;
  color: var(--ft-text);
}

.mw-radio-option label span {
  font-size: 0.75rem;
  color: var(--ft-text-secondary);
}

.mw-check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-block-end: 1rem;
}

.mw-check-row label {
  font-size: 0.84375rem;
  line-height: 1.5;
  color: var(--ft-text-secondary);
  cursor: pointer;
}

.mw-check-row label a {
  color: var(--ft-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mw-honeypot {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

.mw-status-banner {
  margin-block-end: 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: var(--ft-radius-sm);
  border: 1px solid var(--ft-border-strong);
  background: var(--ft-canvas);
  font-size: 0.875rem;
  color: var(--ft-text);
}

.mw-status-banner[hidden] {
  display: none;
}

.mw-submit-btn {
  inline-size: 100%;
  cursor: pointer;
}

.mw-submit-btn[disabled] {
  opacity: 0.6;
  cursor: wait;
}

.mw-account-card[hidden],
.mw-guest-view[hidden] {
  display: none;
}

.mw-account-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--ft-border);
}

.mw-account-grid {
  margin-block-start: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.mw-account-box {
  padding: 1.25rem;
  border-radius: var(--ft-radius-md);
  border: 1px solid var(--ft-border);
  background: var(--ft-canvas);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.mw-quota-track {
  inline-size: 100%;
  block-size: 0.5rem;
  border-radius: var(--ft-radius-pill);
  background: var(--ft-surface-raised);
  overflow: clip;
  border: 1px solid var(--ft-border);
}

.mw-quota-fill {
  block-size: 100%;
  background: var(--ft-inverse);
  inline-size: 0%;
  transition: inline-size var(--ft-med) var(--ft-ease);
}

.mw-device-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.mw-device-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--ft-radius-sm);
  border: 1px solid var(--ft-border);
  background: var(--ft-surface);
  font-size: 0.8125rem;
}

.mw-legal-bar {
  margin-block-start: 1.5rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--ft-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
}

button.text-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Native Modal Dialogs (Rule 1: overscroll-behavior on both :modal and ::backdrop) */
dialog:modal {
  overscroll-behavior: contain;
}

dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgb(6 6 8 / 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mw-dialog {
  inline-size: min(calc(100% - 2rem), 34rem);
  max-block-size: calc(100dvh - 3rem);
  padding: 1.75rem;
  border: 1px solid var(--ft-border-strong);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-surface);
  color: var(--ft-text);
}

.mw-dialog[open] {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.mw-dialog h2 {
  font-size: 1.5rem;
}

.mw-dialog p {
  font-size: 0.9375rem;
  color: var(--ft-text-secondary);
}

.mw-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-block-start: 0.5rem;
}

.mw-receipt-box {
  padding: 1rem;
  border-radius: var(--ft-radius-sm);
  border: 1px solid var(--ft-border-strong);
  background: var(--ft-canvas);
  font-size: 0.875rem;
  display: grid;
  gap: 0.45rem;
}

.mw-receipt-box[hidden] {
  display: none;
}

/* Responsive Breakpoints */
@media (max-width: 1080px) {
  .wrap,
  .header-inner {
    inline-size: calc(100% - 3.5rem);
  }

  .sparten-grid {
    grid-template-columns: 1fr;
    row-gap: 3.5rem;
  }

  .sparte-card {
    grid-row: auto;
    grid-template-rows: none;
  }

  .register-row {
    grid-template-columns: 8.5rem 10rem 1fr auto;
  }

  .register-state {
    grid-column: 2 / 4;
  }

  .page-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .module-grid--three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .wrap,
  .header-inner {
    inline-size: calc(100% - 2.5rem);
  }

  .header-inner {
    flex-wrap: wrap;
    padding-block: 0.5rem;
  }

  .menu-button {
    display: inline-flex;
  }

  .site-nav {
    inline-size: 100%;
    display: contents;
  }

  .site-menu {
    display: none;
    inline-size: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding-block: 0.75rem 0.5rem;
    margin-block-start: 0.5rem;
    border-block-start: 1px solid var(--ft-border);
  }

  .site-menu.is-open {
    display: flex;
  }

  .site-menu a {
    min-block-size: 2.875rem;
    justify-content: space-between;
  }

  .site-menu li.nav-cta {
    margin-inline-start: 0;
    margin-block-start: 0.25rem;
  }

  .section-head {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .sparten-ledger {
    grid-template-columns: 1fr;
  }

  .ledger-link {
    padding-inline: 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--ft-border);
  }

  .ledger-link:first-child {
    border-block-start: 0;
  }

  .ledger-link:hover {
    padding-inline: 0.5rem;
  }

  .sparten-grid {
    grid-template-columns: 1fr;
    row-gap: 3.5rem;
  }

  .sparte-card {
    grid-row: auto;
    grid-template-rows: none;
  }

  .module-grid,
  .mw-pricing-grid,
  .mw-auth-layout,
  .mw-account-grid,
  .steps-list,
  .principles-grid,
  .sibling-nav,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .register-row {
    grid-template-columns: 1fr auto;
    gap: 0.45rem 1rem;
  }

  .register-sparte {
    grid-column: 1 / -1;
  }

  .register-purpose,
  .register-state {
    grid-column: 1 / -1;
  }

  .register-row a {
    grid-column: 2;
    grid-row: 2;
  }

  .legal-wrap {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .legal-aside {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-block-end: 1px solid var(--ft-border);
    padding-block-end: 1rem;
  }

  .legal-aside .eyebrow {
    inline-size: 100%;
    margin-block-end: 0.25rem;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (max-width: 520px) {
  .wrap,
  .header-inner {
    inline-size: calc(100% - 2rem);
  }

  .brand-link {
    gap: 0.5rem;
  }

  .brand-mark {
    font-size: 1.0625rem;
  }

  .brand-sub {
    padding-inline-start: 0.5rem;
    font-size: 0.625rem;
  }

  .hero-edition {
    display: none;
  }

  .sparten-ledger {
    grid-template-columns: 1fr;
  }

  .ledger-link {
    padding-inline: 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--ft-border);
  }

  .ledger-link:first-child {
    border-block-start: 0;
  }

  .ledger-link:hover {
    padding-inline: 0.5rem;
  }

  .stage {
    aspect-ratio: auto;
    min-block-size: 14.5rem;
    padding: 1rem;
  }

  .ms-step {
    grid-template-columns: 4.5rem 1fr;
  }

  .ms-tag {
    display: none;
  }

  .spec-list > div,
  .mw-radio-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .hero-actions .btn,
  .page-actions .btn,
  .contact-links .btn {
    inline-size: 100%;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .legal-aside a[aria-current="page"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  .site-menu a:is([aria-current="page"], [aria-current="true"]),
  .brand-link:is([aria-current="page"], [aria-current="true"]) .brand-sub {
    text-decoration-color: Highlight;
  }
}

@media print {
  :root {
    --ft-canvas: #ffffff;
    --ft-text: #111111;
    --ft-text-secondary: #333333;
    --ft-border: #cccccc;
  }

  .site-header,
  .skip-link {
    display: none;
  }
}

/* Cort.Club is the fourth Forttrieb work. Product illustration is a real app capture. */
#cortclub { scroll-margin-top: 6rem; }
.stage--cort { background: var(--ft-surface); }
.stage-cort-image { inline-size: 100%; min-block-size: 0; flex: 1; object-fit: contain; margin-block: .75rem; border: 1px solid var(--ft-border); border-radius: var(--ft-radius-sm); }