/* ==========================================================================
   Mori & Partner AG — Onepager
   Design:  Variante I "Vermassung"  (design_handoff_moripartner_website)
   Content: MoriPartner_Claude_Website_Transfer_2026-08-24
   Tokens taken from the handoff README; those values are authoritative.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  --accent:        #DA291C;
  --line:          #111110;
  --line-soft:     #D8D7D0;
  --gridline:      rgba(17, 17, 16, 0.045);

  --page:          #FBFBF9;
  --block:         #FFFFFF;

  --body:          #4A4A46;
  --muted:         #5A5A56;
  --label:         #6B6B67;
  --faint:         #8A8A85;
  --faintest:      #B9B8B0;

  --input-border:  #C9C9C4;
  --input-bg:      #FCFCF9;
  --row-hover:     #FCFCF9;

  --ok-bg:         #F0F7F0;
  --ok-border:     #B7D6B7;
  --ok-text:       #2A5A2A;

  --warn-bg:       #FDF6E9;
  --warn-border:   #E3CE9B;
  --warn-text:     #6B5417;

  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw:        1400px;
  --headw:       1320px;
  --margin-left: 110px;   /* drawing margin holding the axis markers */
  --rule-x:      62px;    /* x-position of the continuous margin rule */
}

/* ----------------------------------------------------------- 2. Page shell */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--line);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: #fff; }

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

input, select, textarea, button { font-family: inherit; }

a { color: inherit; }

/* Visible focus on every interactive element (master prompt section 26). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--line);
  color: #fff;
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
}
.skip-link:focus { left: 0; }

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

/* ---------------------------------------------------------- 3. Plan sheets */
.sheet {
  position: relative;
  max-width: var(--maxw);
  margin: 56px auto 64px;
  padding: 0 32px 0 var(--margin-left);
  display: flex;
  flex-direction: column;
  /* 28px, not 32: each sheet adds 2px of border top and bottom, so 28 + 4
     makes the distance between two padding boxes exactly one grid unit and
     every sheet grid stays in phase down the whole page. */
  gap: 28px;
}

/* The continuous margin rule the axis markers sit on. */
.margin-rule {
  position: absolute;
  left: var(--rule-x);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-soft);
  pointer-events: none;
}

.block {
  position: relative;
  border: 2px solid var(--line);
  background: var(--block);
  background-image:
    linear-gradient(var(--gridline) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
  background-size: 32px 32px;
  scroll-margin-top: 96px;
}

/* Axis marker — A B C ... in the drawing margin, one per sheet as the design
   specifies. Also a link to its own block, so clicking one squares that block up
   under the sticky header. Forward navigation is the .next-axis control below. */
.axis {
  position: absolute;
  left: -66px;
  top: 28px;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--page);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}
.axis--accent { border-color: var(--accent); color: var(--accent); }

.axis:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.1);
}
.axis:hover::after { background: var(--accent); }

.axis::after {
  content: "";
  position: absolute;
  left: 38px;
  top: 18px;
  width: 28px;
  height: 1px;
  background: var(--line-soft);
}

/* Next-section navigator: the same circled letter, but showing where you are
   GOING. Fixed in the drawing margin, its letter updates as you scroll. */
.next-axis {
  position: fixed;
  /* Fallback: 110px sheet padding − 66px marker offset + centring. script.js
     measures a real marker and overrides this so the circle sits exactly on the
     same axis line as A–H, including when the sheet is centred on wide screens. */
  left: 45px;
  bottom: 56px;
  z-index: 90;
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--line);
  /* Held back so it reads as a quiet helper rather than a second set of axis
     markers competing with the real A–H. Comes fully forward on hover/focus. */
  opacity: 0.45;
  transition: opacity 0.2s;
}
.next-axis:hover,
.next-axis:focus-visible { opacity: 1; }
.next-axis-letter {
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--page);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}
.next-axis svg {
  width: 10px;
  height: 18px;
  overflow: visible;
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.next-axis line { stroke: var(--line-soft); stroke-width: 1; }
.next-axis polygon { fill: var(--line-soft); }

.next-axis:hover .next-axis-letter {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.1);
}
.next-axis:hover line { stroke: var(--accent); }
.next-axis:hover polygon { fill: var(--accent); }
.next-axis:hover svg { transform: translateY(3px); }

/* On the last block it points back to the top. */
.next-axis.is-up svg { transform: rotate(180deg); order: -1; }
.next-axis.is-up:hover svg { transform: rotate(180deg) translateY(3px); }

