/* Aigency v4: tokens, reset, type, grid, button, header, footer, legal dialogs.
   Sections of the home page are added by later tasks below the marker at the end. */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/Archivo-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #0a0a0f;
  --surface: #14141c;
  --ink: #ffffff;
  --muted: #b4b4c3;
  --accent: #7c6fff;
  --on-accent: #0a0a0f; /* 5.24:1 on the accent, white would only reach 3.77:1 */

  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
  --step-display: clamp(2.5rem, 0.5rem + 9.5vw, 10rem);

  --margin: clamp(16px, 2.2vw, 32px);
  --gutter: clamp(16px, 2vw, 32px);
  --section: clamp(5rem, 12vw, 13rem);
  --header-h: 4.5rem;
  --radius: 0;

  --accent-hi: #978cff; /* the button under the pointer: one step lighter, so the dark label gains contrast */
  --line-rest: rgba(255, 255, 255, 0.4); /* a link's underline at rest; it takes the full ink under the pointer */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;

  /* Two desktop display sizes. Both resolve against the full-width section (container) they are used in.
     --hero-display: the hero halves stack on two lines each, so the longer word, "VERSTEHEN." (4.36em),
     fills the room beside the hero frame (about 92px at 1440). The frame keeps 35cqi: narrower, the process
     map inside it would have no room for its steps.
     --section-display: the section headings (stage clauses, Kompetenzen, FAQ, SEO h2): the same room
     divided by the em width of "Erst verstehen." (6.35), about 64px at 1440. */
  --hero-frame-w: max(35cqi, 356px);
  --hero-room: calc((100cqi - var(--hero-frame-w)) / 2 - var(--margin) - var(--gutter));
  --hero-display: calc(var(--hero-room) / 4.4);
  --section-display: calc(var(--hero-room) / 6.35);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* anchors and focused elements stop below the sticky header */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; scroll-padding-top: var(--header-h); }
/* clip, not hidden: no scroll container, so the sticky header keeps working; the display lines never push
   the page sideways while the fallback face (wider than Archivo at 62%) is shown. The root carries it too,
   so the body's own value is not handed to the viewport and the body really clips. */
html { overflow-x: clip; }
body {
  margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--step-body); font-weight: 400; line-height: 1.5;
  font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }
ul[class] { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- type ---------- */
.display, .head {
  font-weight: 800; font-stretch: 62%; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 0.9; text-wrap: balance; hyphens: none;
}
.display { font-size: var(--step-display); }
.head { font-size: var(--step-head); }
.lead { font-size: var(--step-lead); line-height: 1.35; }
.small { font-size: var(--step-small); line-height: 1.45; }
.muted { color: var(--muted); }
p { max-width: 62ch; text-wrap: pretty; }
.link-plain {
  text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em;
  text-decoration-color: var(--line-rest); transition: text-decoration-color var(--t-hover) ease, opacity var(--t-press) ease;
}
/* links answer the pointer by inking their underline, and give a little on press */
@media (hover: hover) and (pointer: fine) {
  .link-plain:hover { text-decoration-color: currentColor; }
}
a:not(.btn):active { opacity: 0.7; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the first stop for the keyboard: hidden until focused, then a plain tile above the header */
.skip-link {
  position: absolute; left: var(--margin); top: 0.75rem; z-index: 60;
  display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.4rem;
  background: var(--ink); color: var(--bg); font-size: var(--step-small); font-weight: 500; text-decoration: none;
}
.skip-link:not(:focus) { width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
main:focus { outline: none; }
/* masked headline lines: each line clips its own text so it can rise from behind its lower edge */
.lines .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.lines [data-line] { display: block; }
/* the one arrow, drawn: the text face has no glyph for it */
.arw { display: inline-block; flex: none; width: 0.85em; height: 0.85em; vertical-align: -0.08em; }

/* ---------- layout ---------- */
.wrap { padding-inline: var(--margin); }
.grid, .wrap {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
}

/* ---------- button: one shape for the whole site ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.4rem;
  background: var(--accent); color: var(--on-accent);
  font-weight: 500; font-size: var(--step-small); line-height: 1.2; text-decoration: none; white-space: nowrap;
  border-radius: var(--radius);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background-color: var(--accent-hi); }
}

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); }
.nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 2rem; min-height: var(--header-h); }
.wordmark { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.02em; text-decoration: none; line-height: 1; }
.wordmark .ai { color: var(--accent); }
.nav-toggle { display: none; min-height: 3rem; padding: 0 0.25rem; font-size: var(--step-small); font-weight: 500; }
.nav-menu { display: flex; align-items: center; gap: 1.25rem 2rem; flex-wrap: wrap; }
.nav-links { display: flex; gap: 0 1.75rem; padding: 0; margin: 0; list-style: none; flex-wrap: wrap; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 3rem; font-size: var(--step-small); font-weight: 500;
  text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 0.07em;
  text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) ease, opacity var(--t-press) ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { text-decoration-color: currentColor; }
}
@media (min-width: 60em) {
  .nav { flex-wrap: nowrap; }
  .nav-menu { margin-left: auto; flex-wrap: nowrap; }
}
@media (max-width: 59.99em) {
  .js .nav-toggle { display: inline-flex; align-items: center; }
  .js .nav-menu { display: none; }
  .js .nav-menu.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem;
    position: absolute; top: 100%; left: 0; right: 0; padding: 0.5rem var(--margin) 1.5rem; background: var(--bg);
  }
  .js .nav-menu.is-open .nav-links { flex-direction: column; }
  .js .nav-menu.is-open .btn { align-self: flex-start; }
}

/* ---------- footer: contact as the headline, on the one field in the accent ---------- */
/* At least 90svh: notes and a way back up in the top row, a tall gap, then the e-mail address at the
   display step, flush left, and one row of small print. Text is --on-accent (5.24:1 on the accent). */
.site-footer {
  display: flex; flex-direction: column; justify-content: space-between; gap: 4rem;
  min-height: 90svh; padding-block: 2.5rem 1.5rem;
  background: var(--accent); color: var(--on-accent);
}
.site-footer :focus-visible { outline-color: var(--on-accent); }
.site-footer ::selection { background: var(--on-accent); color: var(--accent); }
.site-footer a {
  text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: 0.06em;
  text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) ease, opacity var(--t-press) ease;
}
.footer-top { align-items: start; row-gap: 0.5rem; font-size: var(--step-small); line-height: 1.45; }
.footer-wordmark { grid-column: 1 / 7; font-size: var(--step-lead); }
.footer-note { grid-column: 1 / 10; grid-row: 2; }
.footer-up { grid-column: 10 / -1; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: -0.6rem; font-weight: 500; }
.footer-mail {
  grid-column: 1 / -1; justify-self: start; display: block;
  /* set in capitals like every display line: at the display step the address then fills 83% of the
     measure (lowercase only 72%); it breaks once, before the @, when a phone is too narrow */
  font-size: var(--step-display); font-weight: 800; font-stretch: 62%; line-height: 0.9; letter-spacing: -0.01em;
  text-transform: uppercase; overflow-wrap: normal;
}
.footer-meta {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 2rem;
  margin-top: clamp(2rem, 4vw, 3rem); font-size: var(--step-small); line-height: 1.45;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer-meta p { margin: 0; }
/* the page the visitor is on (the two reading pages) keeps its underline */
.footer-legal a[aria-current="page"] { text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover { text-decoration-color: currentColor; }
}
@media (min-width: 48em) {
  .footer-wordmark { grid-column: 1 / 3; }
  .footer-note { grid-column: 3 / 8; grid-row: 1; align-self: center; }
}

/* ---------- legal dialogs ---------- */
dialog {
  width: min(44rem, calc(100% - 2 * var(--margin))); max-height: min(85vh, 56rem);
  margin: auto; padding: 0; overflow: hidden;
  background: var(--surface); color: var(--ink); border: 0; border-radius: var(--radius);
}
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: rgba(10, 10, 15, 0.82); }
/* Without JavaScript, or without showModal (old Safari: html.no-dialog), the hash link still shows the text
   (replaceState does not move :target, so never with a working dialog script). */
dialog:not([open]) { display: none; }
:is(html:not(.js), html.no-dialog) dialog:target { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 50; }
body:has(dialog[open]) { overflow: hidden; }
.dhead { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.75rem 0.75rem clamp(1.25rem, 3vw, 2rem); background: var(--surface); }
.dhead h2 { font-size: var(--step-lead); font-weight: 700; line-height: 1.2; }
.x { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; font-size: var(--step-lead); text-decoration: none; line-height: 1; }
.dbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.5rem clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem); }
.dbody h3 { font-size: var(--step-body); font-weight: 700; margin-top: 1.75rem; }
.dbody h3:first-child { margin-top: 0; }
.dbody p { margin-top: 0.5rem; color: var(--muted); }

