/* Konia Advisory — Design Tokens & Styles
   Alle Farben, Typo und Abstände zentral. Keine externen Abhängigkeiten. */

:root {
  /* Marke */
  --petrol: #1C3D45;
  --petrol-deep: #122C33;
  --cream: #F6F8F7;
  --steel: #3E7392;
  --graphite: #3F4B52;
  --blue-grey: #EAF0F5;
  --tint: #CFD6D7;
  --white: #FFFFFF;
  --logo-quiet: #718489;
  /* Semantisch */
  --surface-page: var(--cream);
  --surface-card: var(--white);
  --surface-muted: var(--blue-grey);
  --surface-field: var(--petrol);
  --text-heading: var(--petrol);
  --text-body: var(--graphite);
  --text-label: var(--steel);
  --text-heading-on-field: var(--cream);
  --text-body-on-field: var(--tint);
  --line-hairline: var(--tint);
  --line-strong: var(--petrol);
  --line-on-field: rgba(207, 214, 215, 0.4);
  --accent: var(--steel);
  /* Tint trägt zwei Rollen: Haarlinie (--line-hairline) und, seit v5,
     eine eigene Abschnittsfläche zwischen Blaugrau und Petrol. */
  --surface-tint: var(--tint);
  /* Kartenfläche auf Petrol. Weiß wirkt dort aufgeklebt;
  Cream mit 7 %
     Deckung grenzt ab, ohne den Grund zu überstrahlen. */
  --surface-card-on-field: rgba(246, 248, 247, 0.12);
  /* Schrift — ausschließlich systemresident, keine Webfonts */
  /* Display: Georgia statt Constantia. Constantia liegt nur auf Windows
     und in Office — auf iOS und auf Macs ohne Office wich die Kette auf
     Palatino aus, eine Druckschrift mit feineren Strichen. Georgia ist
     auf Windows, in Office, auf macOS und auf iOS vorhanden, von Matthew
     Carter ausdrücklich für den Bildschirm entworfen und muss nicht
     ausgeliefert werden — es bleibt bei null externen Abhängigkeiten.
     Android weicht über „serif“ auf Noto Serif aus, die im Charakter
     nahesteht. */
  --font-display: Georgia, "Times New Roman", serif;
  --font-serif: Georgia, Cambria, "Times New Roman", serif;
  --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  /* Abstände */
  --gutter: clamp(16px, 3vw, 40px);
  /* Gemeinsame Textkante für Hero und alle Abschnitte. Zwischen dem
     alten Wert (20–40) und dem eingezogenen Hero (40–96): der Text
     steht weiter innen, behält aber den Bezug zur senkrechten Haarlinie
     an der linken Kante von .wrap. */
  --pad-inline: clamp(24px, 4vw, 64px);
  /* Zurückgenommen von 148 px aus der Entwurfsschicht: zwei Abschnitte
     ergaben zusammen knapp 300 px Abstand. */
  --pad-section: clamp(56px, 8vw, 104px);
  --measure: 52ch;
  /* Radius nach Rolle. „Kantenlos“ gilt für Flächen, Bänder und Linien;
  Bedienbares und eingefasste Inhalte sind gestaffelt gerundet. */
  --radius: 0;
  --radius-control: 8px;
  --radius-card: 16px;
  --radius-panel: 28px;
}

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-serif);
  line-height: 1.6;
  hyphens: auto;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--petrol-deep); }
:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 2px;
}
/* Steel auf Petrol ergibt 2,4:1 und verfehlt SC 1.4.11 (3:1 nötig).
   Auf dunklem Grund deshalb Cream — 11,9:1. */
.field :focus-visible, .case__role :focus-visible { outline-color: var(--cream); }

::selection { background: var(--tint); }

/* --- Skip Link --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--petrol);
  color: var(--cream);
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: var(--cream);
}

/* --- Raster: Signaturlinie an der linken Inhaltskante --- */
.section { padding-inline: var(--gutter); }
/* Die klebende Kopfzeile (82px) darf ein Sprungziel nicht verdecken. */
[id] { scroll-margin-top: 96px; }
.wrap {
  max-width: 1160px;
  margin-inline: auto;
  padding: var(--pad-section) var(--pad-inline);
}
.field .wrap, .wrap--field { border-left-color: var(--line-on-field); }

/* --- Gründe --- */
.field {
  background: var(--surface-field);
  color: var(--text-body-on-field);
}
.muted {
  background: var(--surface-muted);
  border-top: 1px solid var(--line-hairline);
  border-bottom: 1px solid var(--line-hairline);
  /* Steel erreicht auf Blaugrau bei 11px nur 4,49:1. Eine Stufe dunkler = 5,65:1. */
  --text-label: #35637E;
}

/* --- Typografie --- */
.eyebrow {
  /* Markenwert, darf von keiner Kontextregel überschrieben werden */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-label);
  margin: 0;
}
.field .eyebrow, .eyebrow--on-field { color: var(--text-body-on-field); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
  /* Markenregel: keine Silbentrennung in Überschriften. Der Notumbruch greift
     nur, wenn ein Wort sonst aus dem Feld laufen würde (ab ca. 300px Breite). */
  hyphens: none;
  overflow-wrap: break-word;
}
.field h1, .field h2, .field h3 { color: var(--text-heading-on-field); }

.h-display {
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.1;
  max-width: 26ch;
  margin-top: 24px;
}
.h-section { margin-top: 12px; }
.h-field {
  line-height: 1.2;
  margin-top: 12px;
}

.rule {
  width: 32px;
  height: 1px;
  background: var(--line-strong);
  border: 0;
  margin: 24px 0;
}
.field .rule, .rule--on-field { background: var(--line-on-field); }

.lede {
  font-size: clamp(18px, 2vw, 22px);
  max-width: var(--measure);
  margin: 0;
  text-wrap: pretty;
  color: var(--text-heading);
}
.field .lede { color: var(--text-heading-on-field); }
p {
  max-width: 62ch;
  text-wrap: pretty;
}
.field p { color: var(--text-body-on-field); }

.statement {
  font-family: var(--font-display);
  margin: 0;
  color: var(--text-heading-on-field);
}
.lead-in {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 24px);
  line-height: 1.35;
  color: var(--graphite);
  max-width: 34ch;
  margin: 0;
  padding: 40px 0 48px;
}

/* --- Kopfzeile --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 248, 247, .94);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid var(--line-hairline);
  padding-inline: var(--gutter);
}
.site-header__inner {
  max-width: 1160px;
  margin-inline: auto;
  border-left: 1px solid var(--line-hairline);
  padding: 14px var(--pad-inline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.wordmark {
  display: block;
  text-decoration: none;
  line-height: 1;
  border-block: 1px solid var(--line-hairline);
  padding: 7px 2px 6px;
}
.wordmark__name {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: .36em;
  text-indent: .36em;
  margin-left: -.18em;
  color: var(--petrol);
  line-height: 1;
}
.wordmark__sub {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .34em;
  text-indent: .34em;
  margin-left: -.17em;
  color: var(--logo-quiet);
  margin-top: 5px;
  line-height: 1;
}

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav__link {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--text-body);
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 0;
  min-height: 24px;
}
.nav__link:hover, .nav__link[aria-current] { color: var(--petrol); }
.nav__link:active, .menu__link:active, .rail__link:active { opacity: .7; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-decoration: none;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: normal;
  text-wrap: balance;
}
.btn--outline {
  background: transparent;
  color: var(--petrol);
  border: 1px solid var(--line-strong);
}
.btn--outline:active {
  background: var(--petrol-deep);
  border-color: var(--petrol-deep);
  color: var(--cream);
}
.btn--solid {
  background: var(--petrol);
  color: var(--cream);
  border: 1px solid var(--petrol);
}
.btn--solid:hover {
  background: var(--petrol-deep);
  color: var(--cream);
}
.btn--solid:active {
  background: var(--petrol-deep);
  transform: translateY(1px);
}
.btn--on-field {
  background: var(--cream);
  color: var(--petrol);
  border: 1px solid var(--cream);
}
.btn--on-field:hover {
  background: var(--tint);
  color: var(--petrol);
}
.btn--on-field:active {
  background: var(--tint);
  transform: translateY(1px);
}
.btn--ghost-field {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--line-on-field);
}
.btn--ghost-field:hover {
  background: rgba(207, 214, 215, .14);
  color: var(--cream);
}
.btn .icon { flex: none; }
.nav .btn { white-space: nowrap; }

/* Mobiles Menü — reines HTML über <details>, kein JavaScript nötig */
.menu { display: none; }
.menu > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  color: var(--petrol);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .icon-close, .menu[open] > summary .icon-open { display: none; }
.menu[open] > summary .icon-close { display: block; }
.menu:not([open]) .menu__panel { display: none; }
.menu__panel {
  background: var(--surface-page);
  border-top: 1px solid var(--line-hairline);
  border-bottom: 1px solid var(--line-hairline);
  padding-inline: var(--gutter);
}
.menu__list {
  max-width: 1160px;
  margin-inline: auto;
  border-left: 1px solid var(--line-hairline);
  padding: 0 var(--pad-inline) 24px;
}
.menu__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-family: var(--font-sans);
  font-size: 19px;
  color: var(--petrol);
  text-decoration: none;
  border-bottom: 1px solid var(--line-hairline);
}
.menu__link:last-of-type { border-bottom: 0; }
.menu .btn {
  width: 100%;
  margin-top: 16px;
  justify-content: space-between;
  white-space: normal;
  text-align: left;
}

@media (max-width: 1100px) {
  .nav { display: none; }
  .site-header { position: relative; }
  .menu { display: block; }
  .menu__panel {
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - 100%); overflow-y: auto;
  }
  .menu__list { border-left: 0; }
}
.field .col { border-top-color: var(--line-on-field); }
.field .col__figure { color: var(--cream); }
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 44px;
}
.partner {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line-on-field);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 20px;
}
.partner p:not(.eyebrow) {
  margin: 0;
  font-size: 16px;
}
.closing { margin: 40px 0 0; }