/* Block header row: number / name / meta */
.block-head {
  display: grid;
  grid-template-columns: 96px 1fr auto;   /* 3 grid units */
  align-items: center;
  height: 32px;                          /* exactly one grid unit, border included */
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.block-head > * { padding: 0 32px; line-height: 30px; }
.block-num  { color: var(--accent); border-right: 1px solid var(--line-soft); }
.block-name { border-right: 1px solid var(--line-soft); }
.block-meta { color: var(--faintest); }
.block-meta--accent { color: var(--accent); }

/* Header row variant used by the hero (flex, no number column). */
.block-head--flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.block-head--flex > * {
  padding: 0 32px;
  line-height: 30px;
  border: 0;
  /* The row is a fixed 32px tall; wrapping would spill onto the H1. */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Below this the two mono labels cannot sit side by side; the datum
   annotation is the decorative one, so it goes first. */
@media (max-width: 900px) {
  .block-head--flex .block-meta--accent { display: none; }
}

.block-title { padding: 32px 32px 32px; }
.block-title h2 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -1px;
  /* Line box locked to the 32px grid step: with 32px padding top and bottom,
     a 1-, 2- or 3-line heading always totals a whole number of grid units, so
     whatever follows the title still starts on a line. */
  line-height: 32px;
  max-width: 30ch;
  text-wrap: pretty;
}
.block-title .lede {
  margin: 32px 0 0;
  font-size: 16.5px;
  line-height: 32px;   /* grid step, so a title with a lede still snaps */
  color: var(--body);
  max-width: 68ch;
  text-wrap: pretty;
}

/* Footnote strip at the bottom of a block. */
.block-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line-soft);
  padding: 11px 32px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--label);
}
.block-foot .btn {
  padding: 11px 20px;
  font-size: 12.5px;
  letter-spacing: 0.5px;
}

/* ---------------------------------------------------------- 4. Site header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--line);
}

.site-header .inner {
  max-width: var(--headw);
  margin: 0 auto;
  padding: 0 32px;
}

/* The nav is itself a Plankopf. */
.plankopf-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
}
.plankopf-nav > * + * { border-left: 1px solid var(--line-soft); }

.pk-cell { display: flex; flex-direction: column; justify-content: center; }
.pk-caption {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 1px;
  color: var(--faint);
  text-transform: uppercase;
}

.pk-firma { padding: 10px 24px 12px 20px; gap: 6px; }
/* Handoff specced 24px; raised for presence in the header. */
.pk-firma img { height: 34px; width: auto; }

.pk-inhalt { padding: 10px 24px 12px; gap: 8px; }
.nav-list {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  min-height: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--line);
  transition: color 0.15s;
}
.nav-list a:hover,
.nav-list a[aria-current="true"] { color: var(--accent); }

/* Mobile menu toggle — a mono label, not a hamburger. The Plankopf cell it sits
   beside is already captioned "Inhalt", and the +/− is the same affordance the
   FAQ accordions use, so it reads as part of the drawing language. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--line);
}
.nav-toggle-sign {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1;
  color: var(--accent);
  transition: border-color 0.15s;
}
.nav-toggle-sign::before { content: "+"; }
.nav-toggle[aria-expanded="true"] .nav-toggle-sign::before { content: "\2212"; }
.nav-toggle[aria-expanded="true"] .nav-toggle-sign { border-color: var(--accent); }

/* Sticky CTA at the bottom edge on phones, per the content map. */
.mobile-cta { display: none; }

.pk-cta {
  display: grid;
  place-items: center;
  padding: 0 22px;
  background: var(--accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  transition: filter 0.15s;
}
.pk-cta:hover { filter: brightness(0.88); }

/* ------------------------------------------------------------------ 5. Hero */
.hero-body { padding: 32px; }

.hero h1 {
  margin: 0;
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1.06;
  max-width: 980px;
}

.hero-lead {
  margin: 20px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--body);
  max-width: 700px;
  text-wrap: pretty;
}

.hero-claim {
  margin: 18px 0 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  max-width: 700px;
}

.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.btn {
  display: inline-block;
  padding: 15px 28px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.15s, border-color 0.15s;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { filter: brightness(0.88); }
.btn--secondary {
  background: #fff;
  color: var(--line);
  border-color: var(--faintest);
}
.btn--secondary:hover { border-color: var(--line); }

/* Dimension chain — ticks with measurements sitting through the line. */
.dimchain {
  position: relative;
  /* Full-bleed like the disciplines strip below, so every tick lands exactly
     on the cell boundary it measures (the fractions already match). */
  margin: 32px 0 0;
  height: 30px;
}
.dimchain::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 15px;
  height: 1px;
  background: var(--line);
}
.dimchain .tick {
  position: absolute;
  top: 8px;
  width: 1px;
  height: 15px;
  background: var(--line);
}
.dimchain .dim {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  background: var(--block);
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--label);
  line-height: 15px;
}

/* Discipline strip — deliberately unequal spans, read as measured widths. */
.disciplines {
  display: grid;
  grid-template-columns: 15fr 12fr 11fr 24fr 20fr 18fr;
  border-top: 1px solid var(--line);
  margin-top: 6px;
}
.disciplines span {
  padding: 14px 14px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-right: 1px solid var(--line-soft);
}
.disciplines span:last-child { border-right: 0; }

/* Trust strip. */
.trust {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  border-top: 1px solid var(--line-soft);
}
.trust span {
  padding: 13px 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--label);
  border-right: 1px solid var(--line-soft);
}
.trust span:last-child { border-right: 0; }

/* ------------------------------------------------------ 6. Two-column split */
.split {
  display: grid;
  /* 576px = 18 units; with 32px padding the divider falls on a line at 608px. */
  grid-template-columns: 576px 1fr;
}
.split > * { padding: 32px; }
.split > * + * { border-left: 1px solid var(--line-soft); }

