/* Gemeinsames Anwendungssystem aus Figma 00 — Referenz & System. */
:root {
  --gutter: clamp(1.25rem, 4vw, 6rem);
  --content: calc(100% - 2 * var(--gutter));
  --page-top: clamp(2.5rem, 5vw, 5rem);
  --title-size: clamp(2.6rem, 5vw, 6rem);
  --lead-size: clamp(1.125rem, 1.25vw, 1.375rem);
  --body-size: clamp(1rem, 1.2vw, 1.25rem);
  --label-size: .875rem;
  --control-size: 2.75rem;
  --accent-surface: var(--orange);
  --heading-size: clamp(2rem, 3.5vw, 4rem);
  --lead-gap: clamp(1.25rem, 2vw, 2rem);
  --section-gap: clamp(3rem, 5vw, 6rem);
  --accent-text: var(--orange-text);
  --on-accent: var(--logo);
  --stack-gap: clamp(1.25rem, 2.5vw, 2rem);
  --tracking-display: -.035em;
  --tracking-heading: -.025em;
  --tracking-nav: -.015em;
  --tracking-body: .005em;
  --tracking-label: .1em;
}

body { color: var(--ink); background: var(--paper); font-family: "Quicksand", sans-serif; font-weight: 400; line-height: 1.55; letter-spacing: var(--tracking-body); }
body:not(.home-sequence-page) { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
body.theme-orange { --accent: var(--orange); --accent-soft: var(--orange-soft); }
body.theme-violet { --on-accent: var(--logo); --accent: var(--violet); --accent-soft: var(--violet-soft); --accent-text: var(--violet); --accent-surface: var(--violet); }
body.theme-green { --accent: var(--green); --accent-soft: var(--green-soft); --accent-text: var(--green-text); --on-accent: var(--logo); --accent-surface: var(--green); }
body.theme-orange, body.theme-violet, body.theme-green { --page: var(--paper); }

.site-header { width: var(--content); margin: 0 auto; padding: clamp(1.25rem, 2.5vw, 3rem) 0 0; color: var(--accent-text); font-size: clamp(1.375rem, 1.5vw, 1.75rem); font-weight: 700; line-height: 1.25; }
.menu-toggle { min-width: var(--control-size); min-height: var(--control-size); font-family: "Urbanist", sans-serif; }
.nav-link { height: auto; min-height: 2.9rem; padding: .45rem .7rem .4rem; font-family: "Urbanist", sans-serif; font-weight: 600; letter-spacing: var(--tracking-nav); line-height: 1.15; transition: color 160ms ease, background-color 160ms ease, opacity 160ms ease; }
.nav-link.is-active { color: var(--on-accent); background: var(--accent-surface);  }
.site-header { flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 3.5rem); }
.primary-nav { max-width: 100%; flex-wrap: wrap; gap: clamp(1rem, 2.5vw, 3rem); }
.primary-nav a:hover { opacity: 1; }
.primary-nav .nav-link:not(.is-active):hover { color: var(--ink); background: var(--paper); }
.site-footer { margin-top: 0; padding: 1rem 0; color: var(--on-accent); background: var(--accent-surface); font: 500 .95rem/1.35 "Urbanist", sans-serif; letter-spacing: .02em; }
.site-footer a { overflow-wrap: anywhere; min-width: 0; display: inline-flex; align-items: center; min-height: var(--control-size); padding-block: .25rem; }
.site-footer a:hover { opacity: 1; text-decoration: none; text-underline-offset: .25em; }
.site-footer nav { width: var(--content); margin: 0 auto; gap: .8rem clamp(1rem, 3vw, 3.25rem); }