/* --- Wegweiser (Handlungsfelder) --- */
.rail {
  position: sticky;
  top: 82px;
  z-index: 5;
  background: var(--surface-page);
  border-bottom: 1px solid var(--line-hairline);
  padding-inline: var(--gutter);
}
.rail__inner {
  max-width: 1160px;
  margin-inline: auto;
  border-left: 1px solid var(--line-hairline);
  padding: 0 var(--pad-inline);
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
}
.rail__link {
  min-height: 48px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.rail__num { font-weight: 700; }
.rail__label {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--text-body);
}
.rail__link:hover .rail__label { color: var(--petrol); }
.rail__link[aria-current="true"] { border-bottom-color: var(--petrol); }
/* Auf schmalen Bildschirmen klebt der Wegweiser ebenfalls, wird dort
   aber einzeilig und waagerecht scrollbar — sonst kostet er drei Zeilen
   Höhe. Vorher war er dort statisch und damit nach dem ersten Scrollen
   nur noch die Wiederholung der Feldköpfe. */
@media (max-width: 1100px) {
  .rail__inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding-block: 10px;
  }
  .rail__link { flex: none; white-space: nowrap; }
}

/* --- Handlungsfeld-Blöcke --- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 48px;
  align-items: start;
}
.split__aside { max-width: 360px; }
.field-num {
  font-family: var(--font-display);
  line-height: .9;
  color: var(--tint);
}
.list-plain {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-plain > li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-hairline);
}
.list-plain > li:last-child { border-bottom: 0; }
.list-plain p:not(.eyebrow) {
  margin: 8px 0 0;
  font-size: 18px;
  color: var(--text-heading);
}
.result {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px solid var(--petrol);
}
.result p:not(.eyebrow) {
  margin: 8px 0 0;
  font-size: 18px;
  color: var(--text-heading);
}

.phases {
  list-style: none;
  margin: 0;
  padding: 0;
}
.phases > li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 0 24px;
}
.split__aside { min-width: 0; }
.phases__marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.phases__dot {
  width: 9px;
  height: 9px;
  background: var(--petrol);
  margin-top: 9px;
  flex: none;
}
.phases__line {
  width: 1px;
  flex: 1;
  background: var(--line-hairline);
}
.phases__body { padding-bottom: 32px; }
.phases > li:last-child .phases__body { padding-bottom: 0; }
.phases p:not(.eyebrow) {
  margin: 8px 0 0;
  font-size: 19px;
  color: var(--text-heading);
}

.facts {
  padding-top: 20px;
  border-top: 1px solid var(--line-hairline);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 24px;
  list-style: none;
  padding-inline: 0;
}
.facts li {
  font-size: 16px;
  line-height: 1.6;
}

.card {
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-top: 2px solid var(--petrol);
  padding: 24px 28px 28px;
}
.card p:not(.eyebrow) {
  margin: 12px 0 0;
  font-size: 16px;
  color: var(--text-heading);
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* --- Prüfliste (Wie wir liefern) --- */
.checklist {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.checklist li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-on-field);
}
.checklist li:last-child { border-bottom: 0; }
.checklist span {
  font-size: 18px;
  color: var(--text-heading-on-field);
}
.checklist .icon {
  margin-top: 6px;
  color: var(--tint);
}
.case__icon svg { color: var(--steel); }
.delivery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 40px;
  margin-top: 56px;
}
.delivery__col {
  border-top: 1px solid var(--line-on-field);
  padding-top: 24px;
}
.delivery__note {
  margin: 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line-on-field);
  font-size: 16px;
}

/* --- Mandate --- */
.teaser-cta {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line-hairline);
}
.case {
  padding: 40px 0;
  border-top: 1px solid var(--line-hairline);
}
.case__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}
.case__icon {
  width: 60px;
  height: 60px;
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
}
.case__title {
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.2;
  margin-top: 12px;
}
.case__figure {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  color: var(--text-heading);
  margin: 10px 0 8px;
}
.case__note {
  font-style: italic;
  font-size: 16px;
  margin: 20px 0 0;
}
.case__body {
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-top: 2px solid var(--petrol);
  padding: 24px 28px;
}
.case__body p:not(.eyebrow) {
  font-size: 17px;
  margin: 10px 0 0;
}
.case__steps {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.case__steps li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-hairline);
  font-size: 17px;
}
.case__steps li:last-child { border-bottom: 0; }
.case__sub {
  list-style: disc;
  margin: 8px 0 0;
  padding-left: 1.25em;
}
.case__steps .case__sub li {
  padding: 3px 0;
  border-bottom: 0;
  font-size: inherit;
}
.case__sub li::marker { color: var(--petrol); }
.case__role {
  background: var(--surface-field);
  padding: 20px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 8px 24px;
  align-items: start;
}
.case__role p:not(.eyebrow) {
  margin: 0;
  font-size: 16px;
  color: var(--text-heading-on-field);
}
.divider-top {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line-hairline);
}
.bio__name {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 28px);
  line-height: 1.2;
  color: var(--text-heading);
  margin: 12px 0 0;
}
.bio__role {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: .03em;
  margin: 8px 0 0;
}

/* --- Kontakt & Fußzeile --- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 32px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--line-on-field);
}
.contact-grid a {
  color: var(--cream);
  display: inline-block;
  padding-block: 4px;
}
.contact-grid a:hover { color: var(--tint); }
.center { text-align: center; }
.center .h-section, .center .lede, .center .rule { margin-inline: auto; }
.center .actions { justify-content: center; }

.site-footer {
  background: var(--surface-page);
  border-top: 1px solid var(--line-hairline);
  padding-inline: var(--gutter);
}
.site-footer__inner {
  max-width: 1160px;
  margin-inline: auto;
  border-left: 1px solid var(--line-hairline);
  padding: 32px var(--pad-inline);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
}
.site-footer p {
  font-family: var(--font-sans);
  font-size: 14px;
  margin: 0;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.site-footer nav a {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-body);
  text-decoration: none;
  padding: 8px 0;
}
.site-footer nav a:hover, .site-footer nav a[aria-current] { color: var(--petrol); }

/* --- Rechtsseiten --- */
.legal { max-width: 720px; }
.legal a { overflow-wrap: anywhere; }
.legal__block {
  padding: 24px 0;
  border-top: 1px solid var(--line-hairline);
}
.legal__block > div:not(.eyebrow) {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-heading);
  margin-top: 10px;
}
.todo {
  background: var(--blue-grey);
  border-left: 3px solid var(--steel);
  padding: 16px 20px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
}

/* --- Hilfsklassen --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Druck --- */
@media print {
  :root { --surface-page: #FFF;
  --surface-field: #FFF;
  --surface-muted: #FFF;
}
  .site-header, .rail, .menu, .skip-link, .actions, .teaser-cta { display: none !important; }
  .field, .field h1, .field h2, .field h3, .field p, .field .eyebrow,
  .checklist span, .case__role p, .col__figure {
  
    background: #FFF !important; color: #1C3D45 !important;
  
}
  .field .rule, .field .col, .delivery__col, .delivery__note, .checklist li {
  
    border-color: #CFD6D7 !important; background: #FFF !important;
  
}
  .wrap {
  border-left: 0;
  padding-block: 24pt;
}
  body { font-size: 11pt; }
  h1, h2, h3, .case, .split { page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }
  a[href^="http"]::after, a[href^="mailto"]::after {
  content: " (" attr(href) ")";
  font-size: 9pt;
}
}

/* =====================================================================
   Gestaltungsstand v5 — übernommen aus den Entwurfsschichten
   entwurf/assets/css/{ luft, luft-v2, v4, v5; }.css am 15.09.2026.
   Die Schichten lagen in dieser Reihenfolge übereinander; spätere Regeln
   überschreiben frühere. Ein Aufräumdurchgang (überholte Regeln entfernen,
   Dopplungen zusammenfassen) ist als nächster Schritt vorgesehen — bis
   dahin bleibt die Reihenfolge unverändert, weil sie das Ergebnis trägt.
   ===================================================================== */

/* ===== übernommen aus entwurf/assets/css/luft.css ===== */
/* Entwurf-Layer über site/assets/css/styles.css.
   Ändert nur Rhythmus, Größen und zwei Muster — keine neuen Farben,
   keine neue Typografie. Alle Werte leiten sich aus den Tokens ab. */

:root {
  /* Zurückgenommen von clamp(72px, 11vw, 148px): zwei Abschnitte ergaben
     zusammen knapp 300 px Abstand, also fast einen ganzen Laptop-Bildschirm
     ohne Inhalt. 104 px oben und unten geben Ruhe, ohne zu leeren. */
}

/* --- Hero: mehr Luft, größere Schlagzeile, Kennzahlen als Band --- */
.hero .wrap { padding-block: clamp(72px, 10vw, 128px) clamp(48px, 6vw, 80px); }
.hero .h-display {
  font-size: clamp(38px, 7.4vw, 84px);
  letter-spacing: -.015em;
  max-width: 21ch;
  margin-top: 32px;
}
.hero .rule {
  width: 56px;
  margin-block: 32px;
}
.hero .actions { margin-top: 56px; }
@media (max-width: 720px) {
  .stats--band .col + .col { border-left: 0; border-top: 1px solid var(--line-on-field); padding-left: 0; }
}
@media (min-width: 861px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__tile--lead { grid-column: span 2; }
}

/* --- Abschnitte etwas großzügiger setzen --- */
.h-section { letter-spacing: -.01em; }
/* Korrigiert 16.09.2026: .cards war ein Haarlinien-Raster (1 px Abstand,
   Haarlinie als Hintergrund) — also ein Tabellenmuster mit bündigen
   Zellen. Zusammen mit dem Kartenradius von 16 px schien der Hintergrund
   an den Ecken durch, und die Linien lagen doppelt (Rasterhintergrund
   plus Kartenrahmen). Jetzt echte Abstände wie bei .feature-cards und
   .qa-rows; die Abgrenzung tragen die Kartenrahmen allein. */
.cards {
  gap: clamp(14px, 1.8vw, 22px);
}
/* Zwischenüberschrift über den Karten: überspannt das Raster, damit sie nicht
   als eigene Kartenspalte gelesen wird. */