.detail-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--label);
  margin: 0 0 18px;
}

.split p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  text-wrap: pretty;
}
.split p:last-child { margin-bottom: 0; }

/* Height-datum list (+0.00 / +3.20 / +6.40) — the three situations. */
.koten { list-style: none; margin: 0; padding: 0; }
.koten li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.koten li:first-child { border-top: 0; padding-top: 0; }
.kote {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--accent);
  padding-top: 2px;
}
.koten h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.koten p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

.audience-line {
  border-top: 1px solid var(--line-soft);
  padding: 18px 32px;
  font-size: 16px;
  color: var(--body);
}

/* --------------------------------------------------------- 7. Spec tables */
.spec-row {
  display: grid;
  grid-template-columns: 110px 320px 1fr;
  border-top: 1px solid var(--line-soft);
  transition: background 0.15s;
}
.spec-row:hover { background: rgba(17, 17, 16, 0.022); }

.spec-head {
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--label);
}
.spec-head:hover { background: transparent; }
.spec-head > * { padding: 12px 32px; }
.spec-head > *:nth-child(2) { padding-left: 24px; }

.spec-pos {
  padding: 14px 32px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--accent);
}
.spec-name {
  padding: 14px 24px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.spec-desc {
  padding: 14px 32px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

/* Leistungen tiles. Six short entries in a full-width spec table left a one-line
   description in an 800px column and stacked six near-empty rows. The handoff's
   short variant specifies tiles for exactly this case. */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.tile {
  padding: 16px 32px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.15s;
}
.tile:hover { background: rgba(17, 17, 16, 0.022); }
.tile:nth-child(3n) { border-right: 0; }
.tile:nth-child(n + 4) { border-bottom: 0; }

.tile-num {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 10px;
}
.tile-name {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.tile-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

/* ----------------------------------------------- 8. Arbeitsbeispiele block */
.tabs {
  display: flex;
  flex-wrap: wrap;
  padding: 0 32px;
  margin-bottom: 24px;
}
.tab {
  padding: 12px 22px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--input-bg);
  color: #3A3A37;
  border: 1px solid var(--input-border);
  margin-right: -1px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tab:hover { background: #fff; }
.tab[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  position: relative;
  z-index: 1;
}

.tabpanel { padding: 0 32px 32px; }
.tabpanel[hidden] { display: none; }

.plan-grid { display: grid; gap: 20px; }
.plan-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

/* A plan window: bordered frame with its own corner annotation. */
.plan {
  position: relative;
  border: 1px solid var(--line);
  /* Deliberately no own grid: a nested 16px grid restarted at an arbitrary
     offset and never lined up with the sheet 32px grid behind it. */
  background: transparent;
  display: grid;
  place-items: center;
  padding: 24px;
  cursor: zoom-in;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: center;
  transition: border-color 0.15s;
}
.plan:hover { border-color: var(--accent); background: rgba(17, 17, 16, 0.022); }
.plan--overview { aspect-ratio: 21 / 8; }
.plan--detail   { aspect-ratio: 16 / 10; }

.plan img { width: 100%; height: 100%; object-fit: contain; }

.plan-ph {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.9;
}
.plan-ph strong { display: block; color: var(--accent); font-weight: 400; }

.plan-corner {
  position: absolute;
  top: 0; left: 0;
  padding: 6px 10px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--faint);
  background: var(--block);
}

.plan-caption {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--label);
  line-height: 1.7;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(251, 251, 249, 0.97);
  display: grid;
  place-items: center;
  padding: 40px;
}
.lightbox[hidden] { display: none; }
.lightbox-frame {
  position: relative;
  border: 2px solid var(--line);
  background: var(--block);
  background-image:
    linear-gradient(var(--gridline) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
  background-size: 24px 24px;
  max-width: min(1100px, 90vw);
  max-height: 85vh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 56px 32px;
  overflow: auto;
}
.lightbox-close {
  position: absolute;
  top: 0; right: 0;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: var(--line);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1;
}
.lightbox-close:hover { background: var(--accent); }
.lightbox-cap {
  position: absolute;
  bottom: 0; left: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--label);
  background: var(--block);
}

/* ------------------------------------------------- 9. Micro-process chain */
.microprocess {
  border-top: 1px solid var(--line-soft);
  padding: 20px 32px 32px;
}
.mp-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--label);
  margin: 0 0 22px;
}
.mp-chain {
  display: grid;
  grid-template-columns: 18fr 25fr 14fr 21fr 22fr;
  border-top: 1px solid var(--line);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: mp;
}
.mp-chain li {
  position: relative;
  padding: 20px 16px 0;
  border-right: 1px solid var(--line-soft);
  font-size: 14px;
  line-height: 1.5;
  color: var(--body);
}
.mp-chain li:last-child { border-right: 0; }
.mp-chain li::before {
  counter-increment: mp;
  content: counter(mp, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 16px;
  padding-right: 8px;
  background: var(--block);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--accent);
  transform: translateY(-50%);
}

