/* =============================================================================
   raffaela-z-marketing.css
   Globally organised, single stylesheet. Cascade is steered by @layer, not by
   selector weight or file position (RESPONSIVE-BEST-PRACTICE.md § Spezifität).
     reset       — box-sizing, element resets
     base        — design tokens (fonts FROZEN, Contract §79), element defaults
     components  — every component, top-to-bottom in DOM order
     layout      — desktop macro-structure, >= 960px (STRUCTURE LOCK)
     responsive  — the < 960px ladder, broad -> narrow, + prefers-reduced-motion
   Later layers win regardless of specificity. No section-scoped breakpoint
   blocks. One property / selector / breakpoint = one place.

   STRUCTURE LOCK (2026-08-29): desktop grid, container, hero height, H1/CTA
   anchors and section flow are fixed. Only the explicitly approved local
   offsets below may change without a new instruction from Raffaela.
   ============================================================================= */

@layer reset, base, components, layout, responsive;

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

  html {
    scroll-behavior: smooth;
  }

  button, input, textarea {
    font: inherit;
  }

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

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

@layer base {
  :root {
    --paper-bright: #f3f3f5;
    --night: #101a2e;
    --night-soft: #17243e;
    --petrol: #0b6875;
    --petrol-on-dark: #86b1b4;
    --acid: #d7de32;
    --acid-ink: #4c5800;
    --support-blue: #1b3658;
    --muted-dark: #53647d;
    --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
    --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --page-max: 1240px;
    --page: min(calc(100% - 64px), var(--page-max));
    --page-x: max(32px, calc((100vw - var(--page-max)) / 2));
    --rail: 150px;
    --grid-gap: 16px;
    --rail-x: var(--page-x);
    --content-start: calc(var(--page-x) + var(--rail) + var(--grid-gap));
    --content-end: var(--page-x);
    --header-height: 84px;

    /* Linien auf hellem Grund — alle aus --night, nur die Deckung variiert. */
    /* Y-Achse der Outcomes-Oberkante. Divider, „Connected outcomes"-Label und
       der Beginn der Kacheln haengen alle daran — vorher waren es drei
       unabhaengige Werte, wodurch der Abstand Label->Kachel zwischen 21px und
       -5px (Ueberlappung!) schwankte. */
    --outcomes-rule-y: 47px;
    --hairline: rgba(16, 26, 46, 0.3);
    --hairline-faint: rgba(16, 26, 46, 0.22);
    --hairline-soft: rgba(16, 26, 46, 0.18);
    --hairline-strong: rgba(16, 26, 46, 0.42);

    /* Linien + Text auf dunklem Grund. Die Abstufungen sind sichtbar
       verschieden (0.3 vs 0.22 = 18/255 auf --night), also echte Gewichte,
       keine Streuung. */
    --rule-on-dark: rgba(242, 242, 242, 0.3);
    --rule-on-dark-soft: rgba(242, 242, 242, 0.28);
    --rule-on-dark-faint: rgba(242, 242, 242, 0.26);
    --rule-on-dark-thin: rgba(242, 242, 242, 0.22);
    --rule-petrol-on-dark: rgba(134, 177, 180, 0.7);
    --ink-on-dark: rgba(242, 242, 242, 0.78);

    /* Linien aus --support-blue. Waren lokal in .outcomes definiert, werden
       aber auch von .about-systems gebraucht — darum global. */
    --rule-blue-strong: rgba(27, 54, 88, 0.5);
    --rule-blue: rgba(27, 54, 88, 0.36);
    --rule-blue-faint: rgba(27, 54, 88, 0.25);

    /* Flaechenwaschungen aus --petrol / --support-blue. */
    --wash-petrol-hover: rgba(11, 104, 117, 0.14);
    --wash-petrol-selected: rgba(11, 104, 117, 0.12);
    --wash-petrol-panel: rgba(11, 104, 117, 0.065);
    --wash-petrol-card: rgba(11, 104, 117, 0.05);
    --wash-petrol-faint: rgba(11, 104, 117, 0.045);
    /* Deckend, nicht 0.97: bei gescrollter Seite schimmerten H1/H2 durch die
       Sticky-Header-Flaeche. Ein Header, der Inhalt ueberlagert, muss ihn
       verdecken — Transparenz war hier kein Effekt, sondern ein Rest. */
    --wash-paper: rgb(243, 243, 245);
    --wash-paper-solid: rgba(243, 243, 245, 0.96);
    --rule-muted: rgba(83, 100, 125, 0.35);

    /* Typo-Rollen. Hier stehen die Desktop-Werte; der <960px-Block
       ueberschreibt dieselben Namen mit der fluiden Rampe. Eine Rolle =
       ein Name ueber alle Breakpoints. */
    --fs-h2: clamp(39px, 3.7vw, 58px);
    --lh-h2: 0.96;
    --ls-h2: -0.05em;
    --fs-body: 15px;
    --fs-small: 12px;
    --fs-meta: 10px;
    --ls-meta: 0.08em;

    --focus-ring: 2px solid var(--acid);
  }

  body {
    margin: 0;
    overflow-x: hidden;
    color: var(--night);
    background: var(--paper-bright);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
  }

  /* text-wrap ist vererbt: balance auf der Überschrift greift damit auch in
     den inneren Spans (.pain-title im Button, Frage-Span in <summary>), die
     das eigentliche Umbruchfeld sind. `pretty` bewusst NICHT — fehlt in
     Firefox (Stand 2026-08-31). Browser deckeln balance selbst bei langen
     Überschriften, der Fallback ist normaler Umbruch. */
  h1, h2, h3 {
    color: var(--support-blue);
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
  }

  ::selection {
    color: var(--night);
    background: var(--acid);
  }
}