.cards__label {
  grid-column: 1 / -1;
  margin-bottom: calc(-1 * clamp(4px, 0.6vw, 8px));
}
/* Einleitungssatz über den vier Ebenen — etwas größer als Fließtext, damit er
   die Karten anführt statt neben ihnen zu stehen. */
.cards__intro {
  grid-column: 1 / -1;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.55;
  color: var(--text-heading);
  max-width: 58ch;
  text-wrap: pretty;
}

/* --- Dezentes Einblenden beim Scrollen --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}
/* Im Druck zählt nur der Inhalt — nie ein nicht ausgelöster Einblend-Zustand. */
@media print {
  
  [data-reveal] { opacity: 1 !important; transform: none !important; 
}
}

/* ===== übernommen aus entwurf/assets/css/luft-v2.css ===== */
/* Entwurf v2 — liegt über styles.css und luft.css.
   Drei Eingriffe: Typo-Kontrast, mitlaufender Handlungsfeld-Kopf,
   klarere Hierarchie in der Ausgangslage. Keine neuen Farben. */

/* --- 1 · Typo-Kontrast ---------------------------------------------------
   Die Display-Schrift trägt viel weiter, als sie bisher eingesetzt wird.
   Schlagzeile und Abschnittsköpfe steigen, Fließtext bleibt klein. */
.hero .h-display {
  font-size: clamp(42px, 9vw, 108px);
  line-height: 1.02;
  letter-spacing: -.025em;
  max-width: 18ch;
}
.hero .lede {
  font-size: clamp(18px, 1.7vw, 21px);
  max-width: 44ch;
}
.h-section {
  font-size: clamp(32px, 5.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.h-field {
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -.015em;
}
.statement {
  font-size: clamp(30px, 5.2vw, 58px);
  line-height: 1.15;
  letter-spacing: -.02em;
  max-width: 22ch;
}
.field-num {
  font-size: clamp(64px, 10vw, 132px);
  letter-spacing: -.03em;
}

/* --- 2 · Mitlaufender Handlungsfeld-Kopf --------------------------------
   Nummer, Titel und Leitfrage bleiben stehen, während die Liste daneben
   scrollt — der Bezug bleibt sichtbar. Ab 900px (einspaltig) abgeschaltet. */
@media (min-width: 901px) {
  .split__aside--sticky {
    position: sticky;
  top: 148px;
  /* Kopfzeile 82px + Wegweiser 66px */
    align-self: start;
}
}
@media (prefers-reduced-motion: reduce) { .split__aside--sticky { position: static; }
}

/* --- 3 · Ausgangslage: Frage führt, Muster antwortet -------------------- */
.qa--v2 .qa__head { display: none; }
@media (max-width: 760px) {
  .qa--v2 .qa__row { grid-template-columns: minmax(0, 1fr); }
}

/* ===== übernommen aus entwurf/assets/css/v4.css ===== */
/* Entwurf v4 — liegt über styles.css, luft.css und luft-v2.css.
   Umgesetzt: Hero als zweispaltige Komposition mit dem Porträt auf der
   rechten Hälfte (Muster G), große Typografie und mitlaufende
   Handlungsfeld-Köpfe aus v2, Bento-Übersicht aus v1.
   Bewusst NICHT übernommen: Tabs, Zähler-Animation, randlose Vollbreite,
   Textur. Inhalte unverändert gegenüber site/index.html. */

/* --- Hero: Satz links, Porträt rechts, Kennzahlen als Band darunter --- */
.hero { padding: 0; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.hero__copy {
  padding: clamp(64px, 9vw, 120px) var(--gutter) clamp(48px, 6vw, 72px);
  width: 100%;
}
.hero__figure { margin: 0; }
.hero__figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 46% 18%;
}
.hero__caption { display: flex; }

.hero__band {
  max-width: 1160px;
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(56px, 7vw, 88px);
}
.hero__band .stats--band { margin-top: 0; }
.hero__band .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero__band .partner { margin-top: clamp(32px, 4vw, 44px); }

@media (min-width: 901px) {
  .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); align-items: stretch; }
  .hero__copy {
    padding-left: max(var(--gutter), calc((100vw - 1160px) / 2 + var(--gutter)));
    padding-right: clamp(40px, 5vw, 72px);
    margin-inline: 0; max-width: none;
    display: flex; flex-direction: column; justify-content: center;
  }
  .hero__figure { display: flex; flex-direction: column; }
  .hero__figure img { flex: 1 1 auto; min-height: 460px; }
  .hero__caption { padding-inline: clamp(20px, 2.5vw, 32px); }
}
@media (max-width: 720px) {
  .hero__band .cols { grid-template-columns: minmax(0, 1fr); }
}

/* Die Hero-Typografie aus v2 gilt weiter, bezieht sich hier aber auf
   .hero__copy statt auf .hero .wrap. */
.hero__copy .h-display {
  font-size: clamp(38px, 6.4vw, 92px);
  line-height: 1.03;
  letter-spacing: -.025em;
  max-width: 19ch;
  margin-top: 28px;
}
.hero__copy .lede { font-size: clamp(18px, 1.8vw, 22px); }
.hero__copy .rule {
  width: 56px;
  margin-block: 28px;
}
.hero__copy .actions { margin-top: clamp(36px, 4vw, 52px); }

/* ===== übernommen aus entwurf/assets/css/v5.css ===== */
/* Entwurf v5 — modernisierte Ausführung, Inhalte unverändert.
   Vier Eingriffe gegen den bisherigen Guide, jeder einzeln begründet:
   1 Petrol nur noch zweimal als Vollfläche (Hero, Kontakt)
   2 Serif nur für Display, Sans für alles Bedienbare und Fließtext
   3 Radius 8px ausschließlich auf Schaltflächen, Flächen bleiben scharf
   4 ein Aktionston, nur für Interaktion reserviert */

:root {
  /* Kein neuer Farbwert: die Interaktionsfarbe ist das vorhandene
     --accent (Steel #3E7392), der Hover-Ton --petrol-deep — genau die
     Paarung, die styles.css für Links bereits definiert. */
  --aktion: var(--accent);
  --aktion-hover: var(--petrol-deep);
}

/* --- 2 · Typografie trennen: Serif redaktionell, Sans bedienbar --- */
body, p, li, .lede, .col__text, .card p, .qa__a, .delivery__note, .facts li, .closing { font-family: var(--font-sans); }
.h-display, .h-section, .h-field, .statement, .bento__title, .col__figure,
.field-num, .case__figure, .bio__name, .hero__name, .qa__q, .wordmark__name { font-family: var(--font-display); }
/* „ADVISORY“ bleibt in der Grotesk — im Logoentwurf steht dort eine leichte
   Sans, nicht die Display-Serif. Die Sammelregel darüber hatte es
   versehentlich mit erfasst. */
.wordmark__sub { font-family: var(--font-sans); }
p, li { line-height: 1.62; }

/* --- 3 · Radius nur auf Bedienelementen --- */
.btn, .menu__panel, summary { border-radius: var(--radius-control); }
.btn {
  transition: background-color 140ms linear, color 140ms linear, border-color 140ms linear;
}

/* --- 4 · Aktionston, nur für Interaktion --- */
/* Der Aktionston gilt nur auf hellen Flächen. Auf Petrol würde er auf
   1,2:1 fallen — dort bleibt der On-Field-Ton des Systems. */
.section:not(.field) a:not(.btn):not(.wordmark):not(.bento__tile):not(.rail__link),
.site-footer a {
  color: var(--aktion);
  text-underline-offset: 3px;
}
.section:not(.field) a:not(.btn):not(.wordmark):not(.bento__tile):not(.rail__link):hover,
.site-footer a:hover { color: var(--aktion-hover); }
.field a:not(.btn), .skip-link {
  color: var(--text-heading-on-field);
  text-underline-offset: 3px;
}
.field a:not(.btn):hover { color: var(--white); }
/* Gefüllte Schaltflächen bleiben bei der Systemlogik (Petrol bzw. Cream
   auf dunklem Grund); Steel trägt Linien, Marken und Umriss-Buttons. */
.btn--outline {
  border-color: var(--accent);
  color: var(--accent);
}
.btn--outline:hover {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--cream);
}

/* --- 1 · Petrol sparsam: Taktwechsel und Lieferung werden hell --- */
.statement-band {
  background: var(--surface-page);
  border-block: 1px solid var(--line-hairline);
}
.statement-band .statement {
  color: var(--text-heading);
  font-size: clamp(30px, 5.4vw, 60px);
  line-height: 1.12;
  letter-spacing: -.022em;
  max-width: 24ch;
}
.tone { background: var(--surface-muted); }
.tone .h-section, .tone .statement { color: var(--text-heading); }
.tone .lede, .tone p, .tone li, .tone span { color: var(--text-body); }
.tone .eyebrow { color: var(--text-label); }
.tone .delivery__col {
  border-top: 1px solid var(--line-hairline);
  padding-top: 28px;
}
.tone .checklist .icon { color: var(--aktion); }
.tone .delivery__note { font-size: 15px; }

/* --- Flächen über feine Rahmen statt über Farbe abgrenzen --- */
.cards .card, .bento__tile { box-shadow: none; }
.result, .facts, .divider-top { border-color: var(--line-hairline); }

/* --- Weniger dekorative Linien, mehr Weissraum --- */
.section .wrap > .rule { width: 48px; }
.h-section { max-width: 22ch; }
.closing {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.3;
  color: var(--text-heading);
  max-width: 30ch;
}

/* --- Wegweiser ruhiger: Sans, kleinere Nummern --- */
.rail__label {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .01em;
}
.rail__num {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--text-label);
}

/* Auf der hellen Tonfläche erreicht --accent nur 4,49:1 — knapp unter AA.
   Labels und Anmerkungen dort in den dunkleren Systemtönen. */
.tone .eyebrow { color: var(--petrol); }
.tone .delivery__note { color: var(--text-body); }

/* --- Kennzahlen als ruhige Boxen (Fassung D) ---
   Kartenwirkung ohne Schatten: leicht aufgehellte Fläche, feine Kante,
   6 px Radius. Schatten hätte auf Petrol keine Wirkung, und weiche Ecken
   bleiben damit auf Bedienelemente und diese Boxen begrenzt. */