/* --------------------------------------------------------- 10. Role panel */
.roles { border-top: 1px solid var(--line-soft); }
.roles-title { padding: 32px 32px 0; }
.roles-title h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 28px;
}
.roles-grid > * { padding: 0 32px 32px; }
.roles-grid > * + * { border-left: 1px solid var(--line-soft); }
.roles-grid ul { list-style: none; margin: 0; padding: 0; }
.roles-grid li {
  border-top: 1px solid var(--line-soft);
  padding: 9px 0;
  font-size: 16px;
  color: var(--body);
}
.boundary {
  border-top: 1px solid var(--line-soft);
  padding: 16px 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
}
.company-line {
  border-top: 1px solid var(--line-soft);
  padding: 18px 32px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  max-width: 88ch;
  text-wrap: pretty;
}

/* Founder column. Portrait framed like a plan window so a photograph sits inside
   the drawing language rather than on top of it. */
.founder {
  display: grid;
  grid-template-columns: 288px 1fr;   /* 9 grid units */
  border-top: 1px solid var(--line-soft);
}
.founder > * + * { border-left: 1px solid var(--line-soft); }

.founder-portrait {
  position: relative;
  margin: 32px;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.founder-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;   /* keep the face when cropping */
}
.portrait-ph {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.9;
  color: var(--faint);
  padding: 0 12px;
}

.founder-text { padding: 32px; }
.founder-text h3 {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.founder-quote {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--line);
  max-width: 46ch;
  text-wrap: pretty;
}
.founder-bio {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 56ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------- 11. FAQ */
.faq { border-top: 1px solid var(--line-soft); }
.faq-label {
  padding: 18px 32px 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--label);
}
.faq details { border-top: 1px solid var(--line-soft); }
.faq summary {
  display: grid;
  grid-template-columns: 110px 1fr 40px;
  align-items: baseline;
  padding: 12px 32px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  transition: background 0.15s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: rgba(17, 17, 16, 0.022); }
.faq-ref  { font-family: var(--mono); font-size: 14px; font-weight: 400; color: var(--accent); }
.faq-sign {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  color: var(--accent);
  text-align: right;
}
.faq details[open] .faq-sign::before      { content: "\2212"; }
.faq details:not([open]) .faq-sign::before { content: "+"; }
.faq-answer {
  margin: 0;
  padding: 0 32px 18px 128px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 84ch;
  text-wrap: pretty;
}

/* ---------------------------------------------------------- 12. Netzwerk */
.netz {
  display: grid;
  /* 416px = 13 units; with 32px padding + 32px gap the panel edge
     falls on a grid line at 480px (15 units). */
  grid-template-columns: 416px 1fr;
  gap: 32px;
  padding: 0 32px 32px;
  align-items: start;
}
.netz p { margin: 0 0 18px; font-size: 16px; line-height: 1.65; color: var(--body); }
.klic {
  border: 1px solid var(--line-soft);
  /* No fill: a solid panel here cut the sheet grid off mid-square. The border
     alone delineates it and the grid stays continuous. */
  background: transparent;
  padding: 24px 26px;
}
.klic-badge {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 12px;
}
/* Partner marks, reproduced in their own colours — third-party logos are not
   ours to recolour into the monochrome palette. Kept small per the KLIC rule:
   a badge line, never a certification seal.
   The two marks have very different proportions (KLIC 1.4:1, Design Build
   4.7:1), so each is fitted into a fixed-height box rather than sized by one
   shared dimension. */
.partners {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.partners li {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 18px;
}
.partners li + li {
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
}
.partners img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  justify-self: start;
}
.partners span {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.klic p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.klic a { color: var(--accent); }

/* ----------------------------------------------------------- 13. Kontakt */
.kontakt-grid {
  display: grid;
  /* Text column wider than the actions column — it carries far more content. */
  grid-template-columns: minmax(340px, 7fr) minmax(300px, 5fr);
}
.kontakt-left  { padding: 32px; }
.kontakt-right { padding: 32px; border-left: 1px solid var(--line-soft); }

.kontakt-left h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1.1;
}
.kontakt-left p {
  margin: 16px 0 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--body);
  max-width: 48ch;
  text-wrap: pretty;
}
.kontakt-direct {
  margin-top: 24px;
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--body);
}
.kontakt-direct a { color: var(--accent); }
.assurances { list-style: none; margin: 22px 0 0; padding: 0; }
.assurances li {
  border-top: 1px solid var(--line-soft);
  padding: 8px 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--label);
}

/* Contact actions — the form was removed; a clickable address, phone and
   WhatsApp cover the same job without an endpoint to maintain. */
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.contact-actions .btn { padding: 13px 20px; font-size: 14.5px; }

.btn--icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn--icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: none;
}

.whatsapp-note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.5px;
  line-height: 1.7;
  color: var(--label);
}

/* ---------------------------------------------------------- 14. Plankopf */
.plankopf {
  border: 2px solid var(--line);
  background: var(--block);
  background-image:
    linear-gradient(var(--gridline) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
  background-size: 32px 32px;
}
.pk-fields {
  display: grid;
  /* Handoff fractions were 2fr 2fr 1fr 1fr 1fr 1.4fr. Planinhalt and Gepr. carry
     longer values than the prototype did, so those two columns get a little more. */
  grid-template-columns: 1.9fr 2.4fr 1fr 0.7fr 1.3fr 1.4fr;
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
}
.pk-fields > div {
  padding: 12px 20px;
  border-right: 1px solid var(--line-soft);
}
.pk-fields > div:last-child { border-right: 0; }
.pk-fields dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 5px;
}
.pk-fields dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--line);
}
.pk-fields dd.accent { color: var(--accent); }