@layer components {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100;
    padding: 10px 14px;
    color: var(--night);
    background: var(--acid);
    transform: translateY(-160%);
  }

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

  .hero-shell {
    position: relative;
    background: var(--paper-bright);
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: var(--rail) 1fr auto;
    align-items: center;
    width: var(--page);
    min-height: var(--header-height);
    margin: 0 auto;
    color: var(--night);
  }

  .site-header::before {
    position: absolute;
    z-index: -1;
    inset: 0 calc(50% - 50vw);
    content: "";
    background: var(--wash-paper);
    border-bottom: 1px solid var(--hairline-faint);
  }

  .wordmark {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-left: 0;
    line-height: 1;
  }

  .wordmark::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 32px;
    content: "";
    background: var(--hairline-faint);
    transform: translateY(-50%);
  }

  /* v39: ruhige navigation-nahe Identitaetszeile, Sans 16px/400 — auf allen
     Breiten gleich, darum hier und nirgends sonst. */
  .wordmark-rz {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.01em;
  }

  .wordmark-marketing {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.14em;
  }

  .place {
    margin: 2px 0 0 0;
    font-family: var(--mono);
    font-size: var(--fs-meta);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: var(--ls-meta);
    white-space: nowrap;
  }

  .primary-navigation {
    display: flex;
    align-items: flex-start;
    gap: clamp(18px, 2vw, 31px);
    padding-top: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
  }

  .primary-navigation a {
    position: relative;
    padding-bottom: 12px;
  }

  .primary-navigation a::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: "";
    background: var(--petrol);
    opacity: 0;
    transform: scaleX(0.4);
    transform-origin: left;
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .primary-navigation a:hover::after, .primary-navigation a:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .primary-navigation .nav-contact::after {
    background: var(--acid);
    opacity: 1;
    transform: scaleX(1);
  }

  /* Kompakte Sprachwahl am rechten Ende. Der aktuelle Code bleibt sichtbar;
     die echten Sprachlinks liegen im nativen Details-Menue. */
  .language-switcher {
    position: relative;
    margin-left: 0;
    padding-left: clamp(18px, 2vw, 31px);
  }

  .language-switcher::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 32px;
    content: "";
    background: var(--hairline-faint);
    transform: translateY(-50%);
  }

  .language-switcher summary {
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    padding-bottom: 12px;
    color: var(--night);
    cursor: pointer;
    list-style: none;
  }

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

  .language-chevron {
    display: inline-block;
    color: var(--petrol);
    transform: translateY(-1px);
    transition: transform 160ms ease;
  }

  .language-switcher[open] .language-chevron {
    transform: translateY(1px) rotate(180deg);
  }

  .language-options {
    position: absolute;
    z-index: 60;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    min-width: 116px;
    padding: 8px 14px;
    background: var(--paper-bright);
    border: 1px solid var(--hairline);
  }

  .primary-navigation .language-options a {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 6px 0;
    white-space: nowrap;
  }

  .primary-navigation .language-options a::after {
    content: none;
  }

  .primary-navigation a[aria-current="page"] {
    color: var(--muted-dark);
    pointer-events: none;
  }

  .primary-navigation a[aria-current="page"]::after {
    content: none;
  }

  /* Der Wegweiser-CTA doppelt sich nicht: auf dem Desktop steht er in der Nav,
     unter 960px hier im Header und ist dafuer in der Nav ausgeblendet. */
  .header-attention {
    display: none;
  }

  .menu-toggle {
    display: none;
  }

  .hero {
    position: relative;
    display: grid;
    grid-template-columns: var(--rail) repeat(12, minmax(0, 1fr));
    align-items: end;
    width: var(--page);
    min-height: clamp(620px, calc(100svh - var(--header-height)), 820px);
    margin: 0 auto;
    padding-block: clamp(88px, 12vh, 132px);
    column-gap: var(--grid-gap);
    background: var(--paper-bright);
    border-bottom: 1px solid var(--hairline);
  }

  .page-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: var(--hairline);
  }

  .page-rail span {
    position: absolute;
    bottom: 18px;
    left: -20px;
    width: max-content;
    color: var(--muted-dark);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: var(--ls-meta);
    transform: rotate(-90deg);
    transform-origin: 20px 50%;
  }

  .hero-content {
    display: contents;
  }

  .hero h1 {
    grid-column: 2 / 11;
    margin: 0;
    color: var(--support-blue);
    font-family: var(--serif);
    font-size: clamp(62px, 9vw, 132px);
    font-weight: 400;
    line-height: 0.83;
    letter-spacing: -0.065em;
  }

  .hero h1 em {
    display: inline-block;
    color: var(--petrol);
    font-style: italic;
    font-weight: 400;
    white-space: nowrap;
  }

  .hero-senior-link {
    position: static;
    grid-column: 10 / 14;
    align-self: end;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: auto;
    min-height: 48px;
    margin-bottom: 4px;
    border-top: 1px solid var(--hairline);
    font-size: 16px;
  }

  .hero-senior-link > span:last-child {
    color: var(--acid);
    font-size: 24px;
    line-height: 1;
    transition: transform 160ms ease;
  }

  .hero-senior-link:hover > span:last-child, .hero-senior-link:focus-visible > span:last-child {
    transform: translateX(5px);
  }

  .hero-transition {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 266px minmax(0, 1fr);
    align-items: start;
    width: 100%;
    padding: 0;
    transform: translateY(-1px);
  }

  .hero-transition-line {
    height: 29px;
    border-bottom: 1px solid var(--hairline-faint);
  }

  .hero-transition-line-left {
    margin-right: -50px;
  }

  .hero-transition-line-right {
    margin-left: 50px;
  }

  .hero-notch {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    height: 57px;
    padding: 0 40px 0 43px;
    color: var(--night);
    background: var(--acid);
    clip-path: polygon(0 0, 100% 0, 89% 100%, 11% 100%);
    font-size: 16px;
    transform: translateX(50px);
  }

  .hero-notch span:last-child {
    font-size: 24px;
    line-height: 1;
  }

  .site-footer {
    position: relative;
    padding: 66px 0 30px;
    color: var(--night);
    background: var(--paper-bright);
  }

  .site-footer::before {
    display: none;
  }

  .site-footer::after {
    position: absolute;
    top: 39px;
    left: var(--page-x);
    width: 62px;
    height: 3px;
    content: "";
    background: var(--acid);
    transform: translateY(-1px);
  }

  .footer-body {
    display: grid;
    grid-template-columns: 306px minmax(280px, 1fr) 112px;
    align-items: start;
    width: var(--page);
    margin: 0 auto;
    column-gap: clamp(54px, 6.2vw, 96px);
  }

  .footer-identity {
    min-height: 112px;
    padding: 17px 22px;
    border: 1px solid var(--hairline);
  }

  .footer-identity p, .footer-group h2, .footer-copyright {
    margin: 0;
    color: var(--muted-dark);
    font-family: var(--mono);
    font-size: var(--fs-meta);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
  }

  .footer-identity h2 {
    position: relative;
    margin: 14px 0 0;
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .footer-identity h2::after {
    position: absolute;
    bottom: -16px;
    left: 0;
    width: 86px;
    height: 1px;
    content: "";
    background: var(--petrol);
  }

  /* gap traegt hier die 2.5.8-Abstandsausnahme: die Links sind kleiner als
     24px, also muss Mitte-zu-Mitte >= 24px bleiben. Bei 12px/1.4 sind das
     16.8px Zeilenhoehe + 9px = 25.8px, also wieder Reserve statt Punktlandung. */
  .footer-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }

  .footer-group h2 {
    margin-bottom: 6px;
  }

  .footer-group a, .footer-group span {
    color: var(--muted-dark);
    font-size: var(--fs-small);
    line-height: 1.4;
  }

  .footer-group a {
    width: fit-content;
  }

  .footer-group a:hover, .footer-group a:focus-visible {
    color: var(--petrol);
  }

  /* Im Fluss, nicht absolut: auf top:211px gepinnt lief das Copyright bei
     jeder Schriftgroesse 21px UNTER die Footer-Box hinaus und waere bei
     wachsendem Inhalt in das Linkraster gelaufen. Gleiche Achse wie
     .footer-body (var(--page), zentriert) — die Rechtsversetzung bleibt. */
  .footer-copyright {
    width: var(--page);
    margin: 34px auto 0;
    padding-top: 22px;
    border-top: 1px solid var(--hairline-faint);
  }

  /* Footer = Übersetzung des v32-Desktop: flache Identity-Signatur volle Breite,
     darunter die drei Linkgruppen als 2-Spalten-Raster, dann Copyright.
     Content-getrieben, kein fixes min-height. */

  .contact {
    position: relative;
    min-height: 684px;
    padding: 84px var(--content-end) 80px var(--content-start);
    color: var(--paper-bright);
    background: var(--night);
  }

  .contact::before, .contact::after {
    position: absolute;
    right: var(--page-x);
    left: var(--page-x);
    height: 1px;
    content: "";
    background: var(--rule-on-dark-thin);
  }

  .contact::before {
    top: 39px;
  }

  .contact::after {
    bottom: 40px;
  }

  .contact-rail {
    position: absolute;
    top: 39px;
    left: var(--rail-x);
    width: 1px;
    height: 309px;
    background: var(--rule-on-dark-thin);
  }

  .contact-inner {
    display: grid;
    grid-template-columns: minmax(330px, 1fr) minmax(600px, 689px);
    gap: clamp(100px, 9.5vw, 152px);
    align-items: start;
  }

  .contact-intro {
    padding-top: 8px;
  }

  .contact-intro h2 {
    margin: 0;
    color: var(--paper-bright);
    font-family: var(--serif);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
  }

  .contact-intro h2 em {
    color: var(--petrol-on-dark);
    font-style: italic;
    font-weight: 400;
    white-space: nowrap;
  }

  .contact-intro > p:not(.contact-note) {
    margin: 42px 0 0;
    font-size: 16px;
    line-height: 1.7;
  }

  .contact-note {
    margin: 44px 0 0;
    padding-top: 19px;
    color: var(--ink-on-dark);
    border-top: 1px solid var(--rule-petrol-on-dark);
    font-family: var(--mono);
    font-size: var(--fs-meta);
    line-height: 1.5;
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
  }

  .enquiry-form {
    position: relative;
    min-height: 476px;
    padding: 46px 50px 14px;
    color: var(--night);
    background: var(--paper-bright);
    border-top: 3px solid transparent;
  }

  .enquiry-form::before {
    position: absolute;
    top: -3px;
    left: 0;
    width: 90px;
    height: 3px;
    content: "";
    background: var(--acid);
  }

  .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px;
  }

  .form-field {
    position: relative;
  }

  .form-field label {
    display: block;
    color: var(--muted-dark);
    font-family: var(--mono);
    font-size: var(--fs-meta);
    line-height: 1.5;
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
  }

  .form-field input, .form-field textarea {
    display: block;
    width: 100%;
    min-height: 39px;
    padding: 6px 0;
    color: var(--night);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule-muted);
    border-radius: 0;
    resize: vertical;
  }

  .form-field textarea {
    min-height: 83px;
  }

  .form-field input[aria-invalid="true"], .form-field textarea[aria-invalid="true"] {
    border-bottom-color: var(--petrol);
  }

  .form-company {
    margin-top: 43px;
  }

  .form-message {
    margin-top: 50px;
  }

  .form-message label {
    position: relative;
    padding-left: 8px;
  }

  .form-message label::before {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 0;
    width: 3px;
    content: "";
    background: var(--acid);
  }

  .form-message > p {
    margin: 18px 0 0;
    color: var(--muted-dark);
    font-size: var(--fs-small);
  }

  .field-error {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    color: var(--petrol);
    font-size: var(--fs-small);
    line-height: 1.5;
  }

  .enquiry-form > button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-height: 56px;
    margin-top: 25px;
    padding: 0 19px 0 26px;
    color: var(--night);
    background: var(--acid);
    border: 0;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    font-size: 16px;
  }

  /* Pfeil auf die seitenweite CTA-Sprache angeglichen (24px/400) wie Hero-Spickel;
     der Submit bleibt gefüllter 56px-Acid-Button. Freigabe 2026-08-30. */

  .enquiry-form > button span:last-child {
    font-size: 24px;
    font-weight: 400;
    transition: transform 160ms ease;
  }

  .enquiry-form > button:hover span:last-child, .enquiry-form > button:focus-visible span:last-child {
    transform: translateX(5px);
  }

  /* Painpoint-Übernahme ins Formular — auf ALLEN Breakpoints (JS-Riegel entfernt).
     „Select one. It will travel with you to the enquiry." muss auch mobil halten. */

  .selected-starting-point {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 24px;
    margin: 0 0 30px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--rule-muted);
  }

  .selected-starting-point[hidden] {
    display: none;
  }

  .selected-starting-point > p {
    margin: 0;
  }

  .selected-starting-point > p:first-child {
    grid-column: 1 / -1;
    color: var(--muted-dark);
    font-family: var(--mono);
    font-size: var(--fs-meta);
    line-height: 1.5;
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
  }

  .selected-starting-point > p:nth-child(2) {
    color: var(--petrol);
    font-size: var(--fs-body);
    line-height: 1.4;
  }

  .selected-starting-point button {
    align-self: end;
    min-height: 44px;
    padding: 4px 0;
    color: var(--petrol);
    background: transparent;
    border: 0;
    font-family: var(--mono);
    font-size: var(--fs-meta);
    line-height: 1.5;
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
    cursor: pointer;
  }

  .form-status {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    margin: 0;
    color: var(--paper-bright);
    font-size: var(--fs-small);
  }

  .form-status a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .form-privacy {
    margin: 22px 0 0;
    color: var(--muted-dark);
    font-size: var(--fs-small);
    line-height: 1.55;
  }

  .form-privacy a {
    color: var(--petrol);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

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

  .enquiry-form > button:disabled {
    cursor: wait;
    opacity: 0.7;
  }

  .legal-page {
    min-height: 100vh;
    padding: 52px var(--content-end) 96px var(--content-start);
    color: var(--night);
    background: var(--paper-bright);
  }

  .legal-page-header,
  .legal-content {
    width: min(100%, 820px);
    margin-inline: auto;
  }

  .legal-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--hairline);
  }

  .legal-page-header .wordmark {
    position: static;
    transform: none;
  }

  .legal-page-header > a:last-child {
    min-height: 44px;
    color: var(--petrol);
    font-family: var(--mono);
    font-size: var(--fs-meta);
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
  }

  .legal-content {
    padding-top: 70px;
  }

  .legal-content h1 {
    max-width: 11ch;
    margin: 0 0 54px;
    font-family: var(--serif);
    font-size: clamp(3rem, 7vw, 6.5rem);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.055em;
  }

  .legal-content h2 {
    margin: 48px 0 14px;
    font-family: var(--serif);
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    font-weight: 400;
    line-height: 1.05;
  }

  .legal-content h2::before {
    display: inline-block;
    width: 30px;
    height: 3px;
    margin: 0 12px 0 0;
    content: "";
    background: var(--acid);
    vertical-align: middle;
  }

  .legal-content p,
  .legal-content li {
    max-width: 72ch;
    font-size: var(--fs-body);
    line-height: 1.72;
  }

  .legal-content a {
    color: var(--petrol);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .legal-content dl {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 12px 24px;
  }

  .legal-content dt {
    color: var(--muted-dark);
    font-family: var(--mono);
    font-size: var(--fs-meta);
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
  }

  .legal-content dd {
    margin: 0;
  }

  .legal-meta {
    color: var(--muted-dark);
    font-family: var(--mono);
    font-size: var(--fs-meta) !important;
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
  }

  /* Tablet Landscape: Intro + Formularbogen zweispaltig wie Desktop, nur schmaler. */

  .faq {
    position: relative;
    min-height: 0;
    /* v29: FAQ nutzt den leeren unteren About-Raum, keine künstliche Mindesthöhe. */
    margin-top: -92px;
    padding: 130px var(--content-end) 112px var(--content-start);
    background: var(--paper-bright);
  }

  .faq::before {
    position: absolute;
    top: 54px;
    right: var(--page-x);
    left: var(--page-x);
    height: 1px;
    content: "";
    background: var(--hairline-faint);
  }

  .faq-inner h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
  }

  .faq-inner h2 em {
    color: var(--petrol);
    font-style: italic;
    font-weight: 400;
  }

  .faq-list {
    margin-top: 40px;
  }

  .faq-list details {
    position: relative;
  }

  .faq-list details::after {
    position: absolute;
    right: 44px;
    bottom: 0;
    left: 0;
    height: 1px;
    content: "";
    background: var(--hairline-faint);
  }

  .faq-list summary {
    position: relative;
    text-wrap: balance;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    min-height: 74px;
    color: var(--night);
    list-style: none;
    cursor: pointer;
    font-family: var(--serif);
    font-size: 23px;
    font-weight: 400;
    line-height: 1.15;
  }

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

  .faq-list summary::before {
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: -29px;
    width: 3px;
    content: "";
    background: var(--acid);
    opacity: 0;
  }

  .faq-symbol {
    position: relative;
    justify-self: center;
    width: 18px;
    height: 18px;
    color: var(--petrol);
  }

  .faq-symbol::before, .faq-symbol::after {
    position: absolute;
    top: 8px;
    left: 0;
    width: 18px;
    height: 1px;
    content: "";
    background: currentColor;
  }

  .faq-symbol::after {
    transform: rotate(90deg);
  }

  .faq-list details[open] summary {
    color: var(--petrol);
  }

  .faq-list details[open] summary::before {
    opacity: 1;
  }

  .faq-list details[open] .faq-symbol {
    color: var(--petrol);
  }

  .faq-list details[open] .faq-symbol::after {
    transform: none;
  }

  .faq-list details > p {
    max-width: 62ch;
    /* Antwort bündig auf der Frage-Achse (Freigabe 2026-08-30), Desktop wie Responsive. */
    margin: 10px 44px 0 0;
    padding: 0 0 28px;
    color: var(--muted-dark);
    font-size: var(--fs-body);
    line-height: 1.55;
  }

  /* Acid-Auftakt links oben, dieselbe Geste wie .site-footer::after:
     kurzer Strich am Seitenrand, der die Section eroeffnet. */
  .about::before {
    position: absolute;
    top: 39px;
    left: var(--page-x);
    width: 62px;
    height: 3px;
    content: "";
    background: var(--acid);
  }

  .about {
    position: relative;
    min-height: 820px;
    overflow: visible;
    scroll-margin-top: 95px;
    background: var(--paper-bright);
  }

  .about-stage {
    position: relative;
    height: 820px;
    margin-right: var(--content-end);
    margin-left: var(--content-start);
  }

  .about-copy {
    position: absolute;
    top: 110px;
    left: 50%;
    width: min(48%, 600px);
  }

  .about-copy::before {
    position: absolute;
    top: -28px;
    right: 0;
    left: -42px;
    height: 1px;
    content: "";
    background: var(--hairline);
  }

  .about-copy h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
  }

  .about-copy h2 em {
    color: var(--petrol);
    font-style: italic;
    font-weight: 400;
  }

  .about-copy h2 span {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0.01em 0.13em 0.05em;
    color: var(--night);
  }

  /* Gemeinsames Marker-Rezept für „with me." (About) und „backlogs." (Support).
     Muss die GANZE Wortform decken — bei „backlogs." liegt Navy-Text auf dunklem
     Blau, ohne volle Deckung wäre er unlesbar. Leuchtstift-Feel: satte Fläche,
     dezent handgezogene, leicht wellige Kanten, minimale Neigung. Auf ALLEN
     Breakpoints identisch. */

  .about-copy h2 span::before, .support-statement h2 span::before {
    position: absolute;
    z-index: -1;
    inset: -0.05em -0.14em -0.1em;
    content: "";
    background: var(--acid);
    /* Sauberes, leicht rechts geneigtes Parallelogramm (wie freigegebener
       Screenshot). Ober-/Unterkante gerade, gleichmäßiger Schrägzug, volle
       Deckung — Navy-Text bleibt auf Dunkel lesbar. Ein Rezept, alle Breakpoints. */
    clip-path: polygon(5% 2%, 100% 0%, 95% 98%, 0% 100%);
  }

  .about-copy > p:not(.about-meta):not(.about-kicker) {
    max-width: 58ch;
    margin: 34px 0 0;
    color: var(--muted-dark);
    font-size: var(--fs-body);
    line-height: 1.55;
  }

  /* Identitaetszeile ueber der About-H2 (MVP-Seitenbriefing, Abschnitt 8).
     Auf Desktop absolut ueber der Ueberschrift (siehe layout-Layer) — die
     H2-/Body-/Meta-/Marker-Position bleibt damit unveraendert. Unter 960px
     laeuft sie als kleine Mono-Zeile im Fluss ueber der H2. */
  .about-kicker {
    margin: 0 0 12px;
    color: var(--muted-dark);
    font-family: var(--mono);
    font-size: var(--fs-meta);
    line-height: 1.5;
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
  }

  .about-meta {
    margin: 34px 0 0;
    padding-top: 18px;
    color: var(--muted-dark);
    border-top: 1px solid var(--hairline);
    font-family: var(--mono);
    font-size: var(--fs-meta);
    line-height: 1.5;
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
  }

  /* Vertiefender Textlink, nur auf der deutschen Seite (MVP-Seitenbriefing DE,
     Abschnitt 8). Absatz erbt die Fliesstext-Box, der Link traegt die
     Petrol-Stimmfarbe wie die uebrigen Inline-Links auf hellem Grund. */
  .about-link a {
    color: var(--petrol);
  }

  .about-portrait-frame {
    position: absolute;
    top: -50px;
    left: 0;
    width: min(44%, 560px);
    height: 620px;
    border: 1px solid var(--hairline);
  }

  .about-portrait-frame::before, .about-portrait-frame::after {
    position: absolute;
    z-index: 2;
    height: 1px;
    content: "";
    background: var(--hairline);
  }

  .about-portrait-frame::before {
    top: -9px;
    left: -22px;
    width: 108%;
  }

  .about-portrait-frame::after {
    right: 17%;
    bottom: -20px;
    left: -45px;
  }

  .about-portrait-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .about-portrait-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 4%;
  }

  .about-experience {
    position: absolute;
    z-index: 3;
    top: 450px;
    left: calc(min(44%, 560px) - 118px);
    display: flex;
    width: 165px;
    height: 130px;
    padding: 18px 16px;
    border-top: 1px solid var(--hairline);
    border-right: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    background: var(--wash-paper-solid);
    flex-direction: column;
    justify-content: center;
  }

  .about-experience::before {
    position: absolute;
    top: -1px;
    right: 100%;
    width: 36px;
    height: 1px;
    content: "";
    background: var(--hairline);
  }

  .about-experience strong {
    color: var(--petrol);
    font-family: var(--serif);
    font-size: 52px;
    font-weight: 400;
    line-height: 0.85;
  }

  .about-experience span {
    margin-top: 15px;
    color: var(--muted-dark);
    font-family: var(--mono);
    font-size: var(--fs-meta);
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
  }

  .about-systems {
    position: absolute;
    z-index: 2;
    top: 534px;
    left: calc(min(44%, 560px) + 46px);
    width: 380px;
    height: 145px;
    padding: 37px 44px 24px;
    background: var(--wash-petrol-faint);
  }

  .about-systems::before, .about-systems::after {
    position: absolute;
    height: 1px;
    content: "";
    background: var(--hairline);
  }

  .about-systems::before {
    top: 0;
    right: 100%;
    width: 35px;
  }

  .about-systems::after {
    bottom: 0;
    left: 100%;
    width: 72px;
  }

  .about-systems > span {
    position: absolute;
    top: 23px;
    left: 44px;
    width: 62px;
    height: 3px;
    background: var(--acid);
  }

  .about-systems h3 {
    margin: 0;
    font-family: var(--serif);
    font-size: 29px;
    font-weight: 400;
    line-height: 1.15;
  }

  .about-systems h3 em {
    color: var(--petrol);
    font-style: italic;
    font-weight: 400;
  }

  /* v26: Systemzeilen in Outcome-Term-Sprache (Sans, normale Schreibweise) —
     auf ALLEN Breakpoints, nicht nur Desktop. */

  .about-systems p {
    margin: 13px 0 0;
    color: var(--support-blue);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  /* About unter 960px: absolute Desktop-Kollage auflösen → linearer Fluss.
     Gilt width-only (auch für kurze/quere Fenster), damit die %-Positionen der
     Desktop-Kacheln nie überlappen. Landscape-Tablet baut darunter wieder 2-spaltig. */

  /* About strikt linear ≤ 720px (Spec: „unter 721px strikt linear").
     Anschlusslinien mit absolutem Anker / negativem left / width:108% überschießen
     im Fluss die Sectionbreite → hier aus. Mono-Systemzeilen dürfen umbrechen. */

  .senior-support {
    position: relative;
    min-height: 704px;
    overflow: visible;
    padding: 122px var(--content-end) 58px var(--content-start);
    color: var(--paper-bright);
    background: var(--support-blue);
  }

  .senior-support::before {
    position: absolute;
    top: 63px;
    right: var(--page-x);
    left: var(--page-x);
    height: 1px;
    content: "";
    background: var(--rule-on-dark);
  }

  .support-rail {
    position: absolute;
    top: 63px;
    left: var(--rail-x);
    width: 1px;
    height: 250px;
    background: var(--rule-on-dark-soft);
  }

  .support-rail::after {
    position: absolute;
    top: 56px;
    left: 0;
    width: 168px;
    height: 1px;
    content: "";
    background: var(--rule-on-dark-soft);
  }

  .support-statement {
    position: relative;
    display: grid;
    grid-template-columns: minmax(430px, 1.2fr) minmax(250px, 0.72fr);
    align-items: start;
    gap: clamp(58px, 6vw, 88px);
  }

  .support-statement::after {
    position: absolute;
    top: 112px;
    right: 0;
    left: 31%;
    height: 1px;
    content: "";
    background: var(--rule-on-dark);
  }

  .support-statement h2 {
    margin: 0;
    color: var(--paper-bright);
    font-family: var(--serif);
    font-size: clamp(42px, 3vw, 48px);
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: -0.045em;
  }

  .support-statement h2 em {
    color: var(--petrol-on-dark);
    font-style: italic;
    font-weight: 400;
    white-space: nowrap;
  }

  .support-statement h2 span {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0.01em 0.13em 0.05em;
    color: var(--night);
  }

  .support-statement h2 span::after {
    position: absolute;
    top: 78%;
    left: calc(100% + 17px);
    width: 52px;
    height: 3px;
    content: "";
    background: var(--acid);
  }

  .support-statement > p {
    max-width: 35ch;
    margin: 2px 0 0;
    color: var(--paper-bright);
    font-size: var(--fs-body);
    line-height: 1.65;
  }

  .support-ledger {
    display: grid;
    grid-template-columns: 29% minmax(0, 1fr);
    margin-top: 46px;
    border-top: 1px solid var(--rule-on-dark);
  }

  .support-ledger-label {
    margin: 18px 0 0;
    color: var(--petrol-on-dark);
    font-size: var(--fs-small);
  }

  .support-work-list {
    min-width: 0;
  }

  .support-work-list > p {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 31px;
    margin: 0;
    font-family: var(--serif);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.18;
  }

  .support-work-list > p::after {
    position: absolute;
    right: 36px;
    bottom: 0;
    left: 0;
    height: 1px;
    content: "";
    background: var(--rule-on-dark-faint);
  }

  .support-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 46px;
    padding: 0 10px;
    border-top: 1px solid var(--rule-petrol-on-dark);
    border-bottom: 1px solid var(--rule-petrol-on-dark);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
  }

  .support-cta span:last-child {
    color: var(--acid);
    font-size: 28px;
    font-weight: 300;
    transition: transform 160ms ease;
  }

  .support-cta:hover, .support-cta:focus-visible {
    border-bottom-color: var(--acid);
  }

  .support-cta:hover span:last-child, .support-cta:focus-visible span:last-child {
    transform: translateX(5px);
  }

  .pain-points {
    position: relative;
    min-height: 992px;
    padding: 167px var(--content-end) 48px var(--content-start);
    background: var(--paper-bright);
  }

  .pain-points::before {
    content: none;
  }

  .pain-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 40px;
  }

  .pain-heading h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
  }

  .pain-heading h2 em {
    color: var(--petrol);
    font-style: italic;
    font-weight: 400;
  }

  .pain-heading p {
    margin: 0 0 4px;
    color: var(--night);
    font-size: var(--fs-body);
  }

  .pain-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(220px, auto));
    margin-top: 62px;
    border-top: 1px solid var(--hairline);
  }

  .pain-item {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 23px 44px 21px 42px;
    border-bottom: 1px solid var(--hairline);
    cursor: pointer;
    transition: background-color 180ms ease;
  }

  .pain-item:nth-child(1) { grid-area: 1 / 1; }

  .pain-item:nth-child(2) { grid-area: 2 / 1; }

  .pain-item:nth-child(3) { grid-area: 3 / 1; }

  .pain-item:nth-child(4) { grid-area: 1 / 2; }

  .pain-item:nth-child(5) { grid-area: 2 / 2; }

  .pain-item:nth-child(6) { grid-area: 3 / 2; }

  .pain-item:nth-child(n + 4) {
    border-left: 1px solid var(--hairline);
  }

  .pain-item::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    content: "";
    background: var(--acid);
    opacity: 0;
  }

  .pain-item h3 {
    margin: 0;
  }

  .pain-item button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 42px;
    padding: 0;
    color: var(--night);
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  .pain-item button::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
  }

  .pain-item button:focus-visible {
    outline: 0;
  }

  .pain-item button:focus-visible::before {
    position: absolute;
    inset: 2px;
    z-index: 2;
    content: "";
    border: 3px solid var(--acid);
    pointer-events: none;
  }

  .pain-title {
    color: var(--support-blue);
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.025em;
  }

  .pain-selection {
    display: none;
    color: var(--acid-ink);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .pain-arrow {
    color: var(--support-blue);
    font-size: 29px;
    font-weight: 300;
    line-height: 1;
    transition: transform 160ms ease;
  }

  .pain-item > p:not(.pain-service) {
    max-width: 52ch;
    margin: 12px 0 0;
    color: var(--muted-dark);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.5;
  }

  .pain-service {
    margin: auto 0 0;
    padding-top: 18px;
    color: var(--support-blue);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
  }

  .pain-item:not(.is-selected):hover, .pain-item:not(.is-selected):has(button:focus-visible) {
    background: var(--wash-petrol-hover);
  }

  .pain-item:not(.is-selected):hover .pain-title, .pain-item:not(.is-selected):hover .pain-service, .pain-item:not(.is-selected):hover .pain-arrow, .pain-item:not(.is-selected):has(button:focus-visible) .pain-title, .pain-item:not(.is-selected):has(button:focus-visible) .pain-service, .pain-item:not(.is-selected):has(button:focus-visible) .pain-arrow {
    color: var(--petrol);
  }

  .pain-item:hover .pain-service, .pain-item:focus-within .pain-service {
    color: var(--petrol);
  }

  .pain-item:hover .pain-arrow, .pain-item:focus-within .pain-arrow {
    transform: translateX(4px);
  }

  .pain-item.is-selected {
    background: var(--wash-petrol-selected);
  }

  .pain-item.is-selected::before {
    opacity: 1;
  }

  .pain-item.is-selected .pain-title, .pain-item.is-selected .pain-service {
    color: var(--petrol);
  }

  .pain-item.is-selected .pain-selection {
    display: inline;
    color: var(--petrol);
  }

  .pain-item.is-selected .pain-arrow {
    color: var(--acid);
  }

  .outcomes {
    position: relative;
    min-height: 1008px;
    /* clip statt hidden und nur in der Inline-Achse: die Deko wird weiter
       beschnitten, aber Text darf bei Text-Spacing/Zoom nach unten wachsen,
       statt abgeschnitten zu werden (WCAG 1.4.12). */
    overflow-x: clip;
    background: var(--paper-bright);
  }

  .outcomes::before {
    position: absolute;
    top: var(--outcomes-rule-y);
    right: var(--page-x);
    left: var(--page-x);
    height: 1px;
    content: "";
    background: var(--rule-blue-strong);
  }

  .outcomes-transition {
    position: absolute;
    top: calc(var(--outcomes-rule-y) + 22px);
    right: var(--page-x);
    left: var(--content-start);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 236px minmax(0, 1fr);
    align-items: start;
  }

  .outcomes-transition > span {
    height: 18px;
    border-top: 1px solid var(--rule-blue-faint);
  }

  .outcomes-transition p {
    position: relative;
    height: 20px;
    margin: 0;
    color: var(--support-blue);
    text-align: center;
    font-size: 15px;
    line-height: 18px;
    border-bottom: 1px solid var(--acid);
  }

  .outcomes-transition p::before, .outcomes-transition p::after {
    position: absolute;
    bottom: 0;
    width: 32px;
    height: 18px;
    content: "";
  }

  .outcomes-transition p::before {
    left: 0;
    border-left: 1px solid var(--acid);
    transform: skewX(42deg);
    transform-origin: bottom left;
  }

  .outcomes-transition p::after {
    right: 0;
    border-right: 1px solid var(--acid);
    transform: skewX(-42deg);
    transform-origin: bottom right;
  }

  .outcomes-bento {
    position: absolute;
    top: 142px;
    right: var(--content-end);
    bottom: 0;
    left: var(--content-start);
  }

  .outcome-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 54px clamp(42px, 5.6vw, 87px) 46px;
    background: var(--wash-petrol-panel);
  }

  .outcome-card h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
  }

  .outcome-card h2 em {
    color: var(--petrol);
    font-style: italic;
    font-weight: 400;
  }

  .outcome-card > p:not(.terms) {
    max-width: 50ch;
    margin: 24px 0 0;
    color: var(--muted-dark);
    font-size: var(--fs-body);
    line-height: 1.55;
  }

  /* padding-top als GARANTIERTER Mindestabstand: margin:auto schiebt die
     Terms an den Kartenboden und liess sie bei knappem Platz direkt am
     Fliesstext kleben (0px bei 720/600). */
  .outcome-card .terms {
    max-width: 76ch;
    margin: auto 0 0;
    padding-top: 22px;
    color: var(--support-blue);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-transform: none;
  }

  .outcome-found {
    top: 0;
    left: 0;
    width: 52.3%;
    min-height: 425px;
    padding-top: 62px;
  }

  .outcome-found::after {
    position: absolute;
    left: 14%;
    bottom: 0;
    width: 64%;
    height: 0;
    content: "";
    border-bottom: 1px solid var(--rule-blue);
  }

  /* Die Bento-Kollage ist auf >=1150px gezeichnet. Darunter wird jede Karte
     schmaler (Breiten sind %), der Text bricht in mehr Zeilen und sprengte die
     feste Hoehe — „Get leads." lief in „Save time.", „Get organised." aus der
     Section. min-height statt height + fluid schmaleres Innenpadding loesen
     beides; ab 1150px sind die freigegebenen Werte exakt wieder erreicht. */
  .outcome-leads {
    top: 70px;
    left: 52.3%;
    width: 40.2%;
    min-height: 351px;
    padding: 38px clamp(34px, 9.47vw - 56.8px, 58px) 46px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--rule-blue);
    border-left: 1px solid var(--rule-blue);
  }

  .outcome-organised {
    top: 424px;
    left: 10.7%;
    width: 38.6%;
    min-height: 317px;
    padding: 38px clamp(32px, 9.47vw - 58.8px, 50px) 34px;
    background: var(--wash-petrol-card);
  }

  .outcome-organised::after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 32%;
    height: 0;
    content: "";
    border-bottom: 1px solid var(--rule-blue);
  }

  .outcome-time {
    top: 423px;
    left: 49.5%;
    width: 50.5%;
    min-height: 361px;
    padding: 58px 49px 46px;
    color: var(--paper-bright);
    background: var(--support-blue);
  }

  .outcome-time h2, .outcome-time > p:not(.terms) {
    color: var(--paper-bright);
  }

  .outcome-time h2 em, .outcome-time .terms {
    color: var(--petrol-on-dark);
  }

  .outcome-time .terms {
    color: var(--paper-bright);
  }

  .outcome-acid-line {
    position: absolute;
    top: 33px;
    left: 49px;
    width: 68px;
    height: 4px;
    background: var(--acid);
  }

  .outcomes-cta {
    position: absolute;
    right: 0;
    /* 798px within the bento = 940px from the Outcomes section top. */
    top: 798px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 228px;
    min-height: 38px;
    padding: 0 10px 0 17px;
    color: var(--support-blue);
    border-top: 1px solid var(--rule-blue);
    border-bottom: 1px solid var(--rule-blue);
    font-size: 15px;
  }

  .outcomes-cta span:last-child {
    color: var(--acid);
    font-size: 24px;
    transition: transform 160ms ease;
  }

  .outcomes-cta:hover span:last-child, .outcomes-cta:focus-visible span:last-child {
    transform: translateX(4px);
  }
}