.stat-boxes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.stat-boxes__b {
  background: var(--surface-card-on-field);
  border: 1px solid var(--line-on-field);
  border-radius: 6px;
  padding: clamp(22px, 2.6vw, 30px);
}
.stat-boxes__fig {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--text-heading-on-field);
  margin: 0;
}
.stat-boxes__lab {
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-body-on-field);
}
@media (max-width: 760px) { .stat-boxes { grid-template-columns: minmax(0, 1fr); } }

/* --- "Für wen wir arbeiten" als Karten ---
   Auf der hellen Tonfläche tragen weiße Karten: hier wirkt ein feiner
   Schatten tatsächlich räumlich, anders als auf Petrol. Radius bleibt
   mit 10 px zurückhaltend, Piktogramme im Aktionston. */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(40px, 5vw, 56px);
}
.feature-cards__c {
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-card);
  padding: clamp(24px, 2.8vw, 32px);
  display: flex;
  flex-direction: column;
}
.feature-cards__icon {
  color: var(--aktion);
  margin-bottom: clamp(24px, 3vw, 36px);
}
.feature-cards__c .eyebrow {
  color: var(--accent);
  margin: 0;
}
.feature-cards__text {
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.45;
  color: var(--text-body);
  max-width: 22ch;
}

/* --- Leitfragen als gestapelte Zeilen-Karten ---
   Frage links, Muster rechts, jede Frage auf eigener weißer Fläche.
   Der Tabellenkopf entfällt: die Rollen der beiden Spalten sind durch
   Größe und Ton eindeutig. */
.qa-rows {
  margin-top: clamp(40px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 18px);
}
.qa-rows__r {
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-card);
  padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.qa-rows__q {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--text-heading);
  margin: 0;
  max-width: 20ch;
  hyphens: none;
  text-wrap: pretty;
}
.qa-rows__a {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-body);
  max-width: 46ch;
}
@media (min-width: 761px) {
  .qa-rows__r { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); }
}

/* --- Handlungsfelder: Wegweiser als Pillen, Inhalte als Karten ---
   Drei Ebenen pro Feld: Leitfrage auf ruhiger Tonfläche, Liste als eine
   zusammenhängende Karte, Ergebnis als dunkle Karte am Schluss. */

/* Wegweiser */
.rail__inner {
  gap: 10px;
  flex-wrap: wrap;
}
/* Eine Regel ohne Ausnahme: alles Klickbare 8 px, Inhaltskarten 16,
   Tafeln 28. Die Pillenform des Wegweisers war das einzige vollrunde
   Element und stand damit gegen die Form der Schaltflächen. */
.rail__link {
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-control);
  padding: 11px 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.rail__link:hover { border-color: var(--aktion); }
.rail__link[aria-current="true"] {
  border-color: var(--petrol);
  background: var(--surface-muted);
}
.rail__link[aria-current="true"] .rail__label { color: var(--petrol); }
.rail__num { margin: 0; }
.rail__label { font-size: 15px; }

/* Nummer und Titel links */
.split__aside .field-num {
  color: var(--line-strong);
  margin-bottom: 4px;
}
.split__aside .h-field { margin-top: 0; }

/* Leitfrage bzw. Kostenhinweis als ruhige Tonfläche */
.divider-top {
  background: var(--surface-muted);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-card);
  padding: clamp(22px, 2.6vw, 28px);
  margin-top: clamp(26px, 3vw, 34px);
}
.divider-top .eyebrow {
  color: var(--accent);
  margin: 0;
}
.divider-top .lede {
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.3;
  color: var(--text-heading);
  max-width: 22ch;
}
.divider-top .case__figure { color: var(--petrol); }

/* Liste als eine Karte mit Trennlinien */
.list-plain {
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
}
.list-plain > li {
  padding-block: clamp(18px, 2.2vw, 24px);
  border: 0;
}
.list-plain > li + li { border-top: 1px solid var(--line-hairline); }
.list-plain > li:first-child { padding-top: 0; }
.list-plain > li:last-child { padding-bottom: 0; }
.list-plain .eyebrow {
  color: var(--accent);
  margin: 0 0 8px;
}
.list-plain p:last-child {
  margin: 0;
  font-size: 17px;
  max-width: 48ch;
}

/* Ergebnis als dunkle Karte */
.result {
  background: var(--petrol);
  border: 0;
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 32px);
  margin-top: clamp(14px, 1.8vw, 20px);
}
.result .eyebrow {
  color: var(--text-body-on-field);
  margin: 0 0 10px;
}
.result p:last-child {
  margin: 0;
  color: var(--cream);
  font-size: 17px;
  max-width: 46ch;
}

/* Phasen und Fakten in der gleichen Kartenlogik */
.phases {
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 34px);
}
.facts {
  background: var(--surface-muted);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-card);
  padding: clamp(22px, 2.6vw, 28px);
  margin-top: clamp(14px, 1.8vw, 20px);
}
.cards .card {
  border-radius: var(--radius-card);
  border: 1px solid var(--line-hairline);
  border-top-width: 1px;
}

/* --- "Wie wir liefern" als dunkle Tafel auf hellem Grund ---
   Dunkel bleibt die Betonung des Abschnitts, aber als eingefasste Tafel
   statt als randlose Vollfläche. Die beiden Rollen sitzen darin als
   leicht aufgehellte Karten. */
.panel-host { background: var(--surface-page); }
.panel-host .wrap {
  background: var(--surface-muted);
  border: 1px solid var(--line-hairline);
  border-radius: 18px;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 64px);
  max-width: 1160px;
  margin-inline: auto;
}
/* Petrol bleibt allein dem Hero — diese Tafel trägt Blaugrau.
   Eyebrow eine Stufe dunkler, weil Steel auf Blaugrau nur 4,49:1 erreicht. */
.panel-host .eyebrow { color: var(--petrol); }
.panel-host .h-section {
  color: var(--text-heading);
  max-width: 20ch;
  margin-inline: auto;
}
.panel-host .lede {
  color: var(--text-body);
  max-width: 52ch;
  margin-inline: auto;
}
.panel-host .rule { border-color: var(--line-hairline); }

.panel-host .delivery {
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(40px, 5vw, 56px);
}
.panel-host .delivery__col {
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  padding: clamp(24px, 3vw, 34px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top-width: 1px;
}
.panel-host .delivery__col > .eyebrow { margin: 0 0 4px; }
.panel-host .checklist {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}
.panel-host .checklist li {
  padding-block: 15px;
  border-bottom: 1px solid var(--line-hairline);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  color: var(--text-heading);
}
.panel-host .checklist li:first-child { padding-top: 0; }
.panel-host .checklist .icon {
  color: var(--accent);
  flex: none;
}
/* Der Eintragstext steht im span und trägt aus styles.css die On-Field-Farbe;
   auf der weißen Karte muss er ausdrücklich zurückgeholt werden. */
.panel-host .checklist span {
  color: var(--text-heading);
  font-size: 17px;
}
/* Die Notiz erbt aus der Grundregel eine Haarlinie in --line-on-field —
   einem Ton für den Petrol-Grund. Auf der weißen Karte der Liefer-Tafel
   ergäbe er über Weiß nur etwa 1,07:1, und die Liste darüber schließt
   ohnehin mit ihrer eigenen Haarlinie ab. Zwei parallele Linien 22 px
   auseinander, eine davon fast unsichtbar — deshalb hier keine. Die
   22 px Abstand trennen ausreichend. Gleiche Fehlerklasse wie beim
   Eintragstext zwei Regeln weiter oben. */
.panel-host .delivery__note {
  margin-top: 22px;
  padding-top: 0;
  border-top: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
  max-width: 42ch;
}

/* --- Über Konia: Biografie als Karte, Branchen als Tonfläche ---
   Name, Rolle und der Werdegang bilden eine Einheit und stehen deshalb
   in einer Karte; die Branchenliste ist eine Beilage und bleibt ruhiger. */
.bio-card {
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-radius: 12px;
  padding: clamp(26px, 3vw, 36px);
  margin-top: clamp(30px, 3.5vw, 40px);
}
.bio-card .eyebrow {
  color: var(--accent);
  margin: 0;
}
.bio-card .bio__name { margin-top: 12px; }
.bio-card .bio__role { margin-top: 4px; }
.bio-card__text {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.62;
  max-width: 58ch;
}

.bio-tint {
  background: var(--surface-muted);
  border: 1px solid var(--line-hairline);
  border-radius: 12px;
  padding: clamp(24px, 2.8vw, 32px);
  margin-top: clamp(14px, 1.8vw, 20px);
}
.bio-tint .eyebrow {
  color: var(--accent);
  margin: 0;
}
.bio-tint__text {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.6;
  max-width: 56ch;
}

/* --- Kontakt als helle Tafel ---
   Gegenstück zur dunklen Liefer-Tafel: gleiche Form, hellerer Ton.
   Flach statt mit Verlauf — Verläufe bleiben ausgeschlossen. */
.panel-light { background: var(--surface-page); }
.panel-light .wrap {
  background: var(--surface-muted);
  border: 1px solid var(--line-hairline);
  border-radius: 18px;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 64px);
  max-width: 1160px;
  margin-inline: auto;
}
.panel-light .eyebrow { color: var(--petrol); }
.panel-light .h-section {
  color: var(--text-heading);
  max-width: 20ch;
  margin-inline: auto;
}
.panel-light .lede {
  color: var(--text-body);
  max-width: 50ch;
  margin-inline: auto;
}
.panel-light .rule { border-color: var(--line-hairline); }
.panel-light .contact-grid { gap: clamp(16px, 2vw, 24px); }

/* Karten bleiben weiß: auf Blaugrau erreicht Steel nur 4,49:1, auf Weiß
   4,83:1 — und E-Mail und Telefon sind die beiden einzigen Kontaktwege. */
.contact-card {
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-radius: 12px;
  padding: clamp(22px, 2.6vw, 30px);
}
.contact-card .eyebrow {
  color: var(--accent);
  margin: 0;
}
.contact-card__value {
  margin: 12px 0 0;
  font-size: 17px;
}
.contact-card__value a {
  color: var(--aktion);
  text-underline-offset: 3px;
}
.contact-card__value a:hover { color: var(--aktion-hover); }