.pk-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 28px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--label);
}
.scalebar { display: flex; align-items: center; gap: 10px; }
.scalebar-graphic { display: flex; border: 1px solid var(--line); height: 8px; }
.scalebar-graphic i { width: 36px; display: block; }
.scalebar-graphic i:nth-child(odd)  { background: var(--line); }
.scalebar-graphic i:nth-child(even) { background: #fff; }

.legal-strip {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 32px 56px var(--margin-left);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--faint);
}
.legal-strip nav { display: flex; gap: 20px; }
.legal-strip a { color: var(--muted); text-decoration: none; }
.legal-strip a:hover { color: var(--accent); }

/* ------------------------------------------------------ 15. Legal subpages */
.legal-page {
  max-width: 900px;
  margin: 56px auto 40px;
  padding: 0 32px;
}
.legal-page h1 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -1.2px;
}
.legal-body { padding: 40px 28px 48px; }
.legal-body h2 {
  margin: 36px 0 12px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  text-wrap: pretty;
}
.legal-body ul { padding-left: 20px; }
.placeholder-note {
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  color: var(--warn-text);
  padding: 16px 20px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.3px;
  margin: 0 0 32px;
}

/* --------------------------------------------------------- 16. Responsive */
@media (max-width: 1100px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split > * + * { border-left: 0; border-top: 1px solid var(--line-soft); }
  .netz { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .kontakt-grid { grid-template-columns: minmax(0, 1fr); }
  .kontakt-right { border-left: 0; border-top: 1px solid var(--line-soft); }
  .mp-chain { grid-template-columns: 1fr 1fr; }
  .mp-chain li { border-bottom: 1px solid var(--line-soft); padding-bottom: 18px; }
  .mp-chain li:nth-child(2n) { border-right: 0; }
  .mp-chain li:nth-last-child(-n + 1) { border-bottom: 0; }
}

/* The navigator needs the drawing margin to sit in. */
@media (max-width: 1000px) {
  .next-axis { display: none; }
}

/* Tile grid reflows; the divider rules must follow the column count. */
@media (max-width: 1050px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  /* .tiles prefix needed: the 3-column nth-child rules outrank a bare .tile */
  .tiles .tile { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
  .tiles .tile:nth-child(2n) { border-right: 0; }
  .tiles .tile:nth-child(n + 5) { border-bottom: 0; }
}

@media (max-width: 900px) {
  .spec-row  { grid-template-columns: 110px 1fr; }
  .spec-desc { grid-column: 2; padding-top: 0; }
  .spec-head { display: none; }
}

@media (max-width: 760px) {
  .partners li { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sheet { padding: 0 14px; margin: 28px auto 36px; gap: 28px; }   /* 28+4 = one unit */

  /* On a phone the drawing margin costs more than it says. */
  .margin-rule, .axis, .next-axis { display: none; }

  /* One compact row: logo + Inhalt toggle. The CTA moves to the bottom bar and
     the mono cell captions go — together they were 56px of permanent chrome. */
  .plankopf-nav { grid-template-columns: 1fr auto; }
  .plankopf-nav > * + * { border-left: 0; }
  .pk-caption { display: none; }
  .pk-firma   { grid-area: 1 / 1; padding: 9px 14px 9px 16px; }
  .nav-toggle { grid-area: 1 / 2; display: flex; }
  .pk-inhalt  { grid-area: 2 / 1 / 3 / 3; display: none; border-top: 1px solid var(--line-soft); padding: 12px 16px 14px; }
  .pk-cta     { display: none; }

  .site-header.is-open .pk-inhalt { display: flex; }

  .mobile-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    background: var(--accent);
    color: #fff;
    text-align: center;
    text-decoration: none;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 500;
    border-top: 2px solid var(--line);
  }
  body { padding-bottom: 52px; }   /* keep the bar off the footer */

  /* The 32px height is fixed for grid alignment, so nothing here may add
     vertical padding or wrap to a second line — it would spill onto the
     block title below. Cells stay on one line and ellipsis if too long. */
  .block-head { grid-template-columns: 56px 1fr; }
  .block-head--flex { flex-wrap: nowrap; }
  .block-head > *,
  .block-head--flex > * {
    padding: 0 14px;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* The hero carries two long mono labels; the datum annotation is
     decorative and is the one that goes on a narrow screen. */
  .block-head--flex .block-meta--accent { display: none; }
  .block-meta { display: none; }

  .block-title { padding: 32px 18px 24px; }
  .hero-body   { padding: 40px 18px 28px; }
  .split > *   { padding: 32px 18px; }
  .split > * + * { border-left: 0; border-top: 1px solid var(--line-soft); }
  .audience-line { padding: 16px 18px; }

  .dimchain { display: none; }
  .disciplines { grid-template-columns: 1fr 1fr; }
  .disciplines span { border-bottom: 1px solid var(--line-soft); }
  .trust { grid-template-columns: 1fr 1fr; }

  .spec-row  { grid-template-columns: 1fr; }
  .spec-pos  { padding: 20px 18px 0; }
  .spec-name { padding: 6px 18px 0; }
  .spec-desc { grid-column: auto; padding: 8px 18px 22px; }

  .tiles { grid-template-columns: 1fr; }
  .tiles .tile { padding: 18px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  /* The 2-column query still matches here, so its last-row rule must be undone
     at matching specificity before the single-column one can take effect. */
  .tiles .tile:nth-child(n + 5) { border-bottom: 1px solid var(--line-soft); }
  .tiles .tile:last-child { border-bottom: 0; }

  .tabs { padding: 0 18px; }
  .tab { flex: 1 1 auto; text-align: center; }
  .tabpanel { padding: 0 18px 28px; }
  .plan--overview { aspect-ratio: 4 / 3; }
  .plan-details { grid-template-columns: 1fr; }

  .microprocess { padding: 24px 18px 28px; }
  .mp-chain { grid-template-columns: 1fr; }
  .mp-chain li { border-right: 0; }

  .roles-title { padding: 30px 18px 0; }
  .roles-grid > * { padding: 0 18px 28px; }
  .roles-grid > * + * { border-left: 0; border-top: 1px solid var(--line-soft); padding-top: 20px; }
  .boundary, .company-line { padding: 18px; }

  .faq-label  { padding: 20px 18px 6px; }
  .faq summary { grid-template-columns: 56px 1fr 28px; padding: 18px; font-size: 16px; }
  .faq-answer { padding: 0 18px 20px 74px; }

  .netz { padding: 0 18px 32px; }
  .kontakt-left, .kontakt-right { padding: 32px 18px; }

  .pk-fields { grid-template-columns: 1fr 1fr; }
  .pk-fields > div { border-bottom: 1px solid var(--line-soft); }
  .pk-scale { padding: 14px 18px; }
  .legal-strip { padding: 22px 14px 40px; }

  .lightbox { padding: 16px; }
  .lightbox-frame { padding: 48px 16px 32px; }
  .legal-page { padding: 0 14px; }
  .legal-body { padding: 28px 18px 32px; }

  .founder { grid-template-columns: minmax(0, 1fr); }
  .founder > * + * { border-left: 0; border-top: 1px solid var(--line-soft); }
  .founder-portrait { margin: 18px; max-width: 240px; }
  .founder-text { padding: 18px; }

  /* Divider clean-up for the 2-column reflows: a right border on the last
     cell of a row draws a stray line against the sheet frame, and a bottom
     border on the last row doubles up with the next strip. */
  .block-name { border-right: 0; }                       /* meta cell is hidden here */

  .disciplines span:nth-child(2n) { border-right: 0; }
  .disciplines span:nth-last-child(-n + 2) { border-bottom: 0; }

  .trust span:nth-child(2n) { border-right: 0; }

  .pk-fields > div:nth-child(2n) { border-right: 0; }
  .pk-fields > div:nth-last-child(-n + 2) { border-bottom: 0; }

}

/* ----------------------------------------------------- 17. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   V3 — SIA feedback pass (change requests from the annotated PDF, 2026-08-25)
   Appended as overrides so the diff against V2 stays reviewable.
   ========================================================================== */

/* -- 1. Axis markers as SIA section marks (mirrored: tip points into sheet) -- */
.axis {
  left: -86px;
  top: 3px;    /* centred on the 32px block-head row, like a Schnitt mark on its line */
  width: 74px;
  height: 26px;
  border: 0;
  border-radius: 0;
  background: var(--line);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);
  display: flex;
  align-items: stretch;
  padding: 0;
  color: var(--line);
}
.axis::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  background: var(--page);
}
.axis::after {           /* leader line to the sheet edge */
  left: 74px;
  top: 12px;
  width: 12px;
}
.axis-l, .axis-n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  line-height: 1;
}
.axis-l {
  width: 27px;
  font-size: 13px;
  border-right: 1.5px solid var(--line);
}
.axis-n {
  flex: 1;
  padding-right: 9px;
  font-size: 11px;
  color: var(--label);
}
.axis:hover {
  background: var(--accent);
  color: var(--accent);
  transform: none;
}
.axis:hover .axis-l { border-right-color: var(--accent); }
.axis:hover .axis-n { color: var(--accent); }
.axis--accent { background: var(--accent); color: var(--accent); }
.axis--accent .axis-l { border-right-color: var(--accent); }
.axis--accent .axis-n { color: var(--accent); }

/* -- 2. Dash-dot (Strichpunkt) axis lines, as on plans ---------------------- */
.margin-rule {
  background: repeating-linear-gradient(to bottom,
    var(--line-soft) 0 16px, transparent 16px 21px,
    var(--line-soft) 21px 23px, transparent 23px 28px);
}
.split > * + *,
.kontakt-right {
  border-image: repeating-linear-gradient(to bottom,
    var(--line-soft) 0 16px, transparent 16px 21px,
    var(--line-soft) 21px 23px, transparent 23px 28px) 1;
}

/* -- 3. Phase chain (Vermassungskette with SIA triangle ticks) -------------- */
.phasechain {
  border-top: 1px solid var(--line-soft);
  /* Full-bleed: the thirds then align with the three Leistungen tile columns. */
  padding: 24px 0 14px;
}
.pc-line {
  position: relative;
  height: 1px;
  background: var(--line);
  margin-bottom: 10px;
}
.pc-tick {
  position: absolute;
  top: -7px;   /* tip touches the line from above instead of straddling it */
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid var(--line);
  transform: translateX(-50%);
}
.pc-labels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.pc-labels span {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--label);
}