@layer layout {
  @media (width <= 92.5em) {
    .footer-body {
      grid-template-columns: 290px minmax(245px, 1fr) 72px 105px;
      column-gap: clamp(40px, 5vw, 76px);
    }
  }

  @media (width <= 73.75em) {
    .primary-navigation {
      gap: 24px;
    }

    .hero h1 {
      font-size: clamp(76px, 9.5vw, 112px);
    }

    .contact {
      padding-right: var(--content-end);
      padding-left: var(--content-start);
    }

    /* Formularspalte darf schrumpfen — behebt die Alt-Überbreite bei 960–1010px. */
    .contact-inner {
      grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
      gap: 56px;
    }

    .senior-support {
      padding-right: var(--content-end);
      padding-left: var(--content-start);
    }

    .support-statement {
      grid-template-columns: minmax(430px, 1.2fr) minmax(260px, 0.8fr);
      gap: 48px;
    }
  }

  @media (width >= 73.8125em) and (width <= 81.25em) {
    .primary-navigation {
      gap: 30px;
    }
  }

  @media (width >= 60em) and (width <= 64em) {
    .primary-navigation a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding-bottom: 0;
    }

    .language-switcher summary {
      align-items: center;
      min-height: 44px;
      padding-bottom: 0;
    }

    .hero-senior-link {
      grid-column: 9 / 14;
    }
  }

  @media (width >= 60em) and (width <= 68.75em) {
    .about-stage {
      margin-left: var(--content-start);
    }

    .about-copy {
      left: 52%;
      width: 48%;
    }

    .about-portrait-frame {
      width: 46%;
      height: 590px;
    }

    .about-experience {
      top: 430px;
      left: calc(46% - 116px);
    }

    .about-systems {
      top: 514px;
      left: calc(46% + 48px);
      width: 36%;
      padding-inline: 30px;
    }

    .about-systems > span {
      left: 30px;
    }

    .about-systems p {
      font-size: 9px;
    }
  }

  @media (width >= 60em) {
    .site-footer {
      padding-top: 46px;
    }

    .footer-elsewhere {
      max-width: 340px;
    }

    .form-field textarea {
      resize: none;
    }

    .selected-starting-point button:focus-visible,
    .enquiry-form > button:focus-visible {
      outline: 2px solid var(--acid);
      outline-offset: 3px;
    }

    /* Eingabefelder: Acid-Balken an der linken Kante statt Kasten ringsum —
       gleiche Geste wie der Acid-Strich vor „What's stuck?". Kein outline,
       dafuer Balken UND kraeftigere Unterkante zusammen, damit der Fokus
       trotzdem eindeutig sichtbar bleibt (WCAG 2.4.7). box-shadow, damit
       nichts umbricht. */
    .form-field input:focus-visible,
    .form-field textarea:focus-visible {
      outline: 0;
      box-shadow: -11px 0 0 -8px var(--acid);
    }

    .form-field input:focus,
    .form-field textarea:focus {
      border-bottom-color: var(--petrol);
      border-bottom-width: 2px;
    }

    .enquiry-form > button:active {
      transform: translateY(1px);
    }

    .selected-starting-point button {
      min-height: 24px;
    }

    .about-portrait-media img {
      transform: scale(1.075);
      transform-origin: center 18%;
    }

    .about-experience {
      top: 442px;
      width: 148px;
      height: 112px;
      padding: 14px;
      background: var(--paper-bright);
    }

    .about-systems {
      top: 546px;
      height: 136px;
      background: var(--wash-petrol-panel);
    }

    .about-systems::before,
    .about-systems::after {
      background: var(--rule-blue);
    }

    /* Identitaetszeile aus dem Fluss ziehen: Unterkante 34px ueber der
       .about-copy-Oberkante (6px ueber der ::before-Haarlinie bei -28px).
       H2/Body/Meta/Marker behalten dadurch exakt ihre Desktop-Position. */
    .about-kicker {
      position: absolute;
      top: auto;
      bottom: calc(100% + 34px);
      left: 0;
      margin: 0;
    }

    /* Die DE-/ES-Hero-Headline ist rund doppelt so lang wie die englische, auf
       die die 132px-Rampe ausgelegt ist. Kleinere Display-Groesse haelt sie auf
       zwei Zeilen (Standard-i18n-Typografie). :where() -> Spezifitaet wie die
       Basisregel, steht im layout-Layer also nach ihr und nach dem
       73.8125-81.25em-Band. */
    :where(html:lang(de), html:lang(es)) .hero h1 {
      grid-column: 2 / 12;
      font-size: clamp(38px, 4.2vw, 60px);
      letter-spacing: -0.04em;
    }

    .senior-support {
      min-height: 840px;
      padding-top: 154px;
    }

    .pain-heading h2 {
      padding-left: 42px;
    }

    .pain-heading p {
      color: var(--muted-dark);
    }

    .pain-grid {
      /* minmax statt fester Hoehe: eine Zeile, die Text traegt, darf nicht
         deckeln. Mit 252px fix lag das Service-Label der oberen Karte bei
         Nutzer-Textabstaenden auf dem Titel der Karte darunter (WCAG 1.4.12);
         schon bei Normalgroesse war das Bodenpolster einer Karte von 28 auf
         18px gequetscht. Waagrechte Achse bleibt unberuehrt. */
      grid-template-rows: repeat(3, minmax(252px, auto));
      margin-top: 82px;
      border-top: 0;
    }

    .pain-item {
      padding: 30px 44px 28px 42px;
      border-bottom-color: var(--hairline-faint);
    }

    .pain-item:nth-child(3),
    .pain-item:nth-child(6) {
      border-bottom: 0;
    }

    .pain-item:nth-child(n + 4) {
      border-left-color: var(--hairline-soft);
    }

    .pain-item button {
      align-items: baseline;
    }

    .pain-item.is-selected {
      background: var(--wash-petrol-selected);
    }

    .pain-item > p:not(.pain-service) {
      margin-top: 14px;
      line-height: 1.52;
    }

    .pain-service {
      margin-top: auto;
      padding-top: 18px;
    }

    .support-rail::after {
      display: none;
    }

    .support-statement {
      align-items: end;
    }

    .support-statement > p {
      line-height: 1.55;
    }

    .support-statement::after {
      top: auto;
      bottom: -7px;
    }

    /* Marker-Rezept ist jetzt gemeinsam (Base). Hier nur die Auslauflinie auf die
       Brücken-Y-Achse setzen. */
    .support-statement h2 span::after {
      top: auto;
      bottom: -7px;
      width: 52px;
      height: 1px;
    }

    .support-ledger {
      border-top: 0;
      margin-top: 72px;
    }

    .support-ledger-label {
      margin-top: 8px;
    }

    /* px: bei 200 % Text-Zoom greift ein rem-Deckel nicht mehr, die Liste
       fuellte bis zur Contentkante und schob die CTA mit ihrem 128px-Ueberhang
       aus dem Viewport (WCAG 1.4.4). 448px == 28rem @16px. */
    .support-work-list {
      width: min(100%, 448px);
    }

    .support-work-list > p::after {
      right: 0;
    }

    .support-cta {
      width: 240px;
      margin-top: 74px;
      margin-left: auto;
      /* px, nicht rem: ein reiner Kompositions-Versatz darf nicht mit der
         Schriftgroesse mitwachsen (WCAG 1.4.4 — bei 200 % schob 8rem die CTA
         224px aus dem Viewport). 128px == 8rem bei 16px Root. */
      transform: translateX(128px);
    }

    .site-header::before {
      border-bottom: 0;
    }

    .wordmark {
      margin-left: 36px;
    }

    .place {
      margin-left: var(--grid-gap);
    }

    .hero-senior-link {
      position: relative;
      align-items: end;
      padding-left: 80px;
      padding-bottom: 7px;
      border-top-color: var(--hairline-strong);
      transform: translateY(-40px);
    }

    .hero-senior-link::after {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 80px;
      height: 1px;
      content: "";
      background: var(--hairline-faint);
    }

    .hero {
      border-bottom: 0;
    }

    .hero::after {
      position: absolute;
      right: 0;
      bottom: 81px;
      left: 0;
      height: 1px;
      content: "";
      background: var(--hairline);
    }

    .page-rail {
      z-index: 51;
      top: calc(-1 * var(--header-height));
      bottom: 81px;
      /* Der Versatz darf nie groesser sein als der Seitenrand, sonst laeuft die
         Rail aus dem Viewport: zwischen 960 und ~1319px ist --page-x konstant
         32px, die festen -40px lagen dort bei -8px und waren unsichtbar.
         max() haelt sie ab 960px durchgehend im Bild und laesst ab ~1320px
         die gewohnten 40px Abstand zum Inhalt. */
      left: max(-40px, calc(8px - var(--page-x)));
      background: var(--hairline-faint);
    }

    .page-rail span {
      left: -36px;
    }

    .hero-transition {
      top: auto;
      bottom: 24px;
    }

    .outcome-leads .terms {
      margin-right: -32px;
    }
  }

  @media (width >= 60em) and (width <= 73.75em) {
    .support-cta {
      transform: none;
    }
  }
}