/* ---------- home page sections follow (Tasks 2 to 9) ---------- */

/* ---------- opener: the sentence, the position, one quiet architecture drawing ---------- */
/* Type does the work. The headline runs on two lines at poster size, the position under it in one
   sentence, then the action. Beside it from 60em one abstract drawing of a system: inputs, one core,
   outputs, joined by right-angled lines, no words. A light travels through it slowly. */
.opener { container-type: inline-size; display: grid; align-items: center; padding-block: clamp(3rem, 8vw, 6rem); }
.opener-grid { align-items: center; row-gap: clamp(2rem, 4vw, 3rem); }
.opener-h {
  grid-column: 1 / -1;
  font-weight: 800; font-stretch: 62%; text-transform: uppercase; letter-spacing: -0.01em;
  line-height: 0.88; hyphens: none; white-space: nowrap;
  /* "ERST VERSTEHEN." is 6.35em wide in this face: it fills the measure, capped at the display step */
  font-size: min(var(--step-display), calc((100cqi - 2 * var(--margin)) / 6.6));
}
.opener-h .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.opener-h [data-line] { display: block; }
.opener-foot { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 1.75rem; }
.opener-text { margin: 0; max-width: 34ch; }
.arch { display: none; }

@media (min-width: 60em) {
  .opener { min-height: calc(100svh - var(--header-h)); }
  .opener-h { grid-column: 1 / 9; font-size: min(var(--step-display), calc((100cqi - 2 * var(--margin)) * 0.62 / 6.6)); }
  .opener-foot { grid-column: 1 / 7; }
  .arch { display: block; grid-column: 9 / -1; grid-row: 1 / span 2; width: 100%; height: auto; align-self: center; }
}
.arch-lines path { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.5; }
.arch-nodes rect { fill: var(--bg); stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.5; }
.arch-pulse rect { fill: none; }

/* ---------- intro: the position as one statement ---------- */
.intro { padding-block: clamp(4rem, 9vw, 8rem); background: var(--surface); }
.intro-text {
  grid-column: 1 / -1; max-width: 30ch; margin: 0;
  font-size: min(2.25rem, max(1.375rem, 3.6cqi)); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em;
}
.intro { container-type: inline-size; }
@media (min-width: 60em) { .intro-text { grid-column: 2 / 12; max-width: 58ch; font-size: 2.25rem; } }

/* ---------- kompetenzen: four competences, the names carry the section ---------- */
.kompetenzen { padding-block: var(--section) calc(var(--section) * 0.7); container-type: inline-size; }
.komp-h, .vorgehen-h, .grund-h {
  grid-column: 1 / -1;
  font-weight: 800; font-stretch: 62%; text-transform: uppercase; letter-spacing: -0.01em;
  line-height: 0.95; hyphens: none;
  font-size: min(var(--step-head), calc((100cqi - 2 * var(--margin)) / 7));
}
.komp-h .line { display: block; }
.komp-list { grid-column: 1 / -1; display: grid; margin: clamp(2.5rem, 6vw, 5rem) 0 0; }
.komp-item { display: grid; row-gap: 0.75rem; padding-block: clamp(1.75rem, 3vw, 2.75rem); }
.komp-item dt { font-size: var(--step-lead); font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; hyphens: none; text-wrap: balance; }
.komp-item dd { margin: 0; max-width: 46ch; text-wrap: pretty; }
@media (min-width: 48em) {
  .komp-item dt { font-size: 2rem; }
}
@media (min-width: 60em) {
  .komp-list { grid-column: 3 / -1; }
  .komp-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); align-items: baseline; }
  .komp-item dt { font-size: 2.25rem; }
}