/* -- 4. Micro-process chain gets the same triangle ticks -------------------- */
.mp-chain { position: relative; }
.mp-chain li::after {
  content: "";
  position: absolute;
  top: -8px;   /* sits above the chain line, tip touching it */
  left: 0;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid var(--line);
}
.mp-chain::after {       /* closing tick at the far end of the chain */
  content: "";
  position: absolute;
  top: -8px;
  right: 0;
  transform: translateX(50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid var(--line);
}

/* -- 5. Pictograms (technical stroke style, per feedback) ------------------- */
.ico {
  padding-left: 46px;
  background-repeat: no-repeat;
  background-position: 0 2px;
  background-size: 30px 30px;
}
p.ico { background-position: 0 6px; }
.ico-support { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23111110' stroke-width='1.5'><path d='M4 5h22M15 5v18M11 13h8M6 26h18M15 23l-5 3M15 23l5 3'/></svg>"); }
.ico-plan    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23111110' stroke-width='1.5'><rect x='4' y='6' width='22' height='18'/><path d='M4 11h22M12 11v13M20 11v13M4 17h22'/><rect x='13.5' y='18.5' width='5' height='4' fill='%23DA291C' stroke='none'/></svg>"); }
.ico-bars    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23111110' stroke-width='1.5'><path d='M4 26h23'/><rect x='6' y='19' width='4' height='7'/><rect x='13' y='14' width='4' height='12'/><rect x='20' y='8' width='4' height='18'/></svg>"); }
.ico-link    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23111110' stroke-width='1.5'><path d='M4 8h9v5h4v4h-4v5H4zM26 8h-8v5h4v4h-4v5h8z'/></svg>"); }
.ico-org     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23111110' stroke-width='1.5'><rect x='11' y='4' width='8' height='6'/><path d='M15 10v5M7 20v-5h16v5'/><rect x='3' y='20' width='8' height='6'/><rect x='19' y='20' width='8' height='6'/></svg>"); }

/* -- 6. Massstab scale bar in every block footer ---------------------------- */
.foot-scale {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fs-bar {
  display: flex;
  border: 1px solid var(--line);
  height: 6px;
}
.fs-bar b { width: 13px; display: block; }
.fs-bar b:nth-child(odd)  { background: var(--line); }
.fs-bar b:nth-child(even) { background: #fff; }

/* -- 7. Wider block headings (feedback: fewer wrapped lines) ---------------- */
.block-title h2 { max-width: 60ch; }

/* -- 8. Ausgangslage detail label in red ------------------------------------ */
.split .detail-label { color: var(--accent); }

/* -- 9. Roles panel as a table, matching the spec table above --------------- */
.roles-table { border-top: 1px solid var(--line); margin-top: 24px; }
.rt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line-soft);
}
.rt-row > span { padding: 13px 32px; font-size: 16px; color: var(--body); }
.rt-row > span + span {
  border-left: 1px solid var(--line-soft);
  border-image: repeating-linear-gradient(to bottom,
    var(--line-soft) 0 16px, transparent 16px 21px,
    var(--line-soft) 21px 23px, transparent 23px 28px) 1;
}
.rt-head { border-bottom: 1px solid var(--line); }
.rt-head > span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--label);
  padding: 12px 32px;
}