.page-main { padding-top: var(--page-top); }
.page-section, .page-hero { width: var(--content); margin-inline: auto; }
.page-section { margin-top: var(--section-gap); margin-bottom: var(--section-gap); }
.page-eyebrow, .eyebrow { margin: 0 0 1rem; color: var(--accent-text); font: 600 var(--label-size)/1.4 "Urbanist", sans-serif; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.page-title, .manifest-page .manifest-intro h1, .team-intro h1, .contact-intro h1 { max-width: 22ch; margin: 0; color: var(--accent); font: 750 var(--title-size)/1.02 "Urbanist", sans-serif; letter-spacing: var(--tracking-display); overflow-wrap: anywhere; hyphens: auto; text-wrap: balance; }
.page-lead, .manifest-page .intro-copy, .team-intro > p:last-child, .contact-intro > p:last-child { max-width: 65ch; margin: var(--lead-gap) 0 0; color: var(--ink); font: 400 var(--lead-size)/1.5 "Quicksand", sans-serif; letter-spacing: var(--tracking-body); }
.page-title + .page-lead { color: var(--ink); }
.accent-panel { display: grid; grid-template-columns: minmax(12rem, .45fr) minmax(0, 1fr); gap: var(--stack-gap); margin-inline: calc((var(--content) - 100vw) / 2); padding: var(--section-gap) var(--gutter); color: var(--logo); background: var(--accent-surface); }
.accent-panel > * { max-width: 47rem; }
.accent-panel :is(.page-eyebrow, .section-title, .page-lead) { color: inherit; }
.accent-panel p:last-child { margin: 0; font: 400 clamp(1.2rem, 1.55vw, 1.5rem)/1.5 "Quicksand", sans-serif; }
.section-title, .manifest-page .flow-heading h2, .person-copy h2, .contact-form-section h2 { max-width: 24ch; margin: 0; color: var(--ink); font: 700 var(--heading-size)/1.1 "Urbanist", sans-serif; letter-spacing: var(--tracking-heading); }
.section-intro { max-width: 43rem; margin: 1.5rem 0 0; font: 400 var(--body-size)/1.55 "Quicksand", sans-serif; letter-spacing: var(--tracking-body); }
.word-verplant { font-family: "Urbanist", sans-serif; font-style: italic; font-weight: 700; }

.gateway-list { display: grid; gap: 1rem; margin-top: var(--lead-gap); }
.gateway-card { display: grid; grid-template-columns: minmax(9rem, .35fr) minmax(0, 1fr) auto; align-items: end; gap: 1.5rem; min-height: 8rem; padding: 1.35rem 1.5rem; color: #fff; background: var(--accent, var(--orange)); transition: transform 180ms ease, opacity 180ms ease; }
.gateway-card:hover { transform: translateX(.4rem); opacity: .9; }
.gateway-card__label { margin: 0; font: 600 .75rem/1.4 "Urbanist", sans-serif; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.gateway-card__title { margin: 0; font: 650 clamp(1.5rem, 2.2vw, 2.25rem)/1.08 "Urbanist", sans-serif; letter-spacing: var(--tracking-heading); }
.gateway-card__copy { max-width: 46rem; margin: 0; font: 400 1rem/1.5 "Quicksand", sans-serif; letter-spacing: var(--tracking-body); }
.gateway-card__arrow { font: 650 1.75rem/1 "Urbanist", sans-serif; }

/* Home wird nur nach der vorhandenen Hero-Erzählung ergänzt. */
.home-after-hero { width: var(--content); margin: 0 auto var(--section-gap); }
.home-statement { max-width: 28ch; margin: 0; color: var(--orange-text); font: 700 var(--heading-size)/1.1 "Urbanist", sans-serif; letter-spacing: var(--tracking-heading); }
.home-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 4vw, 5rem); margin-top: var(--section-gap); }
.home-grid p:not(.page-eyebrow) { margin: 0; font: 400 clamp(1.05rem, 1.35vw, 1.3rem)/1.55 "Quicksand", sans-serif; }
.home-benefits { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.home-benefits li { border-top: 1px solid var(--orange); padding: .9rem 0 0; color: var(--orange); font: 600 clamp(1.25rem, 1.7vw, 1.7rem)/1.15 "Urbanist", sans-serif; letter-spacing: var(--tracking-heading); }
.home-gateways { margin-top: var(--section-gap); }
.home-gateways .gateway-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-gateways .gateway-card { display: flex; min-height: 16rem; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.home-gateways .gateway-card--violet { --accent: var(--violet); background: var(--violet); }
.home-gateways .gateway-card--green { --accent: var(--green); color: var(--logo); background: var(--green); }
.home-gateways .gateway-card--green .gateway-card__label { color: inherit; font-weight: 700; }

/* Übersicht Erfahren und Mitmachen */
.overview-page .page-main { min-height: 0; }
.overview-stack { display: grid; gap: .9rem; margin-top: var(--section-gap); }
.overview-item { display: grid; grid-template-columns: minmax(10rem, .32fr) minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 6.5rem; padding: 1.25rem 1.5rem; color: var(--logo); background: var(--accent-surface); }
.overview-item__label { margin: 0; font: 600 var(--label-size)/1.4 "Urbanist", sans-serif; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.overview-item__text { margin: 0; font: 400 var(--lead-size)/1.5 "Quicksand", sans-serif; letter-spacing: var(--tracking-body); }
.overview-item__arrow { font: 600 1.5rem/1 "Urbanist", sans-serif; }
.overview-item:hover { background: var(--accent-surface); }
.overview-item:hover .overview-item__text { text-decoration: none; text-underline-offset: .2em; }

/* Perspektivwechsel-Tool */
.tool-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 1fr); gap: clamp(1rem, 4vw, 3.5rem); margin-top: 0; }
.tool-map, .tool-steps { position: relative; min-height: 35rem; padding: 1.75rem; background: var(--green); }
.tool-map { overflow: hidden; }
.tool-map::before, .tool-map::after { position: absolute; inset: 10% 10%; border: 1px solid rgba(17,17,17,.45); border-radius: 52% 48% 45% 55%; content: ""; transform: rotate(-12deg); }
.tool-map::after { inset: 25% 2% 18% 26%; transform: rotate(30deg); }
.tool-map__pin { position: absolute; top: 54%; left: 53%; width: 1.5rem; height: 1.5rem; border: 4px solid #fff; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--ink); }
.tool-step { padding: 0 0 1.25rem; border-bottom: 1px solid rgba(17,17,17,.8); }
.tool-step + .tool-step { padding-top: 1.25rem; }
.tool-step__label { margin: 0; color: var(--ink); font: 600 var(--label-size)/1.4 "Urbanist", sans-serif; letter-spacing: var(--tracking-label); }
.tool-step__text, .tool-map__text { max-width: 34rem; margin: .7rem 0 0; color: var(--ink); font: 400 var(--body-size)/1.55 "Quicksand", sans-serif; letter-spacing: var(--tracking-body); }
.tool-note { max-width: 58rem; margin: var(--lead-gap) 0 0; font: 400 clamp(1.1rem, 1.4vw, 1.35rem)/1.55 "Quicksand", sans-serif; }

/* Manifest: Kette plus offene, zentrierte Matrix. */
.manifest-page { --accent: var(--orange); --accent-soft: var(--orange-soft); background: var(--paper); }
.manifest-page main { padding-top: var(--page-top); }
.manifest-page .manifest-intro, .manifest-page .background-section, .manifest-page .flow-section { width: var(--content); margin-inline: auto; padding-inline: 0; }
.manifest-page .site-header { margin-bottom: 0; }
.manifest-page .manifest-intro h1 { color: var(--orange); }

.manifest-page .background-section { background: var(--orange); width: 100%; margin-top: var(--section-gap); padding: var(--section-gap) var(--gutter); }
.manifest-page .flow-section { padding-top: var(--section-gap); }
.manifest-page .flow-heading { max-width: 54rem; }

.manifest-page .flow-heading > p:last-child { color: var(--ink); font: 400 var(--body-size)/1.55 "Quicksand", sans-serif; letter-spacing: var(--tracking-body); }
.field-picker { margin-top: var(--lead-gap); }
.field-picker button { border: 0; background: var(--paper); min-width: var(--control-size); min-height: var(--control-size); padding: .65rem .75rem; font: 600 1rem/1.4 "Urbanist", sans-serif; letter-spacing: var(--tracking-nav); color: var(--orange-text); }
.field-picker button:hover { color: var(--logo); background: var(--orange); }
.field-picker button[aria-selected="true"] { color: var(--logo); background: var(--orange); }
.flow-stage { max-width: none; padding: clamp(1.5rem, 3vw, 2.75rem); border: 1px solid var(--orange); background: transparent; }
.flow-field { color: var(--orange-text); font: 700 clamp(1.15rem, 1.8vw, 1.8rem)/1.15 "Urbanist", sans-serif; }
.flow-node { border: 0; color: var(--ink); background: var(--orange-soft); font-family: "Quicksand", sans-serif; opacity: 1; }
.flow-node span { color: var(--orange-text); font-family: "Urbanist", sans-serif; font-weight: 600; }
.flow-node.is-current { color: var(--logo); background: var(--orange); }
.flow-node.is-current span { color: inherit; }
.manifest-matrix { color: var(--ink); width: var(--content); margin: var(--section-gap) auto; padding: clamp(1rem, 3vw, 2.5rem); border: 1px solid var(--orange); }
.matrix-title { margin: 0 0 2.5rem; color: var(--orange-text); font: 700 var(--heading-size)/1.1 "Urbanist", sans-serif; letter-spacing: var(--tracking-heading); }
.matrix-head, .matrix-row { display: grid; grid-template-columns: 4.5rem repeat(3, minmax(0, 1fr)); }
.matrix-head { color: var(--orange-text); font: 700 1.05rem/1 "Urbanist", sans-serif; }
.matrix-head > * { padding: 1rem; }
.matrix-row { position: relative; border-top: 1px solid rgba(255,77,0,.55); }
.matrix-number { padding: 1.5rem 1rem; color: var(--orange-text); font: 600 var(--label-size)/1.4 "Urbanist", sans-serif; }
.matrix-cell { min-width: 0; padding: 1.5rem clamp(1rem, 2.5vw, 2rem); }
.matrix-cell + .matrix-cell { border-left: 1px solid var(--orange); }
.matrix-cell__label { margin: 0 0 .85rem; color: var(--orange-text); font: 600 var(--label-size)/1.4 "Urbanist", sans-serif; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.matrix-cell p:last-child { margin: 0; font: 400 1rem/1.6 "Quicksand", sans-serif; letter-spacing: var(--tracking-body); }
.matrix-definition .matrix-cell { color: var(--logo); background: var(--orange); }
.matrix-definition .matrix-cell__label { color: inherit; }

/* Team und Kontakt verwenden das gemeinsame Schriftsystem. */
.team-page, .contact-page { --accent: var(--orange); --accent-soft: var(--orange-soft); background: var(--paper); }
.team-page .site-header, .contact-page .site-header { margin-bottom: 0; }
.team-page main, .contact-page main { padding-top: var(--page-top); }
.team-intro, .team-list, .contact-intro, .contact-form-section { width: var(--content); margin-inline: auto; padding-inline: 0; }
.team-intro h1, .contact-intro h1 { color: var(--orange); }
.person-copy > p:not(.eyebrow):not(.role) { color: var(--ink); font: 400 var(--body-size)/1.55 "Quicksand", sans-serif; letter-spacing: var(--tracking-body); }
.person-copy .role { font-family: "Urbanist", sans-serif; color: var(--orange-text); }
.portrait { background: var(--paper); }
.contact-form-section { width: 100%; margin-top: var(--section-gap); padding: var(--section-gap) var(--gutter); }
.contact-form-section label { padding-top: 0; font: 600 1rem/1.4 "Urbanist", sans-serif; letter-spacing: var(--tracking-body); }
.contact-form-section input, .contact-form-section textarea { min-height: var(--control-size); font: 400 var(--body-size)/1.55 "Quicksand", sans-serif; letter-spacing: var(--tracking-body); caret-color: currentColor; }
.contact-form-section .form-field { align-items: start; gap: 1rem; padding-block: 1.25rem; }
.contact-form-section form button { min-height: var(--control-size); padding: .75rem .5rem; font: 600 1.125rem/1.4 "Urbanist", sans-serif; letter-spacing: var(--tracking-nav); }
.contact-form-section .form-note { font-size: 1rem; line-height: 1.55; }

/* Einfache rechtliche Seiten: bewusst als Inhalt statt leerer Templates. */
.legal-copy { margin-bottom: var(--section-gap); }
.legal-copy > p, .legal-copy > ul { max-width: 54rem; }
.legal-copy h2 { margin: 2.5rem 0 .7rem; color: var(--accent-text); font: 700 clamp(1.6rem, 2.8vw, 2.6rem)/1.1 "Urbanist", sans-serif; letter-spacing: var(--tracking-heading); }
.legal-copy p:not(.page-eyebrow):not(.page-lead), .legal-copy li { font: 400 1rem/1.65 "Quicksand", sans-serif; letter-spacing: var(--tracking-body); }
.legal-copy ul { padding-left: 1.25rem; }

@media (max-width: 760px) {
  .site-header { padding-top: max(1.2rem, env(safe-area-inset-top)); }
  .primary-nav { flex-wrap: nowrap; justify-content: safe center; overflow-y: auto; background: var(--paper); }
  .menu-toggle { color: var(--on-accent); background: var(--accent-surface); }
  .primary-nav .nav-link { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; color: var(--ink); letter-spacing: var(--tracking-display); line-height: .94; }
  .primary-nav .nav-link.is-active { color: var(--on-accent); background: var(--accent-surface); }
  .accent-panel, .home-grid, .tool-layout { grid-template-columns: 1fr; }
  .home-gateways .gateway-list { grid-template-columns: 1fr; }
  .gateway-card, .overview-item { grid-template-columns: 1fr auto; }
  .gateway-card__copy, .overview-item__text { grid-column: 1 / -1; }
  .overview-item__arrow { grid-column: 2; grid-row: 1; }
  .tool-map { min-height: 18rem; }
  .tool-steps { min-height: 0; }
  .matrix-head { display: none; }
  .matrix-row { grid-template-columns: minmax(0, 3.3rem) minmax(0, 1fr); }
  .matrix-cell { grid-column: 2; border-left: 0 !important; }
  .matrix-cell + .matrix-cell { border-top: 1px solid rgba(255,77,0,.5); }
  .matrix-definition .matrix-cell { background: var(--orange); }
  .matrix-number { grid-row: 1 / span 3; }
}

/* Inhaltsraster stapeln vor der schmalen Navigation; auch bei größerer Schrift. */
@media (max-width: 1100px) {
  .overview-item { grid-template-columns: minmax(0, 1fr) auto; }
  .overview-item__text { grid-column: 1 / -1; }
  .overview-item__arrow { grid-column: 2; grid-row: 1; }
  .tool-layout, .contact-form-section, .contact-form-section .form-field { grid-template-columns: minmax(0, 1fr); }
  .tool-map { min-height: 18rem; }
  .tool-steps { min-height: 0; }
  .contact-form-section .form-field { gap: .5rem; }
  .matrix-head { display: none; }
  .matrix-row { grid-template-columns: minmax(0, 3.3rem) minmax(0, 1fr); }
  .matrix-row .matrix-cell { grid-column: 2; border-left: 0; }
  .matrix-cell + .matrix-cell { border-top: 1px solid rgba(255,77,0,.5); }
  .matrix-number { grid-row: 1 / span 3; }
}

@media (prefers-reduced-motion: reduce) { .gateway-card { transition: none; } }

/* Home-Sequenz: erst reine Animation, danach statischer Hero im Seitenlauf. */
body.home-sequence-page { overflow: hidden; }
body.home-sequence-page.is-settled { overflow-x: hidden; overflow-y: auto; }

.home-sequence-page .site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: var(--gutter);
  width: var(--content);
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-1rem);
  animation: none;
}

.home-sequence-page.is-settled .site-header { pointer-events: auto; }

.theme-orange .hero-reference {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100svh;
  min-height: 36rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
}

.sequence-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

.sequence-statement {
  position: absolute;
  z-index: 5;
  left: var(--gutter);
  bottom: clamp(2.75rem, 7vh, 5.5rem);
  max-width: 19ch;
  margin: 0;
  color: var(--orange);
  font: 720 clamp(2.1rem, 4.2vw, 5.25rem)/.96 "Urbanist", sans-serif;
  letter-spacing: -.065em;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1.5rem);
  animation: none;
}

.home-sequence-page.is-settled .sequence-statement { pointer-events: auto; }

.wicked-label {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  display: grid;
  min-width: max-content;
  padding-right: .65rem;
  color: var(--ink);
  font: 760 clamp(.8rem, 1.08vw, 1.12rem)/1.02 "Urbanist", sans-serif;
  letter-spacing: .12em;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  transform: translate(-100%, -50%);
  transform-origin: right center;
}

.signal-word {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  min-width: max-content;
  padding-left: .65rem;
  color: var(--orange);
  font: italic 720 clamp(1.05rem, 1.55vw, 1.6rem)/1 "Urbanist", sans-serif;
  letter-spacing: -.055em;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(0, -50%) scale(.9);
  transform-origin: left center;
}

.home-sequence-page .home-after-hero,
.home-sequence-page .site-footer {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 800ms cubic-bezier(.2, .8, .2, 1), transform 900ms cubic-bezier(.2, .8, .2, 1);
}

.home-sequence-page.is-settled .home-after-hero,
.home-sequence-page.is-settled .site-footer { opacity: 1; transform: none; }

.home-sequence-page .home-after-hero { padding-top: var(--section-gap); }
.home-sequence-page.is-webgl-unavailable .site-header,
.home-sequence-page.is-webgl-unavailable .sequence-statement { opacity: 1; transform: none; }

/* Gemeinsame Kontraste und Umbrüche ohne Änderungen am Inhalt. */
:is(a, button, input, textarea):focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.site-header :is(a, button):focus-visible { outline-color: var(--accent-text); }
.site-header .primary-nav a:focus-visible { outline-color: var(--ink); }
.site-header.menu-is-open .menu-toggle:focus-visible { outline-color: var(--on-accent); }
.field-picker button:focus-visible, .flow-node:focus-visible { outline-color: var(--orange-text); }
.site-footer a[aria-current="page"] { font-weight: 500; text-decoration: none; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.background-section .eyebrow, .contact-form-section .eyebrow { color: inherit; }
.page-title, .legal-copy h2 { overflow-wrap: anywhere; hyphens: auto; }
.theme-green .page-title { color: var(--green); }
.manifest-page .intro-copy { color: var(--ink); }
@media (max-width: 760px) {
  .site-header { padding-inline: 0; }
}

/* Bildschirmbreite für das Raster, begrenzte Zeilenlängen für Lesetexte. */
body { display: flex; flex-direction: column; }
body > main { flex: 1; }
.site-header, .site-footer { flex-shrink: 0; }
.team-intro, .manifest-intro { max-width: none; }
.home-grid p:not(.page-eyebrow), .legal-copy > p, .legal-copy > ul { max-width: 65ch; }
.home-benefits { margin-top: 1.5rem; }
.team-list { margin-top: var(--section-gap); padding-bottom: var(--section-gap); }
.person { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 6rem); }
.person-jakob { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.portrait { width: min(100%, 38rem); }
.person-jakob .portrait { justify-self: end; }
.person-copy .role { line-height: 1.4; letter-spacing: var(--tracking-body); }
.person-copy { max-width: 65ch; }
.person + .person { margin-top: var(--section-gap); }
.contact-intro { min-height: 0; padding-bottom: 0; }
.contact-intro h1 { hyphens: manual; }
.contact-form-section { gap: var(--stack-gap); background: var(--orange); }
.contact-form-section h2 { color: inherit; }
.contact-form-section form { max-width: none; }
.manifest-page .flow-section { padding-bottom: 0; }
.background-section > p:last-child { font: 400 var(--lead-size)/1.5 "Quicksand", sans-serif; letter-spacing: var(--tracking-body); }
@media (min-width: 1100px) {
  .page-hero:not(.legal-copy), .team-intro, .contact-intro, .manifest-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 6rem);
    align-items: start;
  }
  .page-hero:not(.legal-copy) > .page-eyebrow,
  .team-intro > .eyebrow, .contact-intro > .eyebrow, .manifest-intro > .eyebrow { grid-column: 1 / -1; }
  .page-hero:not(.legal-copy) > .page-lead,
  .team-intro > p:last-child, .contact-intro > p:last-child, .manifest-page .intro-copy { margin-top: 0; }
}
@media (max-width: 760px) {
  .person, .person-jakob { grid-template-columns: 1fr; }
  .portrait, .person-jakob .portrait { justify-self: start; }
  .tool-steps { min-height: 0; }
  .primary-nav { padding-inline: var(--gutter); }
  .site-footer nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) { .site-footer nav { grid-template-columns: minmax(0, 1fr); } }