/* --- Hero nach Fassung R2 ---
   Porträt in einem hellen Rahmen (Cream 12 %), Bild darin 3:4 mit 12 px
   Radius; Name und Rolle als volldeckende Cream-Karte, die links unten
   über die Bildkante läuft. Textspalte breiter (1,4 zu 0,6), damit das
   Bild die erste Ansicht nicht dominiert. */
.hero__grid { align-items: center; }
.hero__figure {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.hero__frame {
  background: var(--surface-card-on-field);
  padding: 12px;
}
.hero__frame img {
  display: block;
  width: 100%;
  border-radius: 12px;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  object-position: 50% 18%;
}
.hero__caption {
  position: absolute;
  flex-direction: column;
  gap: 2px;
  background: var(--cream);
  border: 0;
  border-top: 0;
  border-radius: 12px;
  padding: 12px 18px;
}
.hero__name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--petrol);
}
.hero__role {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel);
}
.hero__copy .h-display {
  font-size: clamp(34px, 5.2vw, 74px);
  max-width: 18ch;
}
.hero__copy .lede { max-width: 46ch; }
@media (min-width: 901px) {
  .hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr); }
  .hero__figure { display: block; }
}
/* Einspaltig läuft die Bildspalte bis an den Rand — das stammt aus der
   randlosen Fassung. Mit Rahmen muss sie dieselbe Innenkante bekommen wie
   das Kennzahlen-Band darunter, sonst stehen Rahmen und Boxen versetzt. */
@media (max-width: 900px) { .hero__grid { padding-inline: var(--gutter); }
  .hero__figure {
  max-width: 1160px;
  margin-inline: auto;
  width: 100%;
}
}
@media (max-width: 760px) {
  .hero__caption { left: 0;
  bottom: 20px;
} }

/* --- Hero-Raster auf die Container-Geometrie des Bands ---
   Das Raster stammt aus der randlosen Fassung: die Textspalte holte sich
   die Innenkante über ein eigenes Sonderpadding, die Bildspalte lief bis
   an die Viewportkante. Mit Rahmen muss das Raster denselben Container
   haben wie das Kennzahlen-Band, sonst hängt der Rahmen rechts über. */
.hero__grid {
  max-width: calc(1160px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero__copy {
  padding-inline: 0;
  max-width: none;
  margin-inline: 0;
}
@media (min-width: 901px) {
  .hero__copy {
    padding-left: 0;
    padding-right: clamp(28px, 3.5vw, 48px);
    padding-block: clamp(56px, 7vw, 96px);
  }
}
@media (max-width: 900px) {
  .hero__grid { padding-inline: var(--gutter); }
  .hero__copy { padding-block: clamp(48px, 7vw, 72px) clamp(32px, 4vw, 48px); }
  .hero__figure { max-width: none; margin-inline: 0; }
}

/* --- Hero-Raster: gleiche Containerbreite wie das Band, Rahmen auf
   derselben Ober- und Unterkante wie die Textspalte ---
   Das Band ist max-width 1160 mit Gutter-Polsterung, also 1160 minus
   zwei Gutter Inhaltsbreite. Das Raster muss dieselbe Rechnung machen,
   sonst hängt der Rahmen rechts über. Zusätzlich bekommen Text- und
   Bildspalte identische Innenabstände oben und unten, damit der Rahmen
   auf Höhe der Eyebrow beginnt und mit den Schaltflächen endet. */
.hero__grid {
  max-width: 1160px;
  padding-inline: var(--gutter);
  align-items: stretch;
}
@media (min-width: 901px) {
  .hero__copy { padding-block: clamp(56px, 7vw, 96px); }
  .hero__figure {
    padding-block: clamp(56px, 7vw, 96px);
    display: flex; flex-direction: column;
  }
  .hero__frame { flex: 1 1 auto; display: flex; }
  .hero__frame img { aspect-ratio: auto; height: 100%; flex: 1 1 auto; min-height: 0; }
  .hero__caption { bottom: calc(clamp(56px, 7vw, 96px) + 34px); }
}

/* --- Hero nach L1: Bewegung über Proportion und Versatz ---
   Kennzahlen-Boxen ungleich breit, Bild läuft 60 px tiefer als der Text,
   Namensschild weiter über die Bildkante. Keine neuen Formen oder Farben. */
@media (min-width: 901px) {
  /* Gleich breit: die drei Kennzahlen sind gleichrangig. Ungleiche
     Spalten lasen sich wie eine Gewichtung, die es nicht gibt. */
  .hero__band .stat-boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Der Überstand nach unten darf das Kennzahlen-Band nicht berühren:
     40 px Mindestabstand, sonst liest sich der Versatz als Kollision. */
  .hero__figure {
  padding-block: clamp(56px, 7vw, 96px) max(40px, calc(clamp(56px, 7vw, 96px) - 60px));
}
  .hero__caption { bottom: calc(max(40px, clamp(56px, 7vw, 96px) - 60px) + 40px); }
  /* Das Schild ragt nach links aus dem Bild; die Textspalte bekommt den
     Überlapp als zusätzlichen Abstand, damit es die Schaltflächen nicht
     berührt. Der große Versatz erst dort, wo genug Breite dafür ist. */
  .hero__copy { padding-right: calc(clamp(28px, 3.5vw, 48px) + 24px); }
  .hero__caption { left: -12px; }
}
@media (min-width: 1100px) { .hero__caption { left: -28px; }
  .hero__copy { padding-right: calc(clamp(28px, 3.5vw, 48px) + 40px); }
}


/* --- Beschlossen: Tint als vierte Fläche, Radien deutlicher gestaffelt ---
   Cream → Blaugrau → Tint → Petrol gibt dem Abschnittswechsel eine
   lesbare Stufe. Karten 16 px, Tafeln 28 px, Bedienelemente 8 px — alle
   drei als Token in styles.css. Schatten sind entfernt: die Haarlinie
   grenzt genauso ab und die Schattenfreiheit des Systems bleibt. */
.feature-cards__c,
.qa-rows__r,
.list-plain,
.phases,
.bio-card,
.result,
.facts,
.bio-tint,
.divider-top,
.contact-card,
.stat-boxes__b,
.cards .card { border-radius: var(--radius-card); }
.hero__frame { border-radius: var(--radius-panel); }
.hero__frame img,
.hero__caption { border-radius: var(--radius-card); }
.panel-host .wrap,
.panel-light .wrap { border-radius: var(--radius-panel); }
.panel-host .delivery__col { border-radius: var(--radius-card); }
.btn, summary, .menu__panel { border-radius: var(--radius-control); }
/* Auf Tint brauchen weiße Karten keine zusätzliche Kante mehr — der
   Helligkeitssprung grenzt ab. Die Hairline bleibt trotzdem für den
   Fall, dass der Abschnitt später wieder auf Cream steht. */
.section.tone .feature-cards__c { border-color: var(--line-hairline); }

/* =====================================================================
   Umsetzung der offenen Vorschläge
   ===================================================================== */

/* --- Ablauf als waagerechte Zeitachse ---
   Drei Phasen nebeneinander statt untereinander. Die Liste steht in der
   rechten Hälfte eines zweispaltigen Abschnitts — drei Spalten brauchen
   dort mindestens 240 px Textbreite, also rund 1400 px Fenster. Darunter
   bleibt die vertikale Fassung, sonst stehen ein bis zwei Wörter je Zeile. */
@media (min-width: 1400px) {
  .phases--track {
    display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(24px, 3vw, 34px);
}
  .phases--track > li {
  padding: 0;
  display: flex;
  flex-direction: column;
}
  .phases--track .phases__marker { display: none; }
  .phases--track .phases__body { padding: 0; }
  .phases--track .phases__body .eyebrow {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--petrol);
  display: inline-block;
  color: var(--petrol);
}
  .phases--track .phases__body p:last-child {
  margin: 0;
  max-width: 32ch;
}
}

/* Rollenteilung: beide Rollen sind gleichrangig, also gleich breit.
   Die Zuordnung tragen die Eyebrows — „Braucht Präsenz · Konia Advisory“
   und „Braucht keine Präsenz · AmaliTech“ — nicht eine Grafik. */
@media (min-width: 861px) {
  .panel-host .delivery { grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

/* Fakten-Box: als Liste setzen, nicht als Absätze.
   Vorher trugen die drei Einträge Absatzabstand und lasen sich wie drei
   unverbundene Sätze; jetzt Trennlinien und gleiche Polsterung wie die
   Kostenbox daneben, damit beide als dasselbe Element erkennbar sind. */
.facts {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
}
.facts > li {
  margin: 0;
  padding-block: 14px;
  font-size: 17px;
  line-height: 1.5;
}
.facts > li + li { border-top: 1px solid var(--line-hairline); }
.facts > li:first-child { padding-top: 0; }
.facts > li:last-child { padding-bottom: 0; }

/* =====================================================================
   Übrige Seiten auf den Gestaltungsstand v5
   Mandate, Impressum, Datenschutz und Fehlerseite nutzen dasselbe
   Vokabular wie die Startseite: Tint als Abschnittsfläche, weiße Karten
   mit 16 px Radius, Petrol nur noch im Seitenkopf.
   ===================================================================== */

/* Fallbeschreibungen als Karten statt als linienteilte Blöcke */
.case--card {
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-top: 1px solid var(--line-hairline);
  border-radius: var(--radius-card);
  padding: clamp(26px, 3vw, 40px);
}
.case--card + .case--card { margin-top: clamp(14px, 1.8vw, 20px); }
.case--card .case__icon { border-radius: var(--radius-control); }
.case--card .result { margin-top: clamp(20px, 2.4vw, 28px); }

/* Rechtsseiten: Angaben als Karten auf ruhiger Fläche */
.legal__block--card {
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-top: 1px solid var(--line-hairline);
  border-radius: var(--radius-card);
  padding: clamp(22px, 2.6vw, 30px);
}
.legal__h2 {
  margin: clamp(44px, 5vw, 64px) 0 20px;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.3;
  color: var(--text-heading);
  text-wrap: pretty;
}
.legal__h3 {
  margin: clamp(28px, 3vw, 36px) 0 14px;
  font-size: 19px;
  line-height: 1.35;
  color: var(--text-heading);
  text-wrap: pretty;
}
.legal__h2 + .legal__h3 { margin-top: 0; }
.legal__h {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--text-heading);
}
.legal__block > div p { margin: 0; }
.legal__block > div p + p, .legal__block > div ul + p, .legal__block > div p + ul { margin-top: 12px; }
.legal__list { margin: 0; padding-left: 1.2em; }
.legal__note { margin: 0 0 8px; font-size: 16px; line-height: 1.6; color: var(--text-body); }
.legal__stand { margin-top: 32px; font-size: 15px; color: var(--text-body); }
.legal__block--card + .legal__block--card { margin-top: clamp(12px, 1.6vw, 18px); }
.legal .todo {
  border-radius: var(--radius-card);
  border-left-width: 3px;
}
.section.tone .legal .todo { background: var(--surface-card); }

/* Auf der hellen Tafel der Unterseiten gilt dieselbe Logik wie auf der
   Startseite: Blaugrau trägt die Tafel, weiß die Karten darin. */
.panel-light .actions { justify-content: center; }

/* Schaltflächen auf der hellen Tafel: die On-Field-Variante ist für
   Petrol gebaut (Cream auf dunkel) und wäre auf Blaugrau unsichtbar.
   Hier gilt die Systemlogik für hellen Grund. */
.panel-light .btn--on-field {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--cream);
  white-space: nowrap;
}
.panel-light .btn--on-field:hover {
  background: var(--petrol-deep);
  border-color: var(--petrol-deep);
  color: var(--cream);
}
.panel-light .btn--ghost-field {
  border-color: var(--petrol);
  color: var(--petrol);
  white-space: nowrap;
}
.panel-light .btn--ghost-field:hover {
  background: var(--petrol);
  color: var(--cream);
}

/* Innerhalb der Fallkarte trägt die rechte Spalte den Text; die schmalere
   Meta-Spalte bleibt oben stehen, statt die Karte auf ihre halbe Breite
   aufzuspannen und darunter leere Fläche zu lassen. */
.case--card .split { align-items: start; }
@media (min-width: 901px) {
  .case--card .split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .case--card .split__aside { position: sticky; top: clamp(16px, 3vw, 32px); }
}

/* Tabellenkopf der Ausgangslage. Er liegt über den Karten und folgt
   deren Spaltenteilung, damit die Beschriftungen über der richtigen
   Spalte stehen. */
.qa-rows__head {
  display: none;
  margin-top: clamp(32px, 4vw, 44px);
  padding-inline: clamp(24px, 3vw, 40px);
}
.qa-rows__head + .qa-rows { margin-top: 12px; }
.qa-rows__head .eyebrow { margin: 0; }
@media (min-width: 761px) {
  .qa-rows__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(28px, 4vw, 64px);
  }
}