/* -- 10. Netzwerk partner panel matches the table language ------------------ */
.klic { border: 0; padding: 0; background: transparent; }
.klic-badge {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 0;
  margin: 0;
}
.partners { gap: 0; }
.partners li { padding: 16px 0; }
.partners li + li { border-top: 1px solid var(--line-soft); padding-top: 16px; }

/* -- 11. Grenzstein symbols on the Plankopf corners ------------------------- */
.plankopf { position: relative; }
.ms {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--page);
  z-index: 2;
}
.ms::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  background: var(--line);
}
.ms-tl { top: -7px; left: -7px; }
.ms-br { bottom: -7px; right: -7px; }

/* -- 12. Responsive for the new pieces -------------------------------------- */
@media (max-width: 760px) {
  .phasechain { padding: 18px 0 12px; }
  .pc-labels span { font-size: 10px; letter-spacing: 0.5px; }
  .ico { padding-left: 40px; background-size: 26px 26px; }
  .rt-row > span, .rt-head > span { padding: 11px 18px; font-size: 14.5px; }
  .foot-scale { display: none; }   /* footers stay one line on phones */
}

/* -- 13. Hoehenkote triangles on the Ausgangslage levels (PDF feedback) ----- */
/* The SIA elevation symbol: value with a filled triangle beneath, tip down. */
.koten .kote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.koten .kote::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--line);
  margin-left: 13px;   /* centred under the value */
}