@layer responsive {
  /* i18n-Nav-Kollaps: die horizontale Leiste sitzt schon auf Englisch bei 960px
     an der Grenze (928/928, kein Spielraum). Die laengeren uebersetzten
     Nav-Labels + CTA passen erst ab ~1160px. Best Practice: Navigation klappt
     vor dem restlichen Layout zusammen. EN bleibt darum bei 960px, DE/ES
     klappen bereits ab 1160px auf denselben Hamburger-Header wie unter 960px.
     Reine Header-Umschaltung — Section-Layout, Hero und Tokens bleiben bis
     959px unveraendert Desktop. Selektor-Gate ueber :lang(), Spezifitaet 0
     via :where(), damit die <=959er-Regeln darunter nichts ueberschreiben. */
  @media (width >= 60em) and (width <= 72.5em) {
    :where(html:lang(de), html:lang(es)) .site-header {
      grid-template-columns: auto minmax(0, 1fr) auto;
      column-gap: 12px;
    }

    :where(html:lang(de), html:lang(es)) .header-attention {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-self: end;
      min-height: 44px;
      color: var(--night);
      font-size: clamp(11.5px, 2.7vw, 15px);
      white-space: nowrap;
    }

    :where(html:lang(de), html:lang(es)) .header-attention::after {
      position: absolute;
      right: 0;
      bottom: calc(50% - 0.95em);
      left: 0;
      height: 2px;
      content: "";
      background: var(--acid);
    }

    :where(html:lang(de), html:lang(es)) .header-attention:hover,
    :where(html:lang(de), html:lang(es)) .header-attention:focus-visible {
      color: var(--petrol);
    }

    :where(html:lang(de), html:lang(es)) .primary-navigation > a:first-child {
      display: none;
    }

    :where(html:lang(de), html:lang(es)) .wordmark::after {
      display: none;
    }

    :where(html:lang(de), html:lang(es)) .place {
      display: none;
    }

    :where(html:lang(de), html:lang(es)) .menu-toggle {
      display: block;
      grid-column: 3;
      justify-self: end;
      min-width: 58px;
      min-height: 44px;
      padding: 0;
      color: var(--night);
      background: transparent;
      border: 0;
      font-size: 12px;
      text-align: right;
    }

    :where(html:lang(de), html:lang(es)) .primary-navigation {
      position: absolute;
      top: 100%;
      right: 0;
      display: none;
      width: min(300px, calc(100vw - (2 * var(--page-x))));
      padding: 26px;
      background: var(--paper-bright);
      border: 1px solid var(--hairline);
      flex-direction: column;
      gap: 12px;
      white-space: normal;
    }

    :where(html:lang(de), html:lang(es)) .primary-navigation.is-open {
      display: flex;
    }

    :where(html:lang(de), html:lang(es)) .primary-navigation a {
      width: 100%;
      min-height: 44px;
      padding: 12px 0;
      border-bottom: 1px solid var(--hairline-faint);
    }

    :where(html:lang(de), html:lang(es)) .language-switcher {
      width: 100%;
      margin-left: 0;
      margin-top: 12px;
      border-top: 1px solid var(--hairline-faint);
      padding: 18px 0 0;
    }

    :where(html:lang(de), html:lang(es)) .language-switcher::before {
      display: none;
    }

    :where(html:lang(de), html:lang(es)) .language-switcher summary {
      align-items: center;
      width: 100%;
      min-height: 44px;
      padding: 0;
    }

    :where(html:lang(de), html:lang(es)) .language-options {
      position: static;
      min-width: 0;
      padding: 6px 0 0 16px;
      background: transparent;
      border: 0;
    }
  }

  @media (width <= 59.9375em) {
    :root {
      --page-x: clamp(22px, 4.8vw, 38px);
      --page: calc(100% - (2 * var(--page-x)));
      /* Die Rail ist unter 960px nicht gezeichnet (.page-rail display:none) und
         wird von keinem Grid mehr gelesen — sie war hier nur noch eine Zahl im
         Einzug. Deshalb ein eigenes Token statt rail+gap: der Einzug hält bis
         720px die Desktop-Achse (92px) und rampt dann stetig auf 0 bei 480px,
         statt an der 479er-Naht um 92px zu springen. Damit ist --content-start
         über den ganzen Bereich < 960px monoton. */
      --rail: 0px;
      --content-indent: clamp(0px, 38.333vw - 184px, 92px);
      --content-start: calc(var(--page-x) + var(--content-indent));
      --content-end: var(--page-x);
      --header-height: 72px;
      /* Fluider Section-Rhythmus (Utopia-Rampe, rem-Anteil wegen WCAG 1.4.4).
         Ersetzt die historisch je Section einzeln gesetzten padding-block-Werte
         der HELLEN Sections. 104px @320 → 132px @959 bzw. 56 → 84.
         Ausnahmen bleiben Hero, die dunklen Sections und FAQ. */
      /* Waagrechter Einzug der Spickel-Schraege (nur noch die Form; die
         Textachsen haengen seit 2026-09-01 am Hero-Raster, nicht mehr hier).
         Entspricht den 11 % des Desktop-Trapezes bei der gemessenen
         Spickelbreite (179-257px -> 20-28px). */
      --notch-skew: clamp(1.25rem, 5vw, 1.75rem);
      /* Innenachse der Karten. H1 und Painpoint-H2 richten sich daran aus,
         damit die linke Kante ueber die Sections durchlaeuft. */
      --card-axis: 30px;
      --section-pad-y: clamp(6.5rem, 4.382vw + 5.624rem, 8.25rem);
      --section-pad-y-tight: clamp(3.5rem, 4.382vw + 2.624rem, 5.25rem);
    }

    .site-header {
      grid-template-columns: auto minmax(0, 1fr) auto;
      column-gap: 12px;
    }

    /* Pflicht: eigene Prioritaet, nie im Klappmenue. Gleiche Grammatik wie die
       .nav-contact-CTA auf dem Desktop — Acid-Unterstrich, keine Pille. */
    .header-attention {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-self: end;
      min-height: 44px;
      color: var(--night);
      font-size: clamp(11.5px, 2.7vw, 15px);
      white-space: nowrap;
    }

    /* Linie dicht am Text statt am Boden der 44px-Trefferflaeche. */
    .header-attention::after {
      position: absolute;
      right: 0;
      bottom: calc(50% - 0.95em);
      left: 0;
      height: 2px;
      content: "";
      background: var(--acid);
    }

    .header-attention:hover,
    .header-attention:focus-visible {
      color: var(--petrol);
    }

    /* Derselbe Ziellink steht schon im Header — im Menue waere er doppelt. */
    .primary-navigation > a:first-child {
      display: none;
    }

    .wordmark::after {
      display: none;
    }

    /* Ort-/Sprachblock und Rail sind Desktop-Dekoration — unter 960px immer aus,
       nicht nur bei ausreichender Viewporthöhe (siehe RESPONSIVE-RULES.md). */
    .place {
      display: none;
    }

    .page-rail,
    .page-rail span {
      display: none;
    }

    .menu-toggle {
      display: block;
      min-width: 58px;
      min-height: 44px;
      padding: 0;
      color: var(--night);
      background: transparent;
      border: 0;
      font-size: 12px;
    }

    .primary-navigation {
      position: absolute;
      /* 100 % statt fester px: das Panel haengt immer exakt unter dem Header,
         egal wie hoch er gerade ist — sonst deckt es den Acid-Unterstrich des
         What-needs-attention-CTA ab. .site-header ist sticky und damit der
         Bezugsrahmen. */
      top: 100%;
      right: 0;
      display: none;
      width: min(300px, calc(100vw - (2 * var(--page-x))));
      padding: 26px;
      background: var(--paper-bright);
      border: 1px solid var(--hairline);
      flex-direction: column;
      gap: 12px;
      white-space: normal;
    }

    .primary-navigation.is-open {
      display: flex;
    }

    .primary-navigation a {
      width: 100%;
      min-height: 44px;
      padding: 12px 0;
      border-bottom: 1px solid var(--hairline-faint);
    }

    /* Sprachwahl im Menue-Panel: eigener Ausloeser, darunter die echten Links. */
    .language-switcher {
      width: 100%;
      margin-left: 0;
      margin-top: 12px;
      border-top: 1px solid var(--hairline-faint);
      padding: 18px 0 0;
    }

    .language-switcher::before {
      display: none;
    }

    .language-switcher summary {
      align-items: center;
      width: 100%;
      min-height: 44px;
      padding: 0;
    }

    .language-options {
      position: static;
      min-width: 0;
      padding: 6px 0 0 16px;
      background: transparent;
      border: 0;
    }

    .menu-toggle {
      grid-column: 3;
      justify-self: end;
      text-align: right;
    }

    /* Hero unter 960px: content-getrieben (kein 100svh), im Fluss statt Kollage.
       Drei Spalten (1fr | auto | 1fr): Spalte 2 traegt den Spickel und ist
       dadurch mittig. Die Senior-CTA liegt in derselben Spalte 2 und endet
       rechts damit exakt an der Spickel-Kante — ohne Magic Number, die Spalte
       misst sich selbst. H1 spannt ueber alles und bleibt linksbuendig auf der
       Content-Achse (gleiche Achse wie die H2 der Painpoints).
       Freigabe Raffaela 2026-09-01; loest den frueheren Entscheid vom
       2026-08-30 ab (H1+CTA auf der Spickel-Achse). */
    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: start;
      column-gap: 0;
      width: auto;
      min-height: 0;
      margin: 0;
      padding-block: clamp(8rem, 5rem + 13vw, 12rem) 0;
      padding-inline: var(--content-start) var(--content-end);
      /* Keine Trennlinie am Section-Ende: der Spickel selbst leitet ueber. */
      border-bottom: 0;
    }

    .hero-content {
      display: contents;
    }

    /* Gleiche linke Achse wie die Painpoint-H2 darunter. */
    .hero h1 {
      grid-column: 1 / -1;
      padding-left: var(--card-axis);
      text-align: left;
    }

    .hero h1 em {
      white-space: normal;
    }

    .hero-senior-link {
      position: relative;
      grid-column: 2;
      justify-self: end;
      width: fit-content;
      margin: clamp(4rem, 2.5rem + 8vw, 7rem) 0 0;
    }

    /* Eine durchgezogene Haarlinie OBEN am Spickel, links und rechts bis zur
       Contentkante — unten am Spickel bewusst keine. Der Spickel ist die
       Schwelle in die naechste Section, nicht ein Kasten zwischen zwei Linien.
       subgrid: der Spickel sitzt exakt in Spalte 2 des Hero-Rasters. */
    .hero-transition {
      position: relative;
      transform: none;
      width: auto;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      align-items: start;
      margin-top: clamp(2rem, 1.5rem + 3vw, 3rem);
      padding-inline: 0;
    }

    /* Durchgehende Linie auf Spickel-Oberkante — laeuft hinter dem Spickel
       durch, wie .hero::after auf dem Desktop. */
    .hero-transition::before {
      position: absolute;
      top: 0;
      right: 0;
      left: calc(-1 * var(--content-indent));
      height: 1px;
      content: "";
      background: var(--hairline-faint);
    }

    /* Flankierende Linien tiefer als die durchgehende — dasselbe
       Zwei-Linien-Verhaeltnis wie auf dem Desktop (dort 29px Versatz). */
    .hero-transition-line {
      height: 26px;
      margin: 0;
      border-top: 0;
      border-bottom: 1px solid var(--hairline-faint);
    }

    /* Der Spickel behaelt die Desktop-Form: symmetrisches Trapez, beide Flanken
       schraeg. Er bleibt auf der Content-Achse stehen — nicht er wandert zum
       Text, sondern H1 + CTA wandern zu ihm (s. .hero h1 / .hero-senior-link). */
    .hero-notch {
      transform: none;
      clip-path: polygon(0 0, 100% 0, calc(100% - var(--notch-skew)) 100%,
                         var(--notch-skew) 100%);
    }

    .site-footer {
      height: auto;
      padding: 72px var(--content-end) 60px var(--content-start);
    }

    .footer-body {
      width: 100%;
      margin: 0;
      grid-template-columns: 1fr 1fr;
      column-gap: 32px;
      row-gap: 40px;
    }

    .footer-identity {
      grid-column: 1 / -1;
      width: 100%;
      min-height: 82px;
      padding: 12px 16px;
    }

    .footer-identity h2 {
      margin-top: 9px;
    }

    .footer-identity h2::after {
      bottom: -10px;
    }

    /* 2.5.8 Spacing-Ausnahme: die Linkzeilen sind ~15px hoch, mit 6px Abstand
       lagen die 24px-Kreise uebereinander. 10px -> 25px Mittenabstand. */
    .footer-group {
      min-width: 0;
      gap: 10px;
    }

    .footer-group a {
      width: auto;
      overflow-wrap: anywhere;
    }

    .footer-copyright {
      width: auto;
      margin: 8px 0 0;
      padding-top: 20px;
    }

    .contact {
      min-height: 0;
      padding-top: 108px;
      padding-bottom: 112px;
    }

    .contact-rail {
      display: none;
    }

    .contact-inner {
      grid-template-columns: 1fr;
      gap: 64px;
    }

    .contact-intro > p:not(.contact-note) {
      margin-top: 36px;
    }

    .contact-note {
      width: min(100%, 360px);
      margin-top: 38px;
    }

    /* Formularbogen schmaler: verdichtetes Padding, Felder immer untereinander. */
    .enquiry-form {
      min-height: 0;
      padding: 42px 34px 16px;
    }

    .form-row {
      grid-template-columns: 1fr;
      gap: 34px;
    }

    .faq {
      min-height: 0;
      margin-top: -60px;
      padding: 120px var(--content-end) 120px var(--content-start);
    }

    /* Vorher hatte About zwischen 480 und 720px GAR kein padding-block (0/0) —
       die 72/84 kamen nur aus dem Landscape-Block, die 72/56 nur aus <=479.
       Jetzt trägt About denselben Rhythmus wie die anderen hellen Sections. */
    /* Folgt direkt auf die dunkle Support-Section: der Farbwechsel markiert
       die Grenze schon, deshalb weniger Vorlauf als bei Hell-auf-Hell. */
    .about {
      min-height: 0;
      padding-block: clamp(4.5rem, 3.5rem + 3vw, 5.5rem) var(--section-pad-y-tight);
    }

    .about-stage {
      position: static;
      display: flex;
      flex-direction: column;
      height: auto;
      margin-right: var(--content-end);
      margin-left: var(--content-start);
    }

    .about-copy,
    .about-experience {
      position: static;
      inset: auto;
      width: 100%;
      min-width: 0;
    }

    /* relative, NICHT static: der Acid-Balken (.about-systems > span) ist
       absolut positioniert und schwebte sonst 23px unter der Section-Oberkante
       statt in seiner Kachel zu sitzen. */
    .about-systems {
      position: relative;
      inset: auto;
      width: 100%;
      min-width: 0;
    }

    /* Spec-Reihenfolge im linearen Zustand: Portrait → Copy → Experience → Systems
       (Meta liegt in .about-copy). Keine interaktiven Elemente → order ist sicher.
       Der Rahmen bleibt `relative` und damit Containing Block: .about-portrait-media
       ist absolut mit inset:0, ::before rechnet mit width:108%. Mit `static` lösen
       beide gegen .about auf — das Foto lief dann über die ganze Section (Marker
       „with me." lag auf dem Bild) und ::before 50px über die rechte Kante hinaus. */
    .about-portrait-frame {
      position: relative;
      inset: auto;
      order: 1;
      width: 100%;
      min-width: 0;
      height: auto;
      aspect-ratio: 3 / 4;
      /* Bildoberkante auf Hoehe des Acid-Auftakts (.about::before, top: 39px) ziehen
         — genau parallel statt mit Luecke darunter. Gleiche Formel wie .about
         padding-block-start, damit es bei jeder Breite exakt aufgeht. */
      margin-top: calc(39px - clamp(4.5rem, 3.5rem + 3vw, 5.5rem));
    }

    .about-copy {
      order: 2;
    }

    .about-experience {
      order: 3;
    }

    .about-systems {
      order: 4;
    }

    /* Kleine Verbinder-Nubs der Kacheln — im Fluss ohne Funktion. */
    .about-experience::before,
    .about-systems::before,
    .about-systems::after {
      display: none;
    }

    .senior-support {
      min-height: 0;
      padding-top: 132px;
      padding-bottom: 84px;
    }

    .support-rail {
      display: none;
    }

    .support-statement {
      grid-template-columns: 1fr;
      gap: 38px;
    }

    /* Unter 960px liefe die Statement-Bruecke ueber die volle Breite und
       doppelte damit die Section-Oberkante. Eine Linie reicht. */
    .support-statement::after {
      display: none;
    }

    .support-statement > p {
      max-width: 62ch;
    }

    /* Ledger gestapelt (Label über Liste) — hält die CTA bei 480–720px in der
       Spaltenbreite. Landscape stellt unten wieder zweispaltig. */
    .support-ledger {
      grid-template-columns: 1fr;
      margin-top: 70px;
    }

    .support-ledger-label {
      margin-bottom: 14px;
    }

    /* Offene Linien-CTA wie Desktop: kompakt, rechtsbündig, nie über die Spalte. */
    .support-cta {
      width: min(240px, 100%);
      min-height: 46px;
      margin-top: 74px;
      margin-left: auto;
      transform: none;
    }

    /* Pfeil-Grammatik über alle Linien-CTAs identisch (24px). */
    .support-cta span:last-child {
      font-size: 24px;
      font-weight: 400;
    }

    .pain-points {
      min-height: 0;
      padding: calc(var(--section-pad-y) + clamp(1.5rem, 2vw, 2.5rem)) var(--content-end) var(--section-pad-y-tight) var(--content-start);
    }

    /* Heading + Intro auf die Karten-Inhaltsachse einrücken (wie Desktop, wo die
       H2 42px eingerückt ist). Wert = linkes Karten-Innenpadding je Breakpoint. */
    .pain-heading {
      grid-template-columns: 1fr;
      gap: 22px;
      padding-left: var(--card-axis);
    }

    .pain-grid {
      grid-template-rows: none;
      margin-top: 48px;
    }

    .pain-item {
      min-height: 244px;
      padding-inline: 30px;
    }

    .outcomes {
      min-height: 0;
      /* Oberes Padding an denselben Anker gekoppelt wie Divider und Label,
         damit die Kacheln nie ins Label laufen (war -5px bei 600px). */
      padding: calc(var(--outcomes-rule-y) + 98px) var(--content-end) var(--section-pad-y-tight) var(--content-start);
    }

    .outcomes-transition {
      left: var(--content-start);
    }

    /* Intrinsic: the bento reduces itself to one column when the track would
       fall under 280px — no separate 720px column query needed. 280px is the
       measured content floor: the container is 560px at 721px viewport and
       559px at 720px, so the fold lands exactly on the documented seam. */
    .outcomes-bento {
      position: relative;
      inset: auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .outcome-card,
    .outcome-found,
    .outcome-leads,
    .outcome-organised,
    .outcome-time {
      position: relative;
      inset: auto;
      width: auto;
      height: auto;
      min-height: 390px;
      padding: 42px 30px;
    }

    .outcome-time {
      padding-top: 58px;
    }

    .outcome-acid-line {
      left: 30px;
    }

    /* Last track, whatever the bento currently has — right edge in both the
       two-column and the folded one-column state. */
    .outcomes-cta {
      position: relative;
      top: auto;
      right: auto;
      grid-column: -2 / -1;
      justify-self: end;
      margin-top: 28px;
    }

    /* =========================================================================
       FLUIDE TYPO-RAMPE — die EINZIGE Typo-Regel unter 960px.
       Ein clamp() pro Textrolle, stetig von Phone-Minimum (320px) bis Desktop-Wert
       (960px). Kein font-size mehr in irgendeiner Section-Media-Query, kein Sprung
       an einem Breakpoint. Formel: A_vw = 100·(Smax−Smin)/640, B = Smin − A_vw·3.2.
       Desktop ≥ 960px bleibt unberührt. Ersetzt das README-Tablet-Rollensystem
       (2026-08-30). Siehe RESPONSIVE-RULES.md.
       ========================================================================= */
    :root {
      --fs-display: clamp(2.625rem, 6.875vw + 1.25rem, 5.375rem);   /* 42 → 86px */
      --fs-h2: clamp(1.75rem, 1.719vw + 1.406rem, 2.4375rem);       /* 28 → 39px */
      --fs-h2-emph: clamp(1.8125rem, 2.031vw + 1.406rem, 2.625rem); /* 29 → 42px */
      --fs-title: clamp(1.3125rem, 0.781vw + 1.156rem, 1.625rem);   /* 21 → 26px */
      /* 15 -> 21px statt 16 -> 23px: bei der alten Rampe kamen auf schmalen
         Breiten nur 27-43 Zeichen pro Zeile heraus (Komfortbereich 45-75). */
      --fs-faq: clamp(0.9375rem, 0.938vw + 0.75rem, 1.3125rem);     /* 15 → 21px */
      --fs-lead: clamp(0.9375rem, 0.156vw + 0.906rem, 1rem);        /* 15 → 16px */
      --fs-body: 15px;
      --fs-terms: 11px;
      --fs-meta: 10px;
      --fs-nav: 15px;
      /* Abschnitts-H2 stehen unter 960px eine Spur offener als auf Desktop. */
      --lh-h2: 0.98;
    }

    /* Linker Start = sichtbare linke Kante des Trapezes. */
    .hero h1 {
      font-size: var(--fs-display);
      line-height: 0.88;
    }

    /* Alle Abschnitts-H2 unter 960px exakt gleich. Fuenf davon holen sich das
       schon ueber --fs-h2/--lh-h2/--ls-h2; nur .support-statement h2 weicht auf
       Desktop bewusst ab (eigene clamp/lh) und muss hier eingereiht werden. */
    .support-statement h2 {
      font-size: var(--fs-h2);
      line-height: var(--lh-h2);
      letter-spacing: var(--ls-h2);
    }

    .pain-title,
    .about-systems h3 {
      font-size: var(--fs-title);
    }

    .faq-list summary {
      font-size: var(--fs-faq);
    }

    .contact-intro > p:not(.contact-note) {
      font-size: var(--fs-lead);
    }

    /* Support-Work-Ledger: bewusst kleiner als Bodycopy (Nebeninformation). */
    .support-work-list > p {
      font-size: 13px;
    }

    /* Alle offenen Linien-CTAs mid-page/Hero exakt gleich groß. */
    .hero-senior-link,
    .support-cta,
    .outcomes-cta {
      font-size: 15px;
    }

    .outcome-card .terms,
    .pain-service,
    .about-systems p,
    .footer-group a,
    .footer-group span {
      font-size: var(--fs-terms);
    }

    .footer-identity h2 {
      font-size: 1.3125rem; /* 21px — ruhige Endnote, skaliert nicht hoch */
    }

    /* Die uebrigen Mono-Labels holen sich --fs-meta schon aus der Komponente.
       Nur dieses eine weicht auf Desktop ab (12px) und muss hier zurueck. */
    .support-ledger-label {
      font-size: var(--fs-meta);
    }

    .primary-navigation a {
      font-size: var(--fs-nav);
    }

    /* Same open two-hairline CTA grammar as desktop; no legacy button variant. */
    .hero-senior-link {
      position: relative;
      align-items: end;
      padding-bottom: 7px;
      border-top-color: var(--hairline-strong);
    }

    .hero-senior-link::after {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 1px;
      content: "";
      background: var(--hairline-faint);
    }

    /* Oberlinie zieht nach links ueber die Textbreite hinaus — dieselbe Geste
       wie auf dem Desktop, ohne die Elementbreite (und damit die Kante am
       Spickel) zu veraendern. */
    .hero-senior-link {
      border-top: 0;
    }

    .hero-senior-link::before {
      position: absolute;
      top: 6px;
      right: 0;
      left: -34px;
      height: 1px;
      content: "";
      background: var(--hairline-strong);
    }
  }

  /* Schwelle von 721 auf 840px angehoben (Freigabe Raffaela 2026-09-01) — bei
     721px blieb der Intro-Spalte kaum Luft (0.72fr auf 210px Mindestbreite).
     Ab 840px ist genug Raum fuer eine grosszuegigere Intro-Spalte. */
  @media (width >= 52.5em) and (width <= 59.9375em) {
    .contact-inner {
      grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
      gap: 48px;
      align-items: start;
    }

    .contact-intro > p:not(.contact-note) {
      margin-top: 32px;
    }
  }

  @media (width >= 45.0625em) and (height >= 37.5em) and (width <= 59.9375em) {
    /* Zweispaltige Kompositionen, sobald in diesem Breitenband genug Höhe da
       ist. Bewusst KEIN (orientation: landscape): geprüft und verworfen —
       orientation allein lässt kurze Landscape-Phones (812x375, 926x428) in
       die Zweispaltigkeit, und zusammen mit der Höhe nimmt es hohen
       PORTRAIT-Tablets (900x1000) die Zweispaltigkeit weg, die sie heute
       haben. Chrome wertet ausserdem 900x900 wegen der Scrollbar als
       portrait — das erzeugt eine Kante fast im Quadrat. Die Höhenschwelle
       ist hier kein Hack, sie leistet die eigentliche Arbeit. */
    /* Block-Rhythmus kommt aus --section-pad-y; hier nur die Inline-Kante, weil
       die Stage im Landscape-Grid selbst die Seitenränder trägt. */
    .about {
      padding-inline: 0;
    }

    .about-stage {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
      grid-template-areas:
        "portrait copy"
        "experience systems";
      column-gap: 28px;
      row-gap: 36px;
    }

    .about-portrait-frame,
    .about-copy,
    .about-experience,
    .about-systems {
      position: relative;
      inset: auto;
      min-width: 0;
    }

    .about-portrait-frame {
      grid-area: portrait;
      width: 100%;
      height: auto;
      aspect-ratio: 3 / 4;
    }

    .about-copy {
      grid-area: copy;
      width: 100%;
      padding-top: 30px;
    }

    .about-copy::before {
      top: 0;
      right: 0;
      left: 0;
    }

    .about-copy > p:not(.about-meta):not(.about-kicker) {
      margin-top: 26px;
      line-height: 1.5;
    }

    .about-meta {
      margin-top: 26px;
      padding-top: 16px;
    }

    .about-experience {
      grid-area: experience;
      align-self: start;
      width: 100%;
      height: 130px;
    }

    .about-experience::before {
      display: none;
    }

    .about-experience strong {
      font-size: 48px;
    }

    .about-systems {
      grid-area: systems;
      align-self: start;
      width: 100%;
      min-height: 145px;
      height: auto;
      padding: 37px 28px 24px;
    }

    .about-systems::before,
    .about-systems::after {
      display: none;
    }

    .about-systems > span {
      left: 28px;
    }

    .about-systems p {
      white-space: normal;
    }

    .support-ledger {
      grid-template-columns: 170px minmax(0, 1fr);
    }

    .support-ledger-label {
      margin-bottom: 0;
    }
  }

  @media (width <= 45em) {
    /* „Unter 721px strikt linear" gilt jetzt auch für das Painpoint-Raster.
       Es war als einziges Raster bis 479px zweispaltig und lief dadurch in
       111px Inhaltsbreite je Karte (bei 21-26px Serif-Titel). auto-fit kann
       das nicht lösen, weil die Karten per grid-area fest auf Spalte 1/2
       liegen — die Platzierung muss hier mit aufgehoben werden. */
    .pain-grid {
      grid-template-columns: 1fr;
    }

    .pain-item,
    .pain-item:nth-child(n) {
      grid-area: auto;
      border-left: 0;
    }

    .about-copy::before,
    .about-portrait-frame::before,
    .about-portrait-frame::after {
      display: none;
    }

    /* Zwischen 480 und 720px: Portrait und Copy voll breit gestapelt, die
       beiden kleinen Kacheln aber nebeneinander — sonst entsteht eine sehr
       lange Kette schmaler Bloecke. Unter 480px stapelt alles (Regel unten). */
    .about-stage {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 24px;
      row-gap: 0;
    }

    .about-portrait-frame,
    .about-copy {
      grid-column: 1 / -1;
    }

    .about-experience {
      grid-column: 1;
      align-self: start;
      margin-top: 3rem;
    }

    .about-systems {
      grid-column: 2;
      align-self: start;
      margin-top: 3rem;
    }

    /* Titel stiess direkt an die Bildunterkante. */
    .about-copy {
      margin-top: 3rem;
    }

    .about-systems p {
      white-space: normal;
    }

    /* Bento zweispaltig 721–959px, darunter strikt linear (Spec: „unter 721px
       strikt linear") — die Faltung macht jetzt auto-fit/minmax selbst. */
    .outcome-card,
    .outcome-found,
    .outcome-leads,
    .outcome-organised,
    .outcome-time {
      min-height: 0;
    }

    /* Im linearen Stapel liegt die Kachelkante von „Get leads." direkt darunter —
       die Auslauflinie von „Get found." wirkt dort wie ein Fehler. */
    .outcome-found::after {
      display: none;
    }

    /* Im einspaltigen Stapel muessen die Service-Labels nicht mehr auf einer
       gemeinsamen Grundlinie sitzen — margin:auto schob sie sonst unnoetig
       weit vom Fliesstext weg. */
    .pain-service {
      margin-top: 0;
    }

    .outcomes-cta {
      width: min(100%, 15rem);
    }
  }

  @media (width <= 29.9375em) {
    /* Phone composition contract: one preserved, self-contained phone layout.
       Header, Menü-Toggle, Rail und die Basis-Hero-Struktur stehen im ersten
       479px-Block oben; Typo kommt aus der fluiden Rampe (letzter 959px-Block).
       Hier nur Positions-/Struktur-Feinwerte.
       --page-x and the hero-notch fine values ramp continuously to the 320px
       floor (Utopia clamp: A*vw + B between the 320px and 479px endpoints) —
       replaces the former hard jump at a separate 340px stage. */
    /* Nur noch der Gutter und die Header-Höhe. --content-indent ist hier von
       selbst 0, --content-start/-end folgen daraus — kein eigener Sprung mehr.
       Der Gutter trifft bei 479px exakt den Wert der Stufe darüber (23px), so
       dass auch er stetig durch die Naht läuft. */
    :root {
      --page-x: clamp(16px, 4.403vw + 0.12rem, 23px);
      --card-axis: 16px;
      --outcomes-rule-y: 34px;
      --header-height: 64px;
    }

    .site-header {
      align-items: center;
      min-height: var(--header-height);
      padding-top: 0;
      column-gap: 10px;
    }

    .wordmark {
      margin-left: 0;
    }

    .place {
      display: none;
    }

    .menu-toggle {
      min-width: 44px;
      padding-right: 0;
    }

    .hero h1 {
      letter-spacing: -0.06em;
    }

    /* Spickel-Trapez etwas kompakter auf Phone; Position + Achse kommen aus dem
       959px-Block. */
    .hero-notch {
      padding-inline: clamp(1.125rem, 10.0629vw - 14.2012px, 2.125rem);
      min-height: 54px;
      height: auto;
      font-size: clamp(13px, 1.2579vw + 8.9748px, 15px);
      transform: none;
    }

    .hero-transition-line-left,
    .hero-transition-line-right {
      margin: 0;
    }

    .hero-senior-link {
      min-height: 48px;
      padding-left: 0;
    }

    .site-footer {
      min-height: 0;
      padding: 68px var(--content-end) 52px var(--content-start);
    }

    .site-footer::before {
      top: 34px;
    }

    .site-footer::after {
      top: 34px;
      left: var(--content-start);
    }

    .footer-body {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .footer-identity {
      max-width: 306px;
    }

    .footer-copyright {
      margin-top: 38px;
    }

    .contact {
      padding: 6.75rem var(--content-end) 110px var(--content-start);
    }

    .contact::before {
      top: 34px;
    }

    .contact::after {
      bottom: 34px;
    }

    .contact-inner {
      gap: 54px;
    }

    .enquiry-form {
      padding: 42px 22px 20px;
    }

    .form-company,
    .form-message {
      margin-top: 38px;
    }

    .enquiry-form > button {
      margin-top: 28px;
    }

    .faq {
      margin-top: 0;
      padding: 6.75rem var(--content-end) 108px var(--content-start);
    }

    .faq::before {
      top: 40px;
    }

    .faq-list {
      margin-top: 42px;
    }

    .faq-list summary {
      min-height: 76px;
    }

    .faq-list summary::before {
      left: -12px;
    }

    .about {
      min-height: 0;
      padding-inline: var(--content-start) var(--content-end);
    }

    .about-stage {
      display: flex;
      height: auto;
      margin: 0;
      flex-direction: column;
    }

    .about-portrait-frame,
    .about-copy,
    .about-experience,
    .about-systems {
      position: relative;
      inset: auto;
      width: 100%;
    }

    .about-portrait-frame {
      order: 1;
      height: auto;
      aspect-ratio: 3 / 4;
    }

    .about-portrait-frame::before,
    .about-portrait-frame::after {
      display: none;
    }

    .about-copy {
      order: 2;
      margin-top: 3rem;
    }

    .about-copy::before {
      display: none;
    }

    .about-copy > p:not(.about-meta):not(.about-kicker) {
      margin-top: 26px;
    }

    .about-meta {
      margin-top: 28px;
    }

    .about-experience {
      order: 3;
      width: 165px;
      margin-top: 50px;
    }

    .about-systems {
      order: 4;
      min-height: 155px;
      margin-top: 30px;
      padding: 42px 22px 24px;
    }

    .about-systems::before,
    .about-systems::after {
      display: none;
    }

    .about-systems > span {
      top: 25px;
      left: 22px;
    }

    .senior-support {
      padding: 110px var(--content-end) 72px var(--content-start);
    }

    .senior-support::before {
      top: 42px;
    }

    .support-statement h2 em {
      white-space: normal;
    }

    .support-statement h2 span::after {
      display: none;
    }

    .support-statement > p {
      line-height: 1.65;
    }

    .support-ledger {
      margin-top: 3rem;
    }

    .support-work-list > p {
      min-height: 3.25rem;
      line-height: 1.25;
    }

    .support-cta {
      min-height: 4.25rem;
      margin-top: 3rem;
      padding-inline: .625rem;
      border-top: 1px solid var(--rule-petrol-on-dark);
      border-right: 0;
      border-bottom: 1px solid var(--rule-petrol-on-dark);
      border-left: 0;
      background: transparent;
    }

    .pain-points {
      padding-inline: var(--content-start) var(--content-end);
      scroll-margin-top: calc(var(--header-height) + 1rem);
    }

    .pain-points::before {
      top: 72px;
      left: var(--page-x);
    }

    .pain-heading p {
      max-width: 28ch;
    }

    .pain-grid {
      margin-top: 2.5rem;
    }

    .pain-item {
      min-height: 0;
      padding: 1.5rem .5rem 1.6rem 1rem;
    }

    .pain-selection {
      grid-column: 1;
      justify-self: start;
    }

    .pain-arrow {
      grid-column: 3;
      grid-row: 1;
    }

    .pain-item > p:not(.pain-service) {
      margin-top: 1.5rem;
    }

    .outcomes {
      padding-inline: var(--content-start) var(--content-end);
    }



    .outcome-found::after {
      display: none;
    }

    .outcomes-transition {
      right: var(--content-end);
      left: var(--content-start);
      grid-template-columns: minmax(0, 1fr) 206px minmax(0, 1fr);
    }

    .outcomes-transition p {
      font-size: 13px;
    }

    .outcome-card,
    .outcome-found,
    .outcome-leads,
    .outcome-organised,
    .outcome-time {
      min-height: 0;
      padding: 2.25rem 1rem 2.375rem;
    }

    .outcome-card > p:not(.terms) {
      margin-top: 20px;
    }

    .outcome-card .terms {
      margin-top: 1.625rem;
    }

    .outcome-leads {
      border-bottom-color: var(--rule-blue);
    }

    .outcome-acid-line {
      top: 1.25rem;
      left: 1rem;
      width: 5rem;
    }

    .outcomes-cta {
      width: min(100%, 250px);
    }
  }

  @media (width <= 45em) {
    .legal-page {
      padding: 32px var(--content-end) 72px var(--content-start);
    }

    .legal-page-header {
      align-items: flex-start;
    }

    .legal-content {
      padding-top: 52px;
    }

    .legal-content dl {
      grid-template-columns: 1fr;
      gap: 4px;
    }

    .legal-content dd + dt {
      margin-top: 18px;
    }
  }

  /* Muss die letzte Regel der Datei bleiben. */

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

    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}