/* Namensschild trägt beide Rollen: „Gründerin & Geschäftsführerin“.
   Die frühere Begrenzung auf 230 px war auf das einzelne Wort
   „GESCHÄFTSFÜHRERIN“ zugeschnitten (in Versalien mit Sperrung rund
   135 px, unteilbar). Die längere Fassung braucht die volle Breite des
   Passepartouts; sie läuft dort einzeilig oder bricht auf zwei Zeilen,
   die durch text-wrap gleichmäßig geteilt werden. */
.hero__caption { max-width: none; }
.hero__caption .hero__role { max-width: none; }

/* Verweis auf die Mandate-Seite am Ende des Angebotskapitels.
   Die Seite stand bisher nur in der Kopfzeile — im Lesefluss war der
   beste Belegteil der Website unsichtbar. */
.teaser-cta {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--line-hairline);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.teaser-cta .eyebrow { margin: 0; }

/* --- Formate ---
   Die buchbare Konkretisierung der drei Handlungsfelder. Steht bewusst im
   selben Block wie Handlungsfeld 3, durch eine Haarlinie abgesetzt, damit die
   Reihenfolge Handlungsfelder → Formate → Mandate erhalten bleibt. */
.formats {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line-hairline);
}
.formats .eyebrow { margin: 0; }
.formats .h-section { margin-top: 10px; }
.formats .lede { margin-top: 0; }
.formats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(20px, 2.6vw, 36px);
  margin-top: clamp(28px, 3.4vw, 44px);
}
.formats__col .eyebrow {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-hairline);
}
.formats__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.formats__list li {
  padding: 12px 0;
  font-size: 17px;
  line-height: 1.4;
  color: var(--text-heading);
  border-bottom: 1px solid var(--line-hairline);
  text-wrap: pretty;
}
.block-label { margin: 0 0 14px; }
* + .block-label { margin-top: 32px; }
.partner {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.partner .eyebrow { margin: 0; }
.partner__logo { display: block; width: auto; height: 18px; }
.formats__note {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-body);
}
.teaser-cta__text {
  margin: 0;
  max-width: 52ch;
}

/* Der Kontaktabschnitt trägt jetzt drei Karten: E-Mail, Telefon,
   Standort. Ungleiche Breiten wie im übrigen Raster — die E-Mail-Adresse
   braucht am meisten Platz. */
@media (min-width: 901px) {
  .panel-light .contact-grid { grid-template-columns: 1.3fr .85fr .85fr; }
}

/* Zwei Wege im Kontaktabschnitt: das Erstgespräch gefüllt, die formlose
   Frage als Umriss — sichtbar zweitrangig, aber vorhanden. Beide führen
   zur vorhandenen Adresse, unterschieden nur über den Betreff. */
.actions--centered {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: clamp(28px, 3.5vw, 40px);
}

/* =====================================================================
   Hero, Fassung C — verdichtet, größeres Bild, eingezogene Ränder
   Übernommen aus entwurf/schritt-5-hero-dicht.html. Nur Maßverhältnisse:
   engere Innenabstände, kein Trennstrich im Hero, Bildspalte von 0,6 auf
   0,75, flachere Kennzahlenboxen, größere Seitenränder.
   ===================================================================== */

.hero__copy .rule { display: none; }
.hero__copy .h-display {
  font-size: clamp(34px, 5.2vw, 74px);
  line-height: 1.02;
  letter-spacing: -.028em;
  max-width: 17ch;
  margin-top: 18px;
}
.hero__copy .lede { margin-top: 20px; max-width: 43ch; }
.hero__copy .actions { margin-top: 26px; }
.hero__frame { padding: 8px; }
.stat-boxes__b { padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px); }
.stat-boxes__fig { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.04; letter-spacing: -.025em; }
.stat-boxes__lab { margin-top: 8px; font-size: 13px; line-height: 1.4; }

@media (min-width: 901px) {
  .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); }
  /* Der Inhalt steht eingezogen statt randvoll — die Fläche ringsum
     trägt die Ruhe, nicht die Abstände im Textblock. */
  .hero__grid, .hero__band { padding-inline: var(--pad-inline); }
  .hero__copy { padding-right: clamp(32px, 4vw, 56px); }
}

/* =====================================================================
   Hero flacher: die Kennzahlen sollen ohne Scrollen sichtbar sein
   Gemessen lag die Unterkante der Kennzahlen bei 688 px — auf einem
   13-Zoll-Laptop (rund 700–750 px sichtbar) also nur angeschnitten.
   Der Hero wird um etwa 120 px flacher: kleinere Innenabstände oben und
   unten und eine Höhenbegrenzung des Bildrahmens.
   ===================================================================== */

@media (min-width: 901px) {
  .hero__copy { padding-block: clamp(36px, 4.5vw, 60px); }
  .hero__figure { padding-block: clamp(36px, 4.5vw, 60px) max(28px, calc(clamp(36px, 4.5vw, 60px) - 40px)); }
  .hero__caption { bottom: calc(max(28px, clamp(36px, 4.5vw, 60px) - 40px) + 32px); }
  /* Das Bild folgt der Texthöhe, aber nicht unbegrenzt — sonst wird der
     Hero wieder so hoch wie zuvor. Da der Textblock oben einen kleinen
     Vorlauf hat (Eyebrow-Zeilenhöhe), sitzt das Bild am unteren Ende der
     Spalte, damit seine Oberkante nicht über der Eyebrow steht. */
  .hero__figure { justify-content: flex-end; }
  .hero__frame { max-height: 400px; flex: 0 1 auto; }
  .hero__band { padding-bottom: clamp(36px, 4.5vw, 56px); }
  .hero__band .partner { margin-top: clamp(24px, 3vw, 32px); }
}