/* ==========================================================================
   18. Zahlen und Fakten — Kennzahlen + Projektkarte (block 05)
   Density ramp is the accent at reduced saturation: red still only ever
   carries meaning, here "wie viele Projekte".
   ========================================================================== */
:root {
  --d0: #FBFBF9; --d1: #F7E2DF; --d2: #EFBDB6;
  --d3: #E68D82; --d4: #DE5A4B; --d5: #C31F13;
}

/* -- Kennzahlen ------------------------------------------------------------ */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.facts .fact {
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--line-soft);
}
.facts dt {
  font-family: var(--mono);
  font-size: 30px;
  line-height: 32px;
  letter-spacing: -0.5px;
  color: var(--line);
  font-variant-numeric: tabular-nums;
}
.facts dd {
  margin: 8px 0 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 24px;
  color: var(--muted);
  text-wrap: pretty;
}

/* -- Projektkarte ---------------------------------------------------------- */
.mp-map { border: 1px solid var(--line); background: var(--block); }
.mp-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 0 14px;
  height: 32px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--label);
}
.mp-lgs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-left: auto; }
.mp-lg { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.mp-sw { width: 13px; height: 9px; border: 1px solid var(--line-soft); display: inline-block; flex: none; }
.mp-sw[data-s="0"] { background: var(--d0); } .mp-sw[data-s="1"] { background: var(--d1); }
.mp-sw[data-s="2"] { background: var(--d2); } .mp-sw[data-s="3"] { background: var(--d3); }
.mp-sw[data-s="4"] { background: var(--d4); } .mp-sw[data-s="5"] { background: var(--d5); }

.mp-figure { position: relative; padding: 16px; }
.mp-map svg { display: block; width: 100%; height: auto; }
.mp-ct {
  fill: var(--d0);
  stroke: var(--line);
  stroke-width: 0.9;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.12s ease;
}
.mp-ct[data-s="1"] { fill: var(--d1); } .mp-ct[data-s="2"] { fill: var(--d2); }
.mp-ct[data-s="3"] { fill: var(--d3); } .mp-ct[data-s="4"] { fill: var(--d4); }
.mp-ct[data-s="5"] { fill: var(--d5); }
.mp-ct.is-on, .mp-ct:focus { outline: none; stroke: var(--accent); stroke-width: 2.4; }
.mp-cl, .mp-cn {
  font-family: var(--mono);
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--block);
  stroke-width: 3px;
  fill: var(--line);
}
.mp-cl { font-size: 13px; }
.mp-cn { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.mp-cl.mp-z { fill: var(--faintest); }

.mp-tip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  background: var(--block);
  border: 1px solid var(--line);
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
  transition: opacity 0.1s ease;
  z-index: 3;
}
.mp-tip.is-on { opacity: 1; }
.mp-tip b { display: block; font-weight: 400; letter-spacing: 0.4px; }
.mp-tip span { color: var(--label); font-variant-numeric: tabular-nums; }
.mp-tip em { color: var(--accent); font-style: normal; }

.mp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.mp-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 12px;
}
.mp-list li.is-on { background: var(--d1); }
.mp-ab { width: 22px; color: var(--line); }
.mp-br { flex: 1; height: 6px; background: var(--input-bg); border: 1px solid var(--line-soft); }
.mp-br i { display: block; height: 100%; background: var(--accent); opacity: 0.8; }
.mp-qt { width: 30px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.mp-note {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 22px;
  color: var(--label);
  max-width: 72ch;
}

@media (max-width: 760px) {
  .facts { grid-template-columns: 1fr; }
  .facts dt { font-size: 26px; }
  .mp-figure { padding: 10px; }
  .mp-list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .mp-list li { padding: 0 10px; gap: 8px; }
  .mp-bar { height: auto; padding: 8px 10px; }
}


/* ==========================================================================
   19. Cookie-Einwilligung - erscheint nur, solange keine Wahl getroffen wurde.
   Google Analytics laeuft erst nach einer Zustimmung (Consent Mode v2).
   ========================================================================== */
.cc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--block); border-top: 1px solid var(--line); }
.cc[hidden] { display: none; }
.cc-inner { max-width: var(--maxw); margin: 0 auto; padding: 16px 32px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }
.cc-text { margin: 0; flex: 1 1 400px; font-size: 14px; line-height: 22px; color: var(--body); }
.cc-text a { color: var(--line); }
.cc-actions { display: flex; gap: 12px; margin-left: auto; }
.cc-btn { font-family: var(--mono); font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; padding: 11px 22px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--line);
  transition: background 0.15s, color 0.15s; }
.cc-deny:hover { background: var(--row-hover); }
.cc-allow { background: var(--accent); border-color: var(--accent); color: #fff; }
.cc-allow:hover { background: #C31F13; border-color: #C31F13; }
@media (max-width: 760px) {
  .cc-inner { padding: 14px 18px; gap: 12px; }
  .cc-actions { width: 100%; }
  .cc-btn { flex: 1; padding: 12px 10px; }
}