.home-grid { margin-top: 0; }

.home-statement .word-verplant, .team-intro h1 em { margin-inline-end: .12em; }
.team-intro h1 :is(em, strong) { font-weight: inherit; }

@media (max-width: 760px) {
  .theme-orange .hero-reference {
    height: var(--sequence-viewport-height, 100svh);
    min-height: var(--sequence-viewport-height, 100svh);
  }
  .home-sequence-page .site-header {
    right: max(1.5rem, env(safe-area-inset-right, 0px));
    left: max(1.5rem, env(safe-area-inset-left, 0px));
    width: auto;
    padding-top: max(1.5rem, calc(env(safe-area-inset-top, 0px) + .5rem));
    padding-inline: 0;
  }
  .sequence-statement { bottom: max(2rem, calc(env(safe-area-inset-bottom, 0px) + 1.25rem)); max-width: 16ch; font-size: clamp(2rem, 10vw, 3.5rem); }
  .wicked-label { padding-right: .35rem; font-size: .73rem; }
  .signal-word { padding-left: .35rem; font-size: 1rem; }
}

@supports (height: 100lvh) {
  @media (max-width: 760px) {
    /* Die große Viewporthöhe bleibt stabil, wenn Safari seine Werkzeugleisten
       ein- oder ausblendet, und verhindert wiederholte Canvas-Neuskalierungen. */
    .theme-orange .hero-reference {
      height: var(--sequence-viewport-height, 100lvh);
      min-height: var(--sequence-viewport-height, 100lvh);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-sequence-page .home-after-hero,
  .home-sequence-page .site-footer { transition: none; }
}

/* One accent per navigation, neutral text; no additional selection tints. */
.primary-nav .nav-link:not(.is-active) { color: var(--ink); }
.primary-nav .nav-link.is-active:hover { color: var(--on-accent); background: var(--accent-surface); }
.site-header.menu-is-open .menu-toggle { color: var(--ink); background: var(--paper); }
.site-header.menu-is-open .menu-toggle:focus-visible { outline-color: var(--ink); }
.manifest-page .background-section { color: var(--logo); }
.contact-form-section .form-note { color: inherit; }
.contact-form-section input, .contact-form-section textarea { color: var(--ink); background: var(--paper); }
.contact-form-section button { color: var(--ink); background: var(--paper); }
.site-footer .footer-inner { width: var(--content); margin-inline: auto; display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: 1.5rem; align-items: end; }
.site-footer .footer-logo { display: block; width: 3rem; height: auto; filter: brightness(0) invert(1); }
.site-footer .footer-inner nav { width: 100%; margin: 0; }
@media (max-width: 760px) {
 .primary-nav .nav-link:not(.is-active):hover { color: var(--ink); background: var(--paper); }
}

.tool-levels { margin-block: 1.5rem; }
.tool-levels dt { margin-top: 1.25rem; font-family: "Urbanist", sans-serif; font-weight: 700; }
.tool-levels dd { margin: .4rem 0 0; }
.contact-form-section :is(input, textarea)::placeholder { color: var(--muted-text); opacity: 1; }

/* Header mark follows the page accent; it remains an accessible Home link. */
.site-header .brand-mark, .site-header .brand-mark.is-active, .site-header .brand-mark:hover {
  padding: 0; color: var(--accent, var(--orange)); background: transparent; min-height: var(--control-size);
}
.brand-logo { display: block; width: 4rem; aspect-ratio: 1407 / 1313; background: currentColor;
  mask: url("assets/logo-verplant.svg") center / contain no-repeat;
  -webkit-mask: url("assets/logo-verplant.svg") center / contain no-repeat;
}
a, a:hover, a:active, a:visited { text-decoration: none; }
.contact-intro a { border-bottom: 0; }
.page-main p a, .legal-copy a, .contact-intro a { font-weight: 700; }

/* User-specified white contact copy, without separators between form fields. */
.contact-form-section { color: var(--logo); }
.contact-form-section .form-field { border: 0; }
.contact-form-section label, .contact-form-section .eyebrow, .contact-form-section .form-note {
  color: var(--logo); font-size: 1.2rem; font-weight: 700;
}
.contact-form-section :is(input, textarea):focus { box-shadow: none; }
.contact-form-section form button { border: 0; }

.site-footer { color: var(--logo); }
.site-footer .footer-logo { align-self: end; }
.site-footer .footer-inner nav { display: flex; flex-wrap: wrap; gap: 0 clamp(1rem,2vw,2rem); font-size: .95rem; font-weight: 500; }
.site-footer .footer-inner nav a { color: var(--logo); }
@media (max-width: 1000px) { .site-footer .footer-inner nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 1rem; } }
@media (max-width: 600px) {
 .site-footer .footer-inner { grid-template-columns: 1fr; gap: .75rem; }
 .site-footer .footer-inner nav { order: -1; grid-template-columns: repeat(2,minmax(0,1fr)); }
 .site-footer .footer-logo { width: 2.5rem; }
}
@media (max-width: 400px) { .site-footer .footer-inner nav { grid-template-columns: 1fr; } }

/* Home exposes the three destinations in their own colors before navigation. */
.home-gateways .gateway-card, .home-gateways .gateway-card--green { color: var(--logo); }
.home-sequence-page .primary-nav .nav-link[href="erfahren.html"] { color: var(--logo); background: var(--violet); }
.home-sequence-page .primary-nav .nav-link[href="mitmachen.html"] { color: var(--logo); background: var(--orange); }
.home-sequence-page .primary-nav .nav-link[href="ausprobieren.html"] { color: var(--logo); background: var(--green); }

/* Authored send mark; accessible name still describes the local email draft. */
.contact-form-section form .contact-send {
  display: grid; place-items: center; width: 4.5rem; height: 4.5rem;
  padding: .6rem; color: var(--logo); background: transparent; cursor: pointer;
}
.contact-send svg { display: block; width: 3rem; height: 3rem; }

/* Manifest: a continuous reading flow, without disclosure controls. */
.manifest-page .manifest-matrix { padding: 0; border: 0; }
.manifest-matrix .matrix-title { margin-bottom: 1.5rem; }
.manifest-explanation { max-width: 65ch; margin: 0 0 var(--section-gap); font: 400 var(--lead-size)/1.55 "Quicksand",sans-serif; }
.manifest-fields { display: grid; gap: var(--section-gap); }
.manifest-field { min-width: 0; }
.manifest-field-title { margin: 0 0 1.75rem; color: var(--orange); font: 650 clamp(1.6rem,3vw,2.6rem)/1.15 "Urbanist",sans-serif; letter-spacing: var(--tracking-heading); }
.manifest-development { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(1.5rem,3vw,3rem); }
.manifest-stage { min-width: 0; }
.manifest-stage h4 { margin: 0 0 1rem; font: 650 1.2rem/1.3 "Urbanist",sans-serif; }
.manifest-stage p { margin: 0; font: 400 var(--body-size)/1.6 "Quicksand",sans-serif; }
@media (max-width: 760px) { .manifest-development { grid-template-columns: minmax(0,1fr); gap: 2rem; } }
/* Reveal follows the viewport, never a click, timer, or scroll lock.
   Unsupported browsers, reduced motion, and print show the full content. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .manifest-stage {
      animation: manifest-read linear both;
      animation-timeline: view(block);
      animation-range: entry 0% entry 70%;
    }
  }
}
@keyframes manifest-read { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@media print { .manifest-stage { animation: none; clip-path: none; } }

/* Ausprobieren: one shared rhythm for entry, current workflow, and future layers. */
.try-page { --try-gap: clamp(2.5rem,4vw,4rem); }
.try-page .page-section { margin-block: var(--try-gap); }
.try-page .try-hero { display: block; padding-bottom: 0; }
.try-hero .page-title { max-width: none; font-size: clamp(2rem,4vw,4.5rem); }
.try-hero__entry { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); align-items: start; column-gap: 2rem; row-gap: 1rem; margin-top: 1.5rem; }
.try-hero__entry .page-lead { margin: 0; }
.try-hero__entry > p:last-child { grid-column: 1; margin: 0; max-width: 65ch; }
.try-entry__start { grid-column: 2; grid-row: 1 / span 2; justify-self: start; display: inline-flex; align-items: center; min-height: 2.75rem; padding: .8rem 1.25rem; background: var(--green); color: var(--logo); font: 650 1.25rem/1.3 "Urbanist",sans-serif; text-decoration: none; }
.try-entry__start:hover { color: var(--logo); background: var(--green); }
.try-entry__start:focus-visible { outline-color: var(--ink); }
.try-page .section-title { max-width: 32ch; font-size: clamp(1.8rem,3vw,3rem); }
.try-workflow__intro { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 2rem; align-items: start; }
.try-workflow__intro .section-intro { margin-top: 1rem; max-width: 60ch; }
.try-version { margin: 0; max-width: 65ch; padding: 1.5rem; background: var(--green-soft); }
.try-version > p { margin: 0; }
.try-current { margin-top: 1rem; }
.try-current > summary { cursor: pointer; padding-block: .5rem; font: 650 1rem/1.4 "Urbanist",sans-serif; }
.try-current > summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.try-current ol { padding-left: 1.25rem; }
.try-current h4 { margin: 1.25rem 0 .5rem; font: 650 1rem/1.4 "Urbanist",sans-serif; }
.try-current p { margin: .75rem 0 0; }
.try-workflow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.try-workflow li { min-width: 0; }