/* =====================================================================
   Hero entlastet (Schritt 6)
   Die Kennzahlen stehen als flache Reihe statt als drei Karten — sie
   stützen die Aussage, brauchen aber nicht die Bauform der Inhaltskarten
   weiter unten. Die Partnerzeile ist in den Lieferabschnitt gewandert,
   wo AmaliTech erklärt wird; im Hero musste sie sich selbst erklären.
   ===================================================================== */

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  border-top: 1px solid var(--line-on-field);
  padding-top: clamp(18px, 2.2vw, 26px);
}
.stat-row__fig {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.04; letter-spacing: -.025em;
  color: var(--text-heading-on-field); margin: 0;
}
.stat-row__lab {
  margin: 8px 0 0;
  font-family: var(--font-sans); font-size: 13px; line-height: 1.4;
  color: var(--text-body-on-field);
}
@media (max-width: 760px) { .stat-row { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* Partnerzeile im Lieferabschnitt: eine Angabe, keine Aussage — deshalb
   linksbündig und in kleinerer Größe unter dem Einleitungssatz. */
.partner--hier {
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--line-hairline);
  text-align: left;
}
.partner--hier .eyebrow { color: var(--petrol); margin: 0; }
.partner--hier p:last-child { margin: 10px 0 0; font-size: 16px; color: var(--text-body); max-width: 68ch; }

/* =====================================================================
   Typografischer Feinschliff
   ===================================================================== */

/* 1 · Constantia setzt Zahlen als Mediävalziffern — sie haben Ober- und
   Unterlängen wie Kleinbuchstaben, weshalb „80+“ wie „8o+“ aussieht und
   die 6 in „>16“ nach unten hängt. Bei Kennzahlen, die als Beleg wirken
   sollen, ist das ein Fehler. Versalziffern auf gemeinsamer Linie: */
.stat-row__fig,
.col__figure,
.case__figure,
.field-num,
.rail__num,
.figure-line__num,
.bento__title { font-variant-numeric: lining-nums tabular-nums; }

/* 2 · Optischer Randausgleich: die runde Kontur des „B“ lässt die
   Schlagzeile bei 74 px hinter der Textkante zurückstehen. */
.hero__copy .h-display { margin-left: -.015em; }

/* 3 · Eyebrow-Sperrung von 0,09 auf 0,12 em — bei Versalien in 11 px
   trennt mehr Raum die Buchstaben besser. */
.eyebrow { letter-spacing: .12em; }

/* 4 · Einleitung etwas fester: beide Schriften haben eine große x-Höhe,
   1,45 wirkt gesetzter als 1,5, ohne enger zu werden. */
.lede { line-height: 1.45; }

/* Gesteuerte Zeilenumbrüche der Schlagzeile: jede Zeile eine Sinneinheit
   („Beratung vor Ort,“ / „Umsetzung mit“ / „globalen IT-Teams“). Der
   automatische Umbruch trennte „vor Ort“ — genau die Einheit, die den
   Unterschied des Angebots trägt. Auf schmalen Bildschirmen werden die
   festen Umbrüche aufgehoben, sonst läuft der Satz über. */
.hero__copy .h-display { max-width: none; }
@media (max-width: 900px) {
  .hero__copy .h-display br { display: none; }
  .hero__copy .h-display { max-width: 18ch; }
}

/* =====================================================================
   Flächenregel: drei Flächen, keine Ausnahme
   Petrol trägt den Hero, Blaugrau die abgesetzten Abschnitte und die
   eingefassten Tafeln, Cream den Inhalt. Tint als vierte Stufe ist
   zurückgenommen: es stand direkt neben Blaugrau und unterschied sich
   davon zu wenig — das las sich als Unentschlossenheit, nicht als
   Rhythmus. Tint bleibt Linienfarbe (--line-hairline).
   ===================================================================== */

.section.tone { background: var(--surface-muted); }

/* „Für wen wir arbeiten“ steht auf Cream: es folgt direkt auf die
   Ausgangslage in Blaugrau, und zwei gleiche Flächen hintereinander
   heben die Abschnittsgrenze auf. Absetzung trägt Blaugrau nur dann,
   wenn Cream daneben steht. Die Karten des Abschnitts brauchen auf Cream
   ihre Haarlinie, um als Flächen erkennbar zu bleiben. */
#fuer-wen .feature-cards__c { border-color: var(--line-hairline); }

/* =====================================================================
   Mandate-Seite: Übersicht vor den Fällen, aufgeräumte Fallkarte
   Übernommen aus entwurf/mandate-nachher.html.
   ===================================================================== */

/* --- A · Übersicht ---
   Drei Zeilen, jede ein Sprung in den ausführlichen Fall. Die Spalten
   liegen fest, damit die Fälle spaltenweise vergleichbar sind — das ist
   der Zweck der Übersicht und der Grund, weshalb hier ein Raster und
   keine Karten stehen. */
.case-index { margin-bottom: clamp(48px, 6vw, 80px); }
.case-index__h {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--text-heading);
  margin-top: 14px;
}
.case-index__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-hairline); }
.case-index__row { border-bottom: 1px solid var(--line-hairline); }
.case-index__link {
  display: grid;
  grid-template-columns: 44px minmax(160px, 1fr) minmax(0, 2fr) minmax(140px, .8fr);
  gap: clamp(16px, 2vw, 32px);
  align-items: start;
  padding: clamp(20px, 2.4vw, 28px) 4px;
  text-decoration: none;
  color: inherit;
  transition: background-color 140ms ease;
}
.case-index__link:hover,
.case-index__link:focus-visible { background: var(--surface-muted); }
.case-index__num {
  font-family: var(--font-display);
  font-size: 20px;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text-label);
}
.case-index__who {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.25;
  color: var(--text-heading);
}
.case-index__role {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-label);
}
.case-index__sit { font-size: 15px; line-height: 1.5; color: var(--text-body); }
.case-index__res { display: block; text-align: right; }
.case-index__fig {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text-heading);
}
.case-index__unit {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-label);
}

/* Schmal: das Raster wird zur Liste, das Ergebnis rückt nach links —
   eine vierspaltige Tabelle ist auf dem Telefon nicht lesbar. */
@media (max-width: 860px) {
  .case-index__link { grid-template-columns: 34px minmax(0, 1fr); row-gap: 12px; }
  .case-index__sit,
  .case-index__res { grid-column: 2; }
  .case-index__res { text-align: left; }
}

/* --- C · Fallkarte aufgeräumt ---
   Die Überschrift führt, das Piktogramm steht daneben statt darüber.
   So beginnt jeder Fall mit seiner Aussage, nicht mit einem Symbol. */
.case__head { display: flex; gap: 16px; align-items: flex-start; }
.case__icon--inline { flex: 0 0 auto; margin-top: 2px; }
.case__head .case__title { margin-top: 6px; }

/* Der Delivery-Partner steht in der AmaliTech-Spalte statt über beiden:
   die Zertifizierungen beschreiben den Partner, der die Offshore-Arbeit
   leistet, nicht die Rollenteilung als Ganzes. Als Fuß der Spalte, durch
   eine Haarlinie abgesetzt. */
.partner--incol {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line-on-field);
}
.partner--incol p:last-child { font-size: 14px; line-height: 1.5; }

/* =====================================================================
   Wortzeichen: die gelieferte Logodatei statt der typografischen
   Nachbildung. Die Datei bringt ihren eigenen Petrol-Grund und die
   beiden Haarlinien mit — sie steht deshalb als eigene Fläche in der
   Kopfzeile und braucht weder Rahmen noch Innenabstand von uns.
   Das Zeichen ist gestapelt (Verhältnis 1,6:1), nicht liegend; die
   Kopfzeile bekommt dadurch etwas mehr Höhe als mit zwei Textzeilen.
   ===================================================================== */
/* Freigestellte Fassung: der Petrol-Grund der Datei ist entfernt und die
   Zeichnung in Petrol auf Cream gerechnet — die Tonstaffelung des
   Entwurfs (KONIA kräftig, ADVISORY gedämpft, Haarlinien fein) ist aus
   der Datei übernommen. Ohne Grund zählt kein Rand mit, das Zeichen wird
   bei gleicher Kopfzeilenhöhe größer und „ADVISORY“ bleibt lesbar.
   Auf Petrol-Flächen (Fußzeile, Vorlagen) gilt weiterhin die
   Originaldatei logo-konia-advisory.png. */
.wordmark { border-block: 0; padding: 0; display: block; }

/* =====================================================================
   Hero: Foto und Namensschild
   Zwei Korrekturen am Bildblock. Die Rundungen waren mit 28 px Rahmen
   und 16 px Bild die weichsten Formen der Seite — deutlich weicher als
   Karten und Knöpfe und damit eine eigene Formensprache. Sie rücken auf
   die Staffelung der Seite zurück. Und das Schild lag über dem Bild und
   schnitt den Arm an; es sitzt jetzt darunter, als Fuß des Rahmens.
   ===================================================================== */

.hero__frame { border-radius: var(--radius-card); }
.hero__frame img { border-radius: var(--radius-control); }

/* Das Schild liegt wieder im Bild — als Band über die volle Breite am
   unteren Rand, nicht als Plakette mitten über der Person. So schneidet
   es nichts an und kostet keine Bauhöhe: unter dem Bild gesetzt hatte es
   den Hero um rund 60 px verlängert und die Kennzahlen aus der ersten
   Ansicht geschoben. */
/* Der Rahmen wird Bezugspunkt — sonst richtet sich das Band an der
   Bildspalte aus und ragt unter den Rahmen hinaus. Der Grund ist der
   volle Cream-Ton, nicht der halbtransparente Kartenton auf Petrol:
   darauf trägt der Text nicht genug Kontrast. */
.hero__frame { position: relative; }
.hero__caption {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  background: var(--cream);
  max-width: none;
  border-radius: 0 0 var(--radius-control) var(--radius-control);
  padding: 12px 16px;
  border-top: 0;
  margin-top: 0;
}
.hero__caption .hero__name { color: var(--text-heading); }

/* Die Textspalte braucht den Zusatzabstand nicht mehr, den die
   überstehende Plakette verlangte. */
@media (min-width: 901px) { .hero__copy { padding-right: clamp(32px, 4vw, 56px); } }
@media (min-width: 1100px) { .hero__copy { padding-right: clamp(32px, 4vw, 56px); } }

/* =====================================================================
   Kopfzeile: Gewichte ausgeglichen
   Zuvor stand ein kleines Logo links, das Menü rechts, dazwischen eine
   große Leerstelle. Jetzt führt das Logo größer, das Menü rückt daran
   heran und endet am rechten Rand — eine Gruppe statt zweier Inseln.
   ===================================================================== */
@media (min-width: 1101px) {
  .site-header__inner { gap: clamp(32px, 5vw, 72px); }
  .nav { margin-left: 0; margin-right: auto; }
}

/* Das Bild bekommt eine Obergrenze, damit Kennzahlenband und Schild in
   der ersten Ansicht bleiben. Ohne sie folgt das Bild der Texthöhe und
   schiebt das Band unter die Bildschirmkante. */
@media (min-width: 901px) { .hero__frame { max-height: 360px; } }
.wordmark__img { display: block; height: 66px; width: auto; }
@media (max-width: 640px) { .wordmark__img { height: 54px; } }