/* ---------- vorgehen: the four steps, the heading holds while they pass ---------- */
.vorgehen { padding-block: calc(var(--section) * 0.7) var(--section); container-type: inline-size; }
.vorgehen-grid { align-items: start; }
.steps { grid-column: 1 / -1; display: grid; gap: clamp(2.5rem, 5vw, 4rem); margin: clamp(2.5rem, 6vw, 5rem) 0 0; padding: 0; list-style: none; }
.step h3 { font-size: var(--step-lead); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
.step p { margin-top: 0.6rem; max-width: 44ch; }
@media (min-width: 48em) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
}
@media (min-width: 60em) {
  .vorgehen-h { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + 2rem); }
  .steps { grid-column: 6 / -1; margin-top: 0.4rem; }
  .step h3 { font-size: 2.25rem; }
}

/* ---------- grundsaetze: four principles on a field one tone up ---------- */
.grundsaetze { padding-block: clamp(4rem, 9vw, 8rem); background: var(--surface); container-type: inline-size; }
.grund-list { grid-column: 1 / -1; display: grid; gap: 1.75rem; margin: clamp(2rem, 5vw, 4rem) 0 0; padding: 0; list-style: none; }
.grund-list li { max-width: 34ch; }
.grund-list b { display: block; font-size: var(--step-lead); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 0.4rem; }
@media (min-width: 48em) { .grund-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; } }
@media (min-width: 75em) { .grund-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- references page (/projekte/): type only ---------- */
.pj-intro { padding-top: clamp(3rem, 9vw, 8rem); container-type: inline-size; }
.pj-h {
  grid-column: 1 / -1;
  font-weight: 800; font-stretch: 62%; text-transform: uppercase; letter-spacing: -0.01em;
  line-height: 0.9; hyphens: none; font-size: var(--step-display);
}
.pj-h .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.pj-h [data-line] { display: block; }
.pj-lead { grid-column: 1 / -1; margin-top: clamp(1.5rem, 3vw, 2.5rem); max-width: 40ch; font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.005em; }

.ref { padding-top: var(--section); }
.ref-grid { row-gap: clamp(1.5rem, 3vw, 2.5rem); }
.ref-head, .ref-body, .ref-quote { grid-column: 1 / -1; }
.ref-sector { color: var(--muted); font-weight: 500; }
.ref-title { margin-top: 0.4rem; font-size: var(--step-lead); font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.ref-body { display: grid; gap: 1.5rem; }
.ref-part h3 { font-size: var(--step-body); font-weight: 600; }
.ref-part p { margin-top: 0.35rem; }
.ref-quote blockquote p { font-size: var(--step-lead); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; max-width: 40ch; }
.ref-quote figcaption { margin-top: 0.6rem; color: var(--muted); }
.ref-quote cite { font-style: normal; }
@media (min-width: 48em) {
  .ref-body { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
  .ref-title { font-size: 2rem; }
}
@media (min-width: 60em) {
  .ref-head { grid-column: 1 / 5; }
  .ref-body { grid-column: 5 / -1; }
  .ref-quote { grid-column: 5 / -1; }
  .ref-title { font-size: 2.25rem; }
}

/* the closing line with the action; /ki-automatisierung/ closes with it too */
.pj-close { padding-block: var(--section); }
.pj-close-text { grid-column: 1 / -1; max-width: 24ch; font-size: var(--step-lead); font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; }
.pj-close .btn { grid-column: 1 / -1; justify-self: start; margin-top: 1.75rem; }
@media (min-width: 60em) {
  .pj-close-grid { align-items: end; }
  .pj-close-text { grid-column: 1 / 8; max-width: none; }
  .pj-close .btn { grid-column: 9 / -1; margin-top: 0; }
}

/* a quiet text link with the drawn arrow, which moves a little toward where it leads */
.more-link {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 3rem; font-weight: 500;
  text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em;
  text-decoration-color: var(--line-rest); transition: text-decoration-color var(--t-hover) ease, opacity var(--t-press) ease;
}
.more-link span { display: inline-block; transition: transform var(--t-hover) var(--ease-out); }
.more-link:active span { transform: translateX(0.2em); }
@media (hover: hover) and (pointer: fine) {
  .more-link:hover { text-decoration-color: currentColor; }
  .more-link:hover span { transform: translateX(0.25em); }
}

/* ---------- testimonial band: one quotation spread edge to edge ---------- */
/* Each line is a flex row: its first word on the left margin, its last on the right, the middle word
   floating. Two lines at every width (it is display type, so the two-line rule holds). */
.band { padding: clamp(5.5rem, 10vw, 9rem) var(--margin); background: var(--surface); }
.band-quote p {
  display: flex; flex-direction: column; row-gap: 0.6em; max-width: none;
  /* the display step; the guard only bites under ~380px, where "HAT SICH GELOHNT." (7.9em with its
     gaps) would otherwise run past the margin */
  font-size: min(var(--step-display), calc((100vw - 2 * var(--margin)) / 7.9)); font-weight: 800; font-stretch: 62%; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 0.9; hyphens: none; white-space: nowrap;
}
.band-line { display: flex; justify-content: space-between; gap: 0 0.25em; }
.band-cite {
  display: flex; flex-direction: column; margin-top: clamp(2.5rem, 6vw, 4.5rem);
  font-size: var(--step-body); line-height: 1.35;
}
.band-cite cite { font-style: normal; font-weight: 600; }
.band-cite > :nth-child(2) { align-self: center; }
.band-cite > :nth-child(3) { align-self: flex-end; }
@media (min-width: 48em) {
  .band-cite { flex-direction: row; justify-content: space-between; align-items: baseline; }
}
/* the two shorter voices and the way to the references, on the same field under the attribution and spread
   like it: the first voice on the left margin, the second from the middle, the link on the right margin.
   On a phone they stack and alternate, the second voice against the right margin. */
.stimmen-row { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; margin-top: clamp(4.5rem, 9vw, 8rem); }
.stimme blockquote p { max-width: 26ch; font-size: var(--step-lead); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.stimme figcaption { margin-top: 0.6rem; font-size: var(--step-small); line-height: 1.45; color: var(--muted); }
.stimme cite { font-style: normal; }
.stimme + .stimme { justify-self: end; max-width: 85%; }
.stimmen-link { max-width: none; margin-top: -0.75rem; }
@media (min-width: 48em) {
  .stimmen-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; }
  .stimme:first-child { grid-column: 1 / 6; }
  .stimme + .stimme { grid-column: 7 / -1; justify-self: stretch; max-width: none; }
  .stimmen-link { grid-column: 7 / -1; margin-top: -1rem; }
}
@media (min-width: 60em) {
  .stimme:first-child { grid-column: 1 / 5; }
  .stimme + .stimme { grid-column: 5 / 10; }
  .stimmen-link { grid-column: 10 / -1; grid-row: 1; justify-self: end; margin-top: 0; }
}

/* ---------- about: the portrait as a drop capital ---------- */
/* No visible heading. The biography at the lead step; the square portrait floats at its start, four
   lines tall on a phone and three from 60em, so the next line returns to the left edge like a drop
   capital. Three facts in the two left columns on desktop, a row under the text on a phone. */
.about { padding-top: clamp(5.5rem, 10vw, 9rem); }
.about-grid { align-items: start; }
.about-text { grid-column: 1 / -1; grid-row: 1; font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.005em; }
.about-text p { max-width: none; }
.about-text p + p { margin-top: 1.25em; }
.about-text b { font-weight: 600; }
.about-portrait { float: left; width: calc(5em - 2px); height: calc(5em - 2px); margin: 0 0.5em 0 0; object-fit: cover; background: var(--surface); }
.about-facts {
  grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin-top: 2rem;
  font-size: var(--step-small); line-height: 1.45; color: var(--muted);
}
.about-facts li { display: flex; align-items: center; min-height: 2.75rem; }
.about-facts a {
  color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em;
  text-decoration-color: var(--line-rest); transition: text-decoration-color var(--t-hover) ease, opacity var(--t-press) ease;
}
@media (hover: hover) and (pointer: fine) {
  .about-facts a:hover { text-decoration-color: currentColor; }
}
@media (min-width: 60em) {
  .about-text { grid-column: 3 / 12; line-height: 1.2; }
  .about-portrait { width: calc(3.6em - 2px); height: calc(3.6em - 2px); }
  .about-facts { grid-column: 1 / 3; grid-row: 1; display: grid; gap: 0.15rem; margin-top: 0; }
  .about-facts li { min-height: 0; }
  .about-facts a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: -0.6rem; }
}

/* ---------- faq: a wide heading, the questions indented ---------- */
/* Six <details>. Rows are separated by space only; the open row lies on a tile one tone up that reaches
   24px past the text on every side (to both screen edges on a phone). The first one starts open. */
.faq { padding-top: var(--section); container-type: inline-size; }
.faq-h {
  grid-column: 1 / -1;
  font-weight: 800; font-stretch: 62%; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.9; hyphens: none;
  font-size: min(var(--step-head), calc((100cqi - 2 * var(--margin)) / 8.4));
}
.faq-list { grid-column: 1 / -1; display: grid; row-gap: 28px; margin-top: clamp(3rem, 6vw, 5rem); }
.faq-item { margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); }
.faq-item[open] { margin-block: -24px; padding-block: 24px; background: var(--surface); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 3rem;
  font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.005em; list-style: none; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.06em;
  text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { max-width: 48ch; margin-top: 0.75rem; }
/* the chevron: two 2px strokes, pointing down when closed and up when open */
.chev { flex: none; position: relative; width: 1em; height: 1em; transition: transform var(--t-hover) var(--ease-out); }
.chev::before, .chev::after {
  content: ''; position: absolute; top: calc(50% - 1px); width: 0.42em; height: 2px; background: currentColor;
  transition: transform var(--t-hover) var(--ease-out);
}
.chev::before { left: 0.14em; transform: rotate(40deg); }
.chev::after { right: 0.14em; transform: rotate(-40deg); }
.faq-item[open] .chev::before { transform: rotate(-40deg); }
.faq-item[open] .chev::after { transform: rotate(40deg); }
@media (hover: hover) and (pointer: fine) {
  .faq-item summary:hover { text-decoration-color: currentColor; }
  /* the chevron leans the way the row will move */
  .faq-item:not([open]) summary:hover .chev { transform: translateY(0.12em); }
  .faq-item[open] summary:hover .chev { transform: translateY(-0.12em); }
}
@media (min-width: 48em) {
  .faq-list { row-gap: 36px; }
}
@media (min-width: 60em) {
  .faq-h { font-size: var(--section-display); }
  .faq-list { grid-column: 5 / -1; }
  .faq-item { margin-inline: -24px; padding-inline: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .chev, .chev::before, .chev::after, .more-link span { transition: none; }
}

/* ---------- contact: a sentence, the portrait, two links ---------- */
/* Desktop: three elements hang from one top line: the sentence in columns 1 to 5, the portrait in 8 to 9,
   the links and the reply line in 10 to 12. Phone: the sentence, then the small portrait with the two
   links beside it, then the reply line across the width. No form. */
.contact { padding-block: clamp(6rem, 11vw, 10rem) clamp(5rem, 8vw, 7.5rem); }
.contact-grid { grid-template-columns: 96px minmax(0, 1fr); align-items: start; row-gap: 0; }
.contact-text { grid-column: 1 / -1; margin-bottom: 2rem; font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.005em; }
.contact-portrait { grid-column: 1; grid-row: 2; width: 96px; height: 96px; object-fit: cover; }
.contact-links { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; margin-top: -0.6rem; }
.contact-links .link-plain {
  display: inline-flex; align-items: center; min-height: 3rem;
  font-weight: 500; text-decoration-thickness: 0.07em;
}
.contact-note { grid-column: 1 / -1; grid-row: 3; margin-top: 1.25rem; font-size: var(--step-small); line-height: 1.45; color: var(--muted); }
@media (min-width: 37.5em) {
  .contact-grid { grid-template-columns: 150px minmax(0, 1fr); }
  .contact-portrait { width: 150px; height: 150px; }
  .contact-text { max-width: 30ch; }
}
/* desktop: the reply line sits on the portrait's lower edge, under the links */
@media (min-width: 60em) {
  .contact-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .contact-text { grid-column: 1 / 6; grid-row: 1 / 3; margin: 0; max-width: none; }
  .contact-portrait { grid-column: 8 / 10; grid-row: 1 / 3; width: 160px; height: 160px; }
  .contact-links { grid-column: 10 / -1; grid-row: 1; margin-top: -0.75rem; }
  .contact-note { grid-column: 10 / -1; grid-row: 2; align-self: end; margin: 0; }
}

/* ---------- reading page (/ki-automatisierung/) ---------- */
/* A reading page set in type alone, no pictures. The keyword runs as a two-line poster headline at the
   display step, guarded so the longer line ("KI-AUTOMATISIERUNG") fits the measure on a small phone.
   Section headings share the home page's section size (--step-head on phones and tablets,
   --section-display from 60em). Neighbouring sections change composition:
   seo-split   the heading holds in columns 1 to 6 while its text runs in 8 to 12
   seo-rows    heading across, a short note in 1 to 4, rows with the name in its own column in 5 to 12
   seo-field   a field of its own one tone up, the heading, then the four rules side by side
   The page closes with the references page's closing line. */
.seo-intro, .seo-sec { container-type: inline-size; }
.seo-intro { padding-top: clamp(3rem, 9vw, 8rem); }
.seo-h {
  grid-column: 1 / -1;
  font-weight: 800; font-stretch: 62%; text-transform: uppercase; letter-spacing: -0.01em;
  line-height: 0.9; hyphens: none; white-space: nowrap;
  /* the longer line is 7.75em wide in this face ("KI-AUTOMATISIERUNG"); the guard only bites on phones */
  font-size: min(var(--step-display), calc((100cqi - 2 * var(--margin)) / 7.9));
}
.seo-intro-text {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 1.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.seo-lead { max-width: 46ch; font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.005em; }

.seo-sec { margin-top: var(--section); }
.seo-grid { align-items: start; }
.seo-grid > * { grid-column: 1 / -1; }
.seo-h2 {
  font-weight: 800; font-stretch: 62%; text-transform: uppercase; letter-spacing: -0.01em;
  line-height: 0.9; hyphens: none; text-wrap: balance;
  font-size: min(var(--step-head), calc((100cqi - 2 * var(--margin)) / 8.4));
}
/* "WAS KI-AUTOMATISIERUNG" is the longest first line (9.6em): the guard keeps the heading on two lines on a phone */
.seo-h2--long { font-size: min(var(--step-head), calc((100cqi - 2 * var(--margin)) / 9.8)); }
/* keeps the keyword whole: no break after "KI-" */
.seo-nw { white-space: nowrap; }
.seo-body { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.seo-body > * + * { margin-top: 1em; }
/* the first paragraph is the statement, one step up */
.seo-first { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.005em; }
.seo-note { margin-top: 1.5rem; max-width: 40ch; }

.seo-item h3 { font-size: var(--step-lead); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.seo-item p { margin-top: 0.5rem; }
.seo-items, .seo-rules, .seo-flow { display: grid; row-gap: 2rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }

.seo-field { --field: #1c1c27; padding-block: clamp(4rem, 9vw, 8rem); background: var(--field); }

/* tablet: the measure stays readable */
@media (min-width: 37.5em) {
  .seo-items .seo-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--gutter); align-items: baseline; }
  .seo-items .seo-item p { margin-top: 0; }
  .seo-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; }
}
@media (min-width: 37.5em) and (max-width: 59.99em) {
  .seo-body, .seo-flow { max-width: 40rem; }
}

@media (min-width: 60em) {
  .seo-h2 { font-size: var(--section-display); }

  .seo-intro-text { grid-column: 1 / 8; }

  .seo-split .seo-h2 { grid-column: 1 / 7; grid-row: 1; position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .seo-split :is(.seo-body, .seo-flow) { grid-column: 8 / -1; grid-row: 1; margin-top: 0; }
  .seo-split .seo-flow { row-gap: 2.5rem; }

  .seo-rows .seo-note { grid-column: 1 / 5; grid-row: 2; margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-right: var(--gutter); }
  .seo-rows .seo-items { grid-column: 5 / -1; grid-row: 2; margin-top: clamp(2.5rem, 4vw, 3.5rem); }

  .seo-field .seo-text { grid-column: 1 / 8; }
  .seo-rules { margin-top: clamp(3rem, 5vw, 4.5rem); }
}
/* wide desktop: the four rules in one row */
@media (min-width: 75em) {
  .seo-rules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- motion layer ---------- */
/* Everything that moves is transform and opacity. Movement needs two switches set by site.js: .js and
   .motion (never set under reduced motion), and each rule also sits in a no-preference block, so the
   reduced state is simply the finished page. Nothing on the first screen is hidden except the headline
   lines, which rise from behind their own lower edge on load; the sentence and the button under them
   follow. Further down, site.js marks the parts of each section (.rv plus a manner) and adds .is-in when
   they scroll into view; --rv-d staggers the parts that arrive together. */
@media (prefers-reduced-motion: no-preference) {
  /* signature: the masked headline. The second line follows 110ms after the first. */
  .js.motion .lines [data-line] { animation: line-up 900ms var(--ease-out) 150ms backwards; }
  .js.motion .lines .line + .line [data-line] { animation-delay: 260ms; }
  .js.motion :is(.opener-foot, .seo-intro-text) > *,
  .js.motion .pj-intro .pj-lead { animation: rise-in 700ms var(--ease-out) 600ms backwards; }
  .js.motion :is(.opener-foot, .seo-intro-text) > :nth-child(2) { animation-delay: 690ms; }

  /* section entrances */
  .js.motion .rv {
    transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out);
    transition-delay: var(--rv-d, 0ms);
  }
  .js.motion .rv:not(.is-in) { opacity: 0; }
  .js.motion .rv-rise:not(.is-in) { transform: translateY(24px); }
  .js.motion .rv-line:not(.is-in) { transform: translateY(32px); }
  .js.motion .rv-row:not(.is-in) { transform: translateY(16px); }
  .js.motion .rv-settle:not(.is-in) { transform: scale(1.04); }

  /* the one moving picture: a light travels through the architecture drawing, one node after the other */
  .js.motion .arch-pulse rect { fill: var(--accent); animation: arch-pulse 7.5s var(--ease-in-out) infinite backwards; }
  .js.motion .arch-pulse .p2 { animation-delay: 0.6s; }
  .js.motion .arch-pulse .p3 { animation-delay: 2.2s; }
  .js.motion .arch-pulse .p4 { animation-delay: 3.8s; }
  .js.motion .arch-pulse .p5 { animation-delay: 4.4s; }
}
@keyframes line-up { from { transform: translateY(105%); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes arch-pulse { 0%, 30%, 100% { opacity: 0; } 12% { opacity: 0.85; } }
/* reduced motion: final states, no travel. Colour and opacity feedback stays. */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color var(--t-hover) ease; }
  .btn:active { transform: none; }
  .more-link span { transition: none; transform: none !important; }
  .faq-item summary .chev { transform: none !important; }
}
@media print {
  .js .rv { opacity: 1 !important; transform: none !important; }
}