.try-workflow h3, .try-layers__legend dt { margin: 0 0 .65rem; font: 650 1.2rem/1.3 "Urbanist",sans-serif; }
.try-workflow p { margin: 0; max-width: 65ch; }
.try-step { background: var(--green); color: var(--logo); }
.try-step > summary { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: .5rem 1rem; min-height: 8rem; padding: 1.5rem; cursor: pointer; list-style: none; }
.try-step > summary::-webkit-details-marker { display: none; }
.try-step > summary::before { content: counter(list-item,decimal-leading-zero); grid-column: 1; grid-row: 1; font: 600 .85rem/1.4 "Urbanist",sans-serif; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-label); }
.try-step > summary h3 { grid-column: 1; grid-row: 2; margin: 0; }
.try-step > summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.try-step__toggle { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.try-step__vertical { transform-origin: center; }
.try-step[open] .try-step__vertical { transform: scaleY(0); }
.try-step > p { padding: 0 1.5rem 1.5rem; }

.try-layers > h2 { margin-bottom: 1.5rem; }
.try-layers__figure { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 2rem; align-items: center; margin: 0; }
.try-layers__diagram { display: block; width: 100%; max-width: 27rem; height: auto; margin-inline: auto; }
.try-layers__circles circle { fill: var(--green-soft); fill-opacity: .65; stroke: var(--green); stroke-width: 2; }
.try-layers__intersection { fill: var(--green); }
.try-layers__labels { fill: var(--ink); font: 650 26px "Urbanist",sans-serif; }
.try-layers__legend { margin: 0; }
.try-layers__legend dt:not(:first-child) { margin-top: 1.25rem; }
.try-layers__legend dd { margin: 0; max-width: 65ch; }
.try-layers__notes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; margin-top: 1.5rem; padding: 1.5rem; background: var(--green-soft); }
.try-layers__notes p { margin: 0; max-width: 65ch; }
@media (max-width: 1000px) {
 .try-workflow { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
 .try-workflow__intro { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
}
@media (max-width: 760px) {
 .try-hero__entry, .try-layers__figure, .try-layers__notes { grid-template-columns: minmax(0,1fr); gap: 1.25rem; }
 .try-entry__start { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* Exact supplied logo, briefly dispersed on intentional tool entry. */
.try-entry__start { gap: .65rem; max-width: 100%; }
.try-entry__label { min-width: 0; }
.try-entry__logo { position: relative; display: block; flex: 0 0 2rem; width: 2rem; aspect-ratio: 1407 / 1313; }
.try-entry__logo img { display: block; width: 100%; height: 100%; filter: brightness(0) invert(1); }
.try-entry__logo.is-dissolving img { opacity: 0; }
.try-entry__fragment { position: absolute; inset: 0; background: currentColor; pointer-events: none;
  mask: url("assets/logo-verplant.svg") center / contain no-repeat;
  -webkit-mask: url("assets/logo-verplant.svg") center / contain no-repeat;
}

/* Public interim release: plain editorial sections in the existing page grid. */
.interim-topics { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.interim-topic { max-width: 68rem; scroll-margin-top: 7rem; }
.interim-topic h2, .interim-note h2 { font: 750 clamp(1.6rem, 3vw, 2.4rem)/1.15 "Urbanist", sans-serif; letter-spacing: -.035em; margin: 0 0 1rem; }
.interim-topic p, .interim-note p { max-width: 56rem; }
.interim-note { background: var(--accent-soft, var(--orange-soft)); padding: clamp(1.25rem, 3vw, 2rem); }
.interim-link { display: inline-flex; align-items: center; min-height: 44px; font-family: "Urbanist", sans-serif; font-weight: 650; }
.legal-copy { max-width: min(90%, 64rem); overflow-wrap: anywhere; }
.legal-copy h2 { margin-top: 2rem; }

/* Planned sections retain their original identity; explanatory copy sits below each box. */
.planned-area { min-width: 0; }
.planned-area__box { grid-template-columns: minmax(10rem, .32fr) minmax(0, 1fr); }
.planned-area__box .overview-item__label { color: inherit; font-size: var(--label-size); }
.planned-area__description { max-width: 64rem; margin: 1rem 1.5rem 0; }
.planned-areas { gap: 2.5rem; }
@media (max-width: 800px) {
  .planned-area__box { grid-template-columns: 1fr; }
  .planned-area__description { margin-inline: 0; }
}