/* =====================================================================
   Namensschild: in das Passepartout statt über das Bild
   Als Band am unteren Bildrand deckte es die Person an der Hüfte ab und
   las sich wie ein aufgeklebtes Schild. Der Rahmen ist aber ohnehin ein
   Cream-Passepartout — die Beschriftung steht jetzt darin, unter dem
   Bild, wie die Tafel unter einem gerahmten Bild. Das Foto bleibt
   unangetastet; die Höhe holt sich der Rahmen über ein etwas
   niedrigeres Bild zurück, damit das Kennzahlenband in der ersten
   Ansicht bleibt.
   ===================================================================== */
.hero__frame { padding: 8px 8px 0; max-height: none; }
.hero__caption {
  position: static;
  left: auto; right: auto; bottom: auto;
  background: none;
  border-radius: 0;
  padding: 13px 6px 11px;
}
@media (min-width: 901px) {
  .hero__frame img { max-height: 330px; }
}

/* Die Beschriftung sitzt jetzt im Rahmen (Markup geändert): Bild oben,
   Tafel darunter, beide vom Cream-Passepartout eingefasst. */
.hero__frame { padding: 8px; }
.hero__caption { padding: 12px 6px 2px; }
.hero__caption .hero__name { color: var(--petrol); }

/* Der Rahmen ist eine Flex-Spalte: Bild oben, Tafel darunter. Ohne die
   Richtung stellte er beide nebeneinander, weil er weiter oben auf
   display:flex gesetzt wird, um der Texthöhe zu folgen. */
.hero__frame { display: flex; flex-direction: column; }
.hero__frame img { flex: 0 1 auto; }

/* Das Passepartout braucht einen deckenden Grund: der halbtransparente
   Kartenton auf Petrol lässt die Tafel dunkel durchscheinen, und Name
   und Rolle fallen darauf unter 3:1. */
.hero__frame { background: var(--cream); }
.hero__caption .hero__role { color: var(--aktion); }

/* =====================================================================
   Kopfzeile: Kanten und Ausrichtung
   Drei Korrekturen, alle am selben Ursprung. Die Kopfzeile trug einen
   äußeren Seitenabstand über der Innenbahn — zusammen mit deren eigenem
   Abstand stand das Logo 28 px weiter innen als die Schlagzeile
   darunter. Beide Bahnen sind gleich breit (1160 px), also genügt ein
   Abstand. Dazu lag eine senkrechte Haarlinie links an der Innenbahn,
   die als Strich im Nichts las. Und das Menü steht wieder rechts: mit
   dem Wegfall des Knopfes gibt es nur noch zwei Gruppen, und die
   gehören an die Ränder.
   ===================================================================== */
.site-header { padding-inline: 0; }
.site-header__inner { border-left: 0; }
@media (min-width: 1101px) {
  .nav { margin-left: auto; margin-right: 0; }
}

/* Die Tafel im Passepartout bekommt allseitig vergleichbare Luft —
   zuvor saß sie 2 px über der Unterkante. */
.hero__caption { padding: 14px 10px 10px; }

/* =====================================================================
   Kompakter Seitenkopf der Unterseiten
   Der Kopf der Mandate-Seite füllte einen ganzen Bildschirm, bevor die
   Übersicht begann. Titel und Einleitung bleiben, die Höhe halbiert sich:
   kleinere Abschnittspolsterung, kleinerer Titel, keine Zierlinie, und
   der folgende Abschnitt setzt oben enger an.
   ===================================================================== */
.page-head .wrap { padding-block: clamp(32px, 3.5vw, 52px) clamp(28px, 3vw, 40px); }
.page-head .h-section {
  font-size: clamp(28px, 3.6vw, 40px);
  max-width: 26ch;
  margin-top: 14px;
}
.page-head .lede { font-size: clamp(17px, 1.5vw, 19px); margin-top: 14px; }
.page-head + .section .wrap { padding-top: clamp(36px, 4vw, 56px); }

/* Auf den Rechtsseiten ist der Kopf Teil eines langen Textblocks: Titel
   und oberer Abstand folgen der kompakten Regel, unten bleibt der volle
   Abschnittsabstand, damit der Text nicht an die Fußzeile stößt. */
.page-head .wrap.legal { padding-bottom: var(--pad-section); }

/* Bezugsgröße unter einer Ergebniszahl (Folie 11 der Unterlage).
   Steht zwischen Einheit und Erläuterung: etwas fester als die Notiz,
   damit die Zahl nicht ohne ihren Vergleichsmaßstab gelesen wird. */
.case__ref {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-body);
  font-variant-numeric: lining-nums tabular-nums;
}


/* =====================================================================
   Dritte Spalte der Leitfragen-Tabelle: das zugeordnete Handlungsfeld
   (Folie 3 der Unterlage). Auf der Folie eine reine Beschriftung, hier
   ein Sprung in den passenden Abschnitt — die Zuordnung wird damit
   benutzbar. Die Spalte ist schmaler als die beiden anderen, weil sie
   nur drei feste Begriffe trägt. Unter 761 px stapelt die Zeile; dort
   steht das Handlungsfeld als letzte Angabe unter dem Muster.
   ===================================================================== */
.qa-rows__f {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.45;
}
.qa-rows__f a {
  color: var(--text-heading);
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 4px;
}
.qa-rows__f a:hover { text-decoration-color: currentColor; }
@media (max-width: 760px) {
  .qa-rows__f {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line-hairline);
  }
}
@media (min-width: 761px) {
  .qa-rows__r,
  .qa-rows__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .52fr);
    gap: clamp(20px, 2.6vw, 40px);
  }
}

/* =====================================================================
   Kennungen direkt auf der Blaugrau-Fläche
   Dieselbe Rechnung wie bei den beiden Blaugrau-Tafeln (.panel-host,
   .panel-light): Steel erreicht auf Blaugrau nur 4,49:1 und verfehlt AA
   für 11-px-Versalien um ein Hundertstel. Auf dieser Fläche deshalb
   Petrol — 10,14:1. Kennungen in den weißen Karten darin bleiben Steel
   (5,16:1); der Farbunterschied zwischen Fläche und Karte trägt dort
   Struktur.
   ===================================================================== */
.section.muted > .wrap > .eyebrow,
.section.muted .qa-rows__head .eyebrow { color: var(--petrol); }

/* =====================================================================
   Versalziffern auf allen Ziffernflächen
   Georgia setzt von Haus aus Mediävalziffern — Zahlen mit Ober- und
   Unterlängen, die wie Kleinbuchstaben durch die Zeile laufen. Für
   Kennzahlen ist das ein Verlust an Plakativität. Vier Selektoren
   erzwangen Versalziffern schon vorher (.rail__num, .case-index__num,
   .case-index__fig, .case__ref); hier kommen die großen Zahlen dazu,
   die es noch nicht taten.
   ===================================================================== */
.stat-row__fig,
.case__figure,
.field-num { font-variant-numeric: lining-nums tabular-nums; }

/* =====================================================================
   Handlungsaufforderung in der Kopfzeile
   Bisher war „Erstgespräch vereinbaren“ nur im Hero und im
   Kontaktabschnitt erreichbar — wer mitten auf der Seite stand, musste
   erst scrollen. In der klebenden Kopfzeile ist sie auf jeder Seite und
   in jeder Scrollposition da.

   Der Haltepunkt für Leiste und Menü ist dafür von 900 auf 1100 px
   gewandert: fünf Navigationspunkte, Logo und Schaltfläche brauchen bei
   901 px zusammen rund 847 px und hätten nur 829 px. Statt die Leiste
   zu kürzen — was Leiste und Menü unterschiedlich gemacht hätte —
   zeigen wir sie erst, wo sie passt. Zwischen 900 und 1100 px greift das
   Menü, das ohnehin alle fünf Punkte trägt.

   Unter 561 px entfällt die Schaltfläche in der Leiste: dort stehen
   Logo, Schaltfläche und Menüknopf zusammen über der verfügbaren
   Breite. Im Menü steht sie weiterhin.
   ===================================================================== */
.site-header .btn--header {
  display: none;
  flex: none;
  white-space: nowrap;
}
@media (min-width: 561px) {
  .site-header .btn--header { display: inline-flex; }
}
@media (max-width: 1100px) {
  .site-header .btn--header { margin-left: auto; }
}

/* Menüeinträge mit Unterzeile: der Eintrag nennt das Ziel, die Zeile
   darunter sagt, was dort steht. Im Menü ist dafür Platz, in der
   Kopfzeilen-Leiste nicht — dort bleiben die Punkte einzeilig. Die
   Mindesthöhe von 56 px bleibt; durch die zweite Zeile werden die
   Tippziele größer, nicht kleiner. */
.menu__link {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding-block: 12px;
}
.menu__label { font-size: 19px; line-height: 1.25; }
.menu__sub {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-body);
}

/* Nachtrag zur Radius-Staffelung: acht Stellen trugen 10 px — ein Wert,
   den das System nicht kennt (8 Bedienung / 16 Karte / 28 Tafel). Alle
   acht sind Karten und Kästen, also --radius-card. Sichtbare Folge: die
   Ecken werden etwas runder. */

/* =====================================================================
   Sprachumschalter
   Zeigt nur die Gegensprache: auf den deutschen Seiten „EN“, auf den
   englischen „DE“. Ein Element, kein Zustand, der in zehn Dateien
   gepflegt werden müsste. Das aria-label nennt das Ziel, damit
   Screenreader nicht zwei Buchstaben vorlesen.

   Unter 1101 px trägt der Umschalter den automatischen Abstand, weil
   die Navigationsleiste dort ausgeblendet ist und sonst nichts die
   rechte Gruppe nach außen schiebt.
   ===================================================================== */
.site-lang {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  flex: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--text-body);
  text-decoration: none;
}
.site-lang:hover { color: var(--petrol); }
@media (max-width: 1100px) {
  .site-lang { margin-left: auto; }
  .site-header .btn--header { margin-left: 0; }
}

/* Zweizeilige Rolle im Namensschild gleichmäßig teilen, statt ein Wort
   allein in die zweite Zeile zu schieben. */
.hero__caption .hero__role { text-wrap: balance; }

/* Small labels need stronger contrast on pale-blue panels. */
.divider-top .eyebrow,
.bio-tint .eyebrow { color: var(--petrol); }
.case__role .eyebrow { color: var(--text-body-on-field); }