/* ==========================================================================
   Vorpahl Software – vorpahlsoftware.de
   Schweizer Raster · Navy als ruhiger Anker · Stahlblau als Akzent
   Wiederkehrendes Element: das Pfeilfeld (Abschnittsnummern, Vorgehen,
   Qualität, Ist-Aufnahme, AnDa-Kette)
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, SIL Open Font License 1.1 – Lizenztexte in ../fonts/) ---------- */
@font-face { font-family: "Instrument Sans"; src: url(../fonts/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(../fonts/source-serif-4-italic.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
/* Nur für Zahlen und Kennzeichnungen in der Beispielgrafik (Abschnitt 04), wird erst bei Bedarf geladen */
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/ibm-plex-mono-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Farben */
  --navy: #203864;        /* CI-Hauptfarbe · 11,6:1 auf Weiß */
  --navy-deep: #172B4F;   /* Footer, Hover · Weiß darauf 14,1:1 */
  --navy-soft: #5A6B88;   /* zweite Zeile der Headline · 5,4:1 auf Weiß */
  --steel: #3C6FB0;       /* Akzent auf Hell · 5,1:1 auf Weiß */
  --steel-ink: #2F5C99;   /* Linktext/Hover · 6,8:1 auf Weiß */
  --sky: #8FB3E3;         /* Akzent auf Navy · 5,4:1 */
  --ink: #1A2236;         /* Fließtext · 15,8:1 */
  --slate: #4A5568;       /* Sekundärtext · 7,5:1 auf Weiß, 7,0:1 auf Nebel */
  --muted: #5B6577;       /* Meta, Bildunterschriften · 5,9:1 / 5,4:1 */
  --on-navy: #C9D5E6;     /* Sekundärtext auf Navy · 7,8:1 */
  --white: #FFFFFF;
  --mist: #F4F6F9;        /* kühles Grau für Flächen */
  --mist-2: #E9EDF3;
  --line: #DCE2EA;        /* Haarlinien (dekorativ) */
  --line-strong: #BFC9D6;
  --line-navy: rgba(255, 255, 255, .16);
  --field-line: #7B879A;  /* Formularfelder · 3,6:1 auf Weiß (WCAG 1.4.11) */
  --ph-ink: #7A5A00;      /* Hinweis-Badge (Rechtsseiten bis zur Fertigstellung) · 5,8:1 auf --ph-bg */
  --ph-bg: #FBF3DC;
  --ph-line: #D6B65A;

  /* Pfeilfeld-Abstufung Navy → Stahlblau (Weiß darauf ≥ 4,5:1) */
  --arrow-1: #203864; --arrow-2: #274577; --arrow-3: #2E538A; --arrow-4: #35609D; --arrow-5: #3C6FB0;
  /* Qualität auf Navy: hellere Stufen, damit sich Phase 1 vom Grund löst */
  --phase-1: #345A96; --phase-2: #3C6FB0; --phase-3: #4677B8;

  /* Schrift */
  --font-head: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Typografische Skala – 8 Stufen, nur über diese Tokens */
  --fs-1: clamp(2.375rem, 1.5rem + 2.9vw, 4rem);         /* 38 → 64  Display */
  --fs-2: clamp(1.875rem, 1.3rem + 1.9vw, 3rem);         /* 30 → 48  H2, Leitsatz */
  --fs-3: clamp(1.5rem, 1.25rem + .7vw, 1.875rem);       /* 24 → 30  H3 Inhaltsblock, Zitat */
  --fs-4: clamp(1.25rem, 1.1rem + .45vw, 1.5rem);        /* 20 → 24  Untertitel, H3 Zeile */
  --fs-5: clamp(1.125rem, 1.05rem + .2vw, 1.25rem);      /* 18 → 20  Listenkopf, Lead */
  --fs-6: 1.0625rem;                                     /* 17       Fließtext, Buttons */
  --fs-7: .9375rem;                                      /* 15       Klein, Navigation */
  --fs-8: .8125rem;                                      /* 13       Meta, Labels */

  /* Raster & Abstände (4/8-Skala) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --maxw: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --gap: clamp(16px, 2.2vw, 32px);
  --bleed: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
  --sec-pad: clamp(48px, 5.5vw, 88px);
  --head-gap: clamp(32px, 3.5vw, 48px);
  --head-h: 76px;
  --measure: 56ch;

  /* Logo „vorpahlsoftware“ (viewBox 742,7 × 93,5). Bildhöhe so, dass die Oberlänge von „vorpahl“
     (y 1–73 = 72 Einheiten) 21 px misst (Kopf und Footer), mobil 17,5 px (Kopf) bzw. 18 px (Footer):
     Bildhöhe = Oberlänge × 93,5 / 72 */
  --logo-ar: 7.9433;
  --logo-h-kopf: 27.27px;
  --logo-h-kopf-m: 22.73px;
  --logo-h-fuss: 27.27px;
  --logo-h-fuss-m: 23.38px;

  /* Form */
  --r-ctl: 3px;
  --r-frame: 6px;
  --shadow-frame: 0 1px 2px rgba(23, 43, 79, .06), 0 16px 40px -16px rgba(23, 43, 79, .22);
  --ease: cubic-bezier(.2, .6, .2, 1);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--font-text); font-size: var(--fs-6); line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy); margin: 0; font-weight: 600; text-wrap: balance; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
p, li, dd { text-wrap: pretty; }
strong { font-weight: 600; }
address { font-style: normal; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; border-radius: 2px; }
.section--navy :focus-visible, .site-footer :focus-visible, .hero__index :focus-visible, .ops :focus-visible { outline-color: var(--sky); }
/* Weiße Formularkarte im Navy-Kontakt: wieder Stahlblau (5,1:1 auf Weiß) */
.section--navy .form :focus-visible { outline-color: var(--steel); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon--lg { width: 28px; height: 28px; stroke-width: 1.35; }

.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 100; background: var(--navy); color: var(--white); padding: 12px 16px; font-family: var(--font-head); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.nobr { white-space: nowrap; }

/* ---------- Bausteine ---------- */
.eyebrow, .sec-label, .pillar__kicker, .sector__label, .ops__kicker, .hero__index-label, .facts dt, .contact__ways small, .survey__kicker, .bridge__kicker, .sector__focus span {
  font-family: var(--font-head); font-size: var(--fs-8); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--r-ctl);
  font-family: var(--font-head); font-size: var(--fs-6); font-weight: 600; line-height: 1.2; letter-spacing: .005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn .icon { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.btn:hover .icon { transform: translateX(2px); }
.btn--lg { min-height: 56px; padding: 0 26px; }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: var(--fs-7); }
.btn--primary { background: var(--navy); color: var(--white); }
.btn--primary:hover { background: var(--navy-deep); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-6); line-height: 1.3; color: var(--navy);
  text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 3px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.link-arrow .icon { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.link-arrow:hover { color: var(--steel-ink); border-color: var(--steel); }
.link-arrow:hover .icon { transform: translateX(3px); }
.link-arrow--light { color: var(--white); border-color: rgba(255, 255, 255, .35); }
.link-arrow--light:hover { color: var(--white); border-color: var(--sky); }
.link-arrow--sm { font-size: var(--fs-7); }
.link-arrow--sm .icon { width: 16px; height: 16px; }

/* Hinweis-Badge – nur noch auf den Rechtsseiten, bis deren Inhalte stehen */
.ph {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  padding: 2px 8px; border: 1px dashed var(--ph-line); border-radius: var(--r-ctl);
  background: var(--ph-bg); color: var(--ph-ink);
  font-family: var(--font-head); font-size: var(--fs-8); font-weight: 600; letter-spacing: .03em; line-height: 1.5;
  white-space: nowrap;
}

/* ---------- Kopf ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; gap: var(--s-6); min-height: var(--head-h); }

/* Logo (nur der Schriftzug, kein Icon). Navigation und Aktionen behalten ihre Breite; fehlt Platz,
   wird nur das Logo proportional kleiner. */
.logo {
  display: block; flex: 0 1 auto; width: fit-content; max-width: 100%; min-width: 0;
  line-height: 0; text-decoration: none;
}
.logo img { display: block; max-width: 100%; height: auto; aspect-ratio: 742.7 / 93.5; }
/* In der Kopfzeile steht das Band Oberlänge–Grundlinie (y 1–73, Mitte 39,57 % der Bildhöhe) mittig zur
   Navigation, nicht der Bildrahmen: um 10,43 % der Bildhöhe nach unten versetzt; die p-Unterlänge hängt darunter. */
.logo--kopf img { width: calc(var(--logo-h-kopf) * var(--logo-ar)); transform: translateY(10.43%); }
.logo--fuss img { width: calc(var(--logo-h-fuss) * var(--logo-ar)); }
@media (max-width: 719px) {
  .logo--kopf img { width: calc(var(--logo-h-kopf-m) * var(--logo-ar)); }
  .logo--fuss img { width: calc(var(--logo-h-fuss-m) * var(--logo-ar)); }
}
.site-header__inner > .main-nav, .site-header__actions { flex-shrink: 0; }

.main-nav { margin-left: auto; }
.main-nav__list { display: flex; gap: clamp(16px, 2vw, 32px); }
.main-nav__list a {
  display: block; padding: 8px 0; text-decoration: none; white-space: nowrap;
  font-family: var(--font-head); font-size: var(--fs-7); font-weight: 500; color: var(--ink);
  border-bottom: 1px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.main-nav__list a:hover { color: var(--steel-ink); border-color: var(--steel); }
.main-nav__list a:focus-visible { outline-offset: 6px; }
/* Aktuelle Seite (Unterseite „So arbeiten wir“): in der Desktop-Navigation dezent unterstrichen */
@media (min-width: 1180px) { .main-nav__list a[aria-current="page"] { color: var(--navy); border-color: var(--navy); } }
.main-nav__extra { display: none; }
@media (min-width: 1180px) and (max-width: 1259px) { .main-nav__list { gap: 18px; } } /* Logo auch knapp über 1180 px in voller Größe */

.site-header__actions { display: flex; align-items: center; gap: var(--s-5); }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-7); color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nav-phone .icon { width: 18px; height: 18px; color: var(--steel); }
.nav-phone:hover { color: var(--steel-ink); }

.menu-toggle {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--white); color: var(--navy);
  font-family: var(--font-head); font-size: var(--fs-7); font-weight: 600; cursor: pointer;
}
.menu-toggle .icon--close { display: none; }
.menu-toggle[aria-expanded="true"] .icon--open { display: none; }
.menu-toggle[aria-expanded="true"] .icon--close { display: block; }

/* Zwischen 1180 und 1359 px: Telefon als Symbol-Button, damit die Navigation einzeilig bleibt */
@media (max-width: 1359px) {
  .nav-phone--header { justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); }
  .nav-phone--header span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-phone--header .icon { color: var(--navy); }
  .nav-phone--header:hover { border-color: var(--navy); }
  .site-header__actions { gap: var(--s-3); }
}
@media (max-width: 1179px) {
  .js .menu-toggle { display: inline-flex; }
  .js .main-nav {
    display: none; position: fixed; inset: var(--head-h) 0 0 0; z-index: 49;
    background: var(--white); overflow-y: auto; padding: var(--s-5) var(--gutter) var(--s-7);
    margin: 0; border-top: 1px solid var(--line);
  }
  .js .site-header[data-open] .main-nav { display: flex; flex-direction: column; }
  .js .main-nav__list { flex-direction: column; gap: 0; }
  .js .main-nav__list a { font-size: var(--fs-4); font-weight: 600; color: var(--navy); padding: 16px 0; border-bottom: 1px solid var(--line); }
  .js .main-nav__extra { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-6); }
  .js .main-nav__extra .btn { display: none; min-height: 56px; }
  .js .main-nav__extra .nav-phone { font-size: var(--fs-5); padding: 8px 0; }
  .site-header__actions { margin-left: auto; gap: var(--s-3); }
  /* Ohne JavaScript ist die Kopfzeile hier mehrzeilig (Navigation ausgeklappt) und höher als --head-h:
     nicht mitlaufen lassen, sonst verdeckt sie Sprungziele (#kontakt, #form-alert) und den Tastaturfokus */
  .no-js .site-header { position: relative; }
  .no-js .site-header__inner { flex-wrap: wrap; padding-block: 12px; }
  .no-js .main-nav { order: 3; width: 100%; margin: 0; }
  .no-js .main-nav__list { flex-wrap: wrap; gap: 4px 20px; }
}
@media (max-width: 639px) {
  :root { --head-h: 64px; }
  .site-header__inner { gap: var(--s-3); }
  .site-header__actions { gap: var(--s-2); }
  .header-cta { display: none; }
  .js .main-nav__extra .btn { display: inline-flex; }
  .logo--kopf { margin-right: 8px; } /* mind. 20 px Luft zum Telefon-Knopf */
}
/* Unter 720 px zeigt der Menü-Knopf nur das Symbol (Text bleibt für Screenreader) */
@media (max-width: 719px) {
  .menu-toggle { width: 44px; padding: 0; justify-content: center; }
  .menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
html.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(48px, 5vw, 72px); overflow-x: clip; }
.hero__grid { grid-template-rows: auto auto; }
.hero__head { grid-column: 1 / span 6; grid-row: 1; align-self: end; padding-top: var(--s-4); }
.hero__body { grid-column: 1 / span 6; grid-row: 2; padding-bottom: var(--s-4); }
.eyebrow { color: var(--steel-ink); display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-5); }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.display { font-size: var(--fs-1); line-height: 1.04; letter-spacing: -.03em; font-weight: 600; }
.display span { display: block; }
.display__2 { color: var(--navy-soft); }
.hero__sub { margin-top: var(--s-5); font-size: var(--fs-4); line-height: 1.35; color: var(--navy); }
.hero__lead { margin-top: var(--s-4); font-size: var(--fs-5); line-height: 1.6; color: var(--slate); max-width: 52ch; }
.hero .btn-row { margin-top: var(--s-6); }
.hero__note { display: flex; align-items: center; gap: 8px; margin-top: var(--s-4); font-size: var(--fs-8); color: var(--muted); }
.hero__note .icon { width: 16px; height: 16px; color: var(--steel); }

/* Motiv: Software am Prüfplatz – rechts bis an den Rand, Navy-Leistungsbox unten links */
.hero__media { grid-column: 7 / -1; grid-row: 1 / span 2; align-self: center; position: relative; margin-right: calc(-1 * var(--bleed)); height: clamp(420px, 40vw, 580px); background: var(--mist-2); }
.hero__motif { position: relative; height: 100%; overflow: hidden; }
.hero__motif img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }
@media (min-width: 1600px) { .hero__motif img { object-position: 50% 40%; } }
.hero__index {
  position: absolute; z-index: 2; left: 0; bottom: 0; width: min(272px, 46%);
  background: var(--navy); color: var(--white); padding: var(--s-5) var(--s-5) var(--s-3);
}
.hero__index-label { color: var(--sky); margin-bottom: var(--s-2); }
.hero__index a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--line-navy); text-decoration: none;
  font-family: var(--font-head); font-weight: 500; font-size: var(--fs-7); color: var(--white);
}
.hero__index li:first-child a { border-top: 0; }
.hero__index a .icon { width: 18px; height: 18px; color: var(--sky); transition: transform .2s var(--ease); }
.hero__index a:hover .icon { transform: translateX(3px); }

.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(32px, 3.5vw, 48px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust li { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px 20px 0; font-size: var(--fs-7); line-height: 1.45; color: var(--muted); }
.trust li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.trust .icon { color: var(--steel); width: 22px; height: 22px; margin-top: 1px; }
.trust strong { display: block; font-family: var(--font-head); font-size: var(--fs-6); color: var(--navy); font-weight: 600; margin-bottom: 2px; }

/* ---------- Abschnitte ---------- */
.section { padding-block: var(--sec-pad); }
.section--flush-bottom { padding-bottom: 0; }
.section--mist { background: var(--mist); }
.section--navy { background: var(--navy); color: var(--white); }

.sec-head { border-top: 1px solid var(--line-strong); padding-top: var(--s-5); margin-bottom: var(--head-gap); row-gap: var(--s-5); }
.sec-index { grid-column: 1 / span 3; align-self: start; display: flex; align-items: center; gap: 14px; padding-top: calc((var(--fs-2) * 1.08 - 24px) / 2); }
/* Abschnittsnummer im kleinen Pfeilfeld */
.sec-num {
  --notch: 8px;
  display: inline-flex; align-items: center; height: 24px; padding: 0 calc(var(--notch) + 7px) 0 9px;
  background: var(--navy); color: var(--white);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%);
  font-family: var(--font-head); font-size: var(--fs-8); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.sec-label { color: var(--muted); }
.sec-titles { grid-column: 4 / span 9; }
.sec-titles h2 { font-size: var(--fs-2); line-height: 1.08; letter-spacing: -.024em; max-width: 22ch; }
.sec-sub { margin-top: var(--s-4); font-size: var(--fs-4); line-height: 1.35; color: var(--slate); max-width: 44ch; }

.section--navy .sec-head { border-color: var(--line-navy); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy .sec-num { background: var(--sky); color: var(--navy); }
.section--navy .sec-label { color: var(--on-navy); }
.section--navy .sec-sub { color: var(--on-navy); }

/* ---------- 01 Probleme ---------- */
.problems { row-gap: var(--s-7); }
.problem { grid-column: span 3; border-top: 1px solid var(--line-strong); padding-top: var(--s-5); }
.problem .icon { color: var(--steel); margin-bottom: var(--s-5); }
.problem h3 { font-size: var(--fs-5); line-height: 1.25; letter-spacing: -.01em; }
.problem p { margin-top: var(--s-3); color: var(--slate); font-size: var(--fs-7); max-width: 32ch; }
.problems__outro { margin-top: var(--head-gap); align-items: center; row-gap: var(--s-4); }
.problems__outro p { grid-column: 4 / span 6; font-family: var(--font-serif); font-style: italic; font-size: var(--fs-4); line-height: 1.35; color: var(--navy); }
.problems__outro .link-arrow { grid-column: 10 / span 3; justify-self: end; }

/* ---------- 02 Leistungen ---------- */
/* Säulen im Seitenraster: je 4 Spalten, Trennlinie mittig im Spaltenabstand */
.pillars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); column-gap: var(--gap); border-top: 2px solid var(--navy); }
.pillar { position: relative; grid-column: span 4; grid-row: span 6; display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: var(--s-6) 0 var(--s-7); }
.pillar + .pillar::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); border-left: 1px solid var(--line); }
.pillar--product { background: var(--mist); padding-inline: var(--s-6); }
.pillar--product::before { display: none; }
.pillar__kicker { display: flex; align-items: center; gap: 10px; color: var(--steel-ink); margin-bottom: var(--s-5); }
.pillar__kicker .icon { width: 22px; height: 22px; color: var(--steel); }
.pillar h3 { font-size: var(--fs-3); line-height: 1.15; letter-spacing: -.018em; hyphens: manual; overflow-wrap: break-word; }
.pillar__tag { margin-top: var(--s-2); font-size: var(--fs-5); line-height: 1.35; color: var(--navy); }
.pillar__text { margin-top: var(--s-4); color: var(--slate); max-width: var(--measure); }
.ticks { margin-top: var(--s-5); border-top: 1px solid var(--line); max-width: var(--measure); }
.ticks li { position: relative; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--line); font-size: var(--fs-7); line-height: 1.45; color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 1px; top: 22px; width: 9px; height: 0; border-top: 2px solid var(--steel); }
.pillar .ticks { margin-bottom: var(--s-6); align-self: start; }
.pillar__link { align-self: end; justify-self: start; }

/* Querschnitt „Alles aus einer Hand“ – volle Breite, Inhalt im Seitenraster:
   oben Titel und Text, darunter die fünf Leistungen als Zeile mit Haarlinien */
.ops { margin-top: var(--head-gap); background: var(--navy); color: var(--white); padding-block: clamp(40px, 4.5vw, 64px); }
.ops__grid { row-gap: var(--s-5); align-items: start; }
.ops__title { grid-column: 1 / span 4; }
.ops__heading { font-size: var(--fs-3); line-height: 1.15; letter-spacing: -.018em; color: var(--white); }
.ops__claim { margin-top: var(--s-2); font-size: var(--fs-5); line-height: 1.35; color: var(--sky); }
.ops__text { grid-column: 5 / span 7; padding-top: 4px; }
.ops__text p { color: var(--on-navy); max-width: 60ch; }
.ops__text .link-arrow { margin-top: var(--s-5); }
.ops__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(32px, 3.5vw, 48px); }
.ops__list li { display: flex; flex-direction: column; align-items: flex-start; padding-top: var(--s-5); border-top: 1px solid var(--line-navy); }
.ops__list .icon { width: 26px; height: 26px; stroke-width: 1.35; color: var(--sky); margin-bottom: var(--s-4); }
.ops__list strong { font-family: var(--font-head); font-size: var(--fs-5); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--white); hyphens: manual; }
.ops__list span { margin-top: 6px; font-size: var(--fs-7); line-height: 1.5; color: var(--on-navy); }
/* Helle Variante (Unterseite „So arbeiten wir“) */
.ops--light { background: var(--mist); color: var(--ink); margin-top: 0; padding-block: var(--sec-pad); }
.ops--light .ops__heading { color: var(--navy); }
.ops--light .ops__claim { color: var(--navy); }
.ops--light .ops__text p { color: var(--slate); }
.ops--light .ops__list li { border-color: var(--line-strong); }
.ops--light .ops__list .icon { color: var(--steel); }
.ops--light .ops__list strong { color: var(--navy); }
.ops--light .ops__list span { color: var(--slate); }
.ops__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--line-strong); }

/* ---------- 03 Vorgehen ---------- */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); column-gap: var(--gap); }
.step { --notch: 14px; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.step__bar {
  display: flex; align-items: center; height: 44px; padding-left: calc(var(--notch) + 14px);
  margin-right: calc(-1 * (var(--gap) + var(--notch) - 6px));
  background: var(--c, var(--navy)); color: var(--white);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%);
}
.step:first-child .step__bar { padding-left: 16px; clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%); }
.step:last-child .step__bar { margin-right: 0; }
.step:nth-child(1) { --c: var(--arrow-1); } .step:nth-child(2) { --c: var(--arrow-2); } .step:nth-child(3) { --c: var(--arrow-3); }
.step:nth-child(4) { --c: var(--arrow-4); } .step:nth-child(5) { --c: var(--arrow-5); }
.step__num { font-family: var(--font-head); font-size: var(--fs-7); font-weight: 600; font-variant-numeric: tabular-nums; }
.step h3 { margin-top: var(--s-5); font-size: var(--fs-5); line-height: 1.25; letter-spacing: -.01em; padding-right: var(--s-2); hyphens: manual; }
.step p { margin-top: var(--s-2); color: var(--slate); font-size: var(--fs-7); line-height: 1.5; padding-right: var(--s-2); }

/* Ist-Aufnahme: Beispielablauf mit Medienbrüchen */
.survey { margin-top: var(--head-gap); padding-top: var(--s-6); border-top: 1px solid var(--line-strong); row-gap: var(--s-6); align-items: start; }
.survey__intro { grid-column: 1 / span 3; }
.survey__kicker { color: var(--steel-ink); }
.survey__intro h3 { margin-top: var(--s-3); font-size: var(--fs-5); line-height: 1.25; }
.survey__intro p:last-child { margin-top: var(--s-3); font-size: var(--fs-7); color: var(--slate); max-width: 40ch; }
.survey__fig { grid-column: 4 / span 9; padding-top: var(--s-2); }

.flow { --notch: 14px; --break: 44px; display: flex; padding-bottom: 40px; }
.flow__step { position: relative; flex: 1 1 0; min-width: 0; }
.flow__step + .flow__step { margin-left: calc(-1 * (var(--notch) - 6px)); }
.flow__step--break + .flow__step, .flow__step + .flow__step--break { margin-left: 0; }
.flow__step--break { margin-left: var(--break) !important; }
.flow__node {
  position: relative; z-index: 0; display: flex; align-items: center; height: 48px;
  padding: 0 calc(var(--notch) + 6px) 0 calc(var(--notch) + 12px);
  font-family: var(--font-head); font-size: var(--fs-7); font-weight: 600; color: var(--navy); white-space: nowrap;
}
/* Kontur des Pfeilfelds: zwei geclippte Ebenen (Linie + Füllung) */
.flow__node::before, .flow__node::after {
  content: ""; position: absolute; z-index: -1;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%);
}
.flow__node::before { inset: 0; background: var(--line-strong); }
.flow__node::after { inset: 1px 1.4px; background: var(--white); }
.flow__step:first-child .flow__node { padding-left: 16px; }
.flow__step:first-child .flow__node::before, .flow__step:first-child .flow__node::after { clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%); }
/* Bruchstelle: gestrichelte Verbindung über die Lücke, Beschriftung darunter */
.flow__step--break::before { content: ""; position: absolute; left: calc(-1 * var(--break)); width: calc(var(--break) + var(--notch)); top: 23px; border-top: 2px dashed var(--steel); }
.flow__gap {
  position: absolute; top: 60px; left: calc((var(--notch) - var(--break)) / 2); transform: translateX(-50%);
  padding-top: 6px; font-family: var(--font-head); font-size: var(--fs-8); font-weight: 600; line-height: 1.3; color: var(--steel-ink); white-space: nowrap;
}
.flow__gap::before { content: ""; position: absolute; left: 50%; top: -10px; height: 12px; border-left: 1px dashed var(--steel); }
.flow__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-8); color: var(--muted); }
.flow__key { display: inline-flex; align-items: center; gap: 8px; }
.flow__key::before { content: ""; width: 24px; border-top: 2px solid var(--line-strong); }
.flow__key--break::before { border-top: 2px dashed var(--steel); }
.flow__note { margin-left: auto; }

/* ---------- 04 Haltung ---------- */
.statement { margin-top: var(--s-4); font-size: var(--fs-2); line-height: 1.12; letter-spacing: -.01em; color: var(--navy); max-width: 22ch; text-indent: -.42em; }
.stance { align-items: stretch; row-gap: var(--s-6); }
.stance__media { grid-column: 1 / span 6; }
.promises { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; column-gap: var(--gap); border-top: 2px solid var(--navy); }

/* Beispielgrafik: angeschnittener Auszug einer Aufwandsabschätzung (Blatt), unten rechts überlagert
   von einem Ausschnitt eines Prozessmodells bzw. einer Systemskizze (Navy-Karte, Inline-SVG). Echte Schrift statt Bild: scharf, mobil lesbar.
   Das Blatt läuft unten aus dem Rahmen; die Karte liegt immer über dem unteren, weniger wichtigen Teil. */
.estimate { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.estimate > figcaption { font-size: var(--fs-8); color: var(--muted); }
.estimate__canvas {
  position: relative; flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden;
  padding: 32px 32px 0; container-type: inline-size;
  background-color: var(--mist);
  background-image: linear-gradient(rgba(191, 201, 214, .3) 1px, transparent 1px), linear-gradient(90deg, rgba(191, 201, 214, .3) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
}
.estimate__sheet {
  flex: 1 0 auto; width: 100%; max-width: 500px; margin-bottom: -56px; padding: 22px 24px 173px;
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-frame);
  color: var(--ink); font-size: 13px; line-height: 1.35;
}
.estimate__kicker, .estimate__meta, .estimate__row--head, .estimate__nr, .estimate__pt, .estimate__notes-title { font-family: var(--font-mono); font-weight: 500; }
.estimate__kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-ink); }
.estimate__title { margin-top: 6px; font-family: var(--font-head); font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--navy); }
.estimate__meta { margin-top: 4px; font-size: 11px; color: var(--muted); }
.estimate__table { margin-top: 16px; }
.estimate__row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 84px 44px; column-gap: 12px; align-items: center; min-height: 34px; padding-block: 6px; border-bottom: 1px solid var(--line); }
.estimate__row--head { min-height: 0; padding: 0 0 6px; border-bottom-color: var(--line-strong); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.estimate__row--sum { border-top: 2px solid var(--navy); border-bottom: 0; margin-top: -1px; font-family: var(--font-head); font-weight: 600; color: var(--navy); }
.estimate__nr { font-size: 12px; color: var(--steel-ink); }
.estimate__pt { justify-self: end; font-size: 12.5px; color: var(--navy); white-space: nowrap; }
.estimate__row--head .estimate__pt { font-size: 10px; color: var(--muted); }
.estimate__row--sum .estimate__pt { font-size: 13px; }
/* Spanne als Balken (Skala 0–12 PT): kräftig bis zum unteren, hell bis zum oberen Wert */
.range { position: relative; display: block; height: 6px; background: var(--mist-2); }
.range::before, .range::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; }
.range::before { width: calc(var(--max) / 12 * 100%); background: #B4C9E6; }
.range::after { width: calc(var(--min) / 12 * 100%); background: var(--steel); }
.estimate__row--p1 { --min: 4; --max: 6; }
.estimate__row--p2 { --min: 8; --max: 10; }
.estimate__row--p3 { --min: 5; --max: 7; }
.estimate__row--p4 { --min: 3; --max: 5; }
.estimate__notes-title { margin-top: 18px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.estimate__notes { margin-top: 4px; }
.estimate__notes li { position: relative; padding: 3px 0 3px 14px; font-size: 12.5px; color: var(--slate); }
.estimate__notes li::before { content: ""; position: absolute; left: 0; top: .9em; width: 6px; border-top: 1px solid var(--steel); }
/* Technische Karte (Prozessmodell BPMN 2.0 oder Systemskizze) als Ausschnitt: feste Pixelgröße (scharf, nicht skaliert).
   Breiter Rahmen: rechts verankert, sichtbar sind immer die linken 415 px der Karte. Schmaler Rahmen: links verankert,
   der sichtbare Ausschnitt wird mit dem Rahmen kürzer. Die Karte läuft rechts und unten aus dem Rahmen. */
.estimate__flow { position: absolute; right: -225px; bottom: -14px; width: 640px; height: 224px; max-width: none; filter: drop-shadow(0 10px 22px rgba(23, 43, 79, .28)); }
.estimate__flow text { font-family: var(--font-text); font-size: 10px; font-weight: 500; fill: var(--on-navy); }
.estimate__flow .estimate__flow-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; fill: var(--sky); }
.estimate__flow .estimate__flow-pool { font-family: var(--font-head); font-size: 11px; font-weight: 600; fill: var(--white); }
.estimate__flow .estimate__flow-lane { font-family: var(--font-head); font-size: 10.5px; font-weight: 600; text-anchor: middle; }
.estimate__flow-task text { font-family: var(--font-head); font-size: 11px; font-weight: 600; text-anchor: middle; fill: var(--white); }
.estimate__flow-event text { text-anchor: middle; }
.estimate__flow-note text { fill: var(--sky); }
.estimate__flow-mono text { font-family: var(--font-mono); fill: var(--sky); }
.estimate__flow .estimate__flow-start { text-anchor: start; }
/* Variante Systemskizze (estimate__flow--arch): Zonen, kleine Protokoll-Beschriftungen, zentrierte Mono-Zeilen */
.estimate__flow-zone text { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; fill: var(--sky); }
.estimate__flow-xs text { font-size: 9px; }
.estimate__flow .estimate__flow-mid { text-anchor: middle; }
@container (max-width: 520px) {
  .estimate__row { grid-template-columns: 22px minmax(0, 1fr) 40px; column-gap: 10px; }
  .estimate__span { display: none; }
  /* Schmaler Rahmen: Karte links unter der Summe beginnen lassen */
  .estimate__flow { left: 16px; right: auto; }
  /* Annahmen lägen hier ganz unter der Karte: weglassen, die Karte schließt direkt an die Summe an */
  .estimate__notes-title, .estimate__notes { display: none; }
  .estimate__sheet { padding-bottom: 281px; }
}
@container (max-width: 420px) {
  .estimate__sheet { padding-inline: 18px; font-size: 12.5px; }
  .estimate__row { min-height: 32px; }
  .estimate__flow { left: 10px; }
}
@container (max-width: 340px) {
  .estimate__flow { left: -8px; } /* sehr schmal: Randabstand der Karte opfern, damit mehr vom Ablauf sichtbar bleibt */
}
.promise { padding: var(--s-5) 0 var(--s-6); }
.promise:nth-child(n+3) { border-top: 1px solid var(--line); }
.promise .icon { color: var(--steel); }
.promise h3 { margin-top: var(--s-4); font-size: var(--fs-4); line-height: 1.2; letter-spacing: -.012em; }
.promise p { margin-top: var(--s-2); color: var(--slate); }

/* ---------- 05 Qualität ---------- */
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: var(--gap); }
.phase { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.phase__bar {
  --notch: 18px;
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 calc(var(--notch) + 16px) 0 calc(var(--notch) + 18px);
  background: var(--phase-1); color: var(--white);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%);
  margin-right: calc(-1 * (var(--gap) + var(--notch) - 6px));
}
.phase:first-child .phase__bar { clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%); padding-left: 20px; }
.phase:nth-child(2) .phase__bar { background: var(--phase-2); }
.phase:nth-child(3) .phase__bar { background: var(--phase-3); margin-right: 0; }
.phase__num { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-8); width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; flex: none; }
.phase__bar h3 { font-size: var(--fs-5); line-height: 1.2; letter-spacing: -.005em; color: var(--white); }
.phase__bar .icon { margin-left: auto; width: 22px; height: 22px; opacity: .9; }
.phase__why { margin-top: var(--s-5); padding-right: var(--s-4); font-family: var(--font-serif); font-style: italic; font-size: var(--fs-5); line-height: 1.35; color: var(--white); }
.phase__list { margin-top: var(--s-4); }
.phase__list > div { padding: 14px 0; border-top: 1px solid var(--line-navy); }
.phase__list > div:last-child { border-bottom: 1px solid var(--line-navy); }
.phase__list dt { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-6); line-height: 1.35; color: var(--white); }
.phase__list dd { margin-top: 4px; font-size: var(--fs-7); line-height: 1.5; color: var(--on-navy); }
.term { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--line-navy); border-radius: var(--r-ctl); font-size: var(--fs-8); font-weight: 500; letter-spacing: .02em; color: var(--on-navy); vertical-align: 2px; line-height: 1.5; }
/* Abläufe als Liste; der Pfeil hängt am vorherigen Schritt, damit keine Zeile mit einem Pfeil beginnt */
.pills { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; margin-top: var(--s-5); align-self: start; }
.pills li { position: relative; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--r-ctl); font-family: var(--font-head); font-size: var(--fs-8); font-weight: 600; line-height: 1.4; color: var(--white); white-space: nowrap; }
.pills li:not(:last-child) { margin-right: 24px; }
.pills li:not(:last-child)::before { content: ""; position: absolute; right: -20px; top: 50%; width: 11px; border-top: 1px solid var(--sky); }
.pills li:not(:last-child)::after { content: ""; position: absolute; right: -20px; top: calc(50% - 4px); border: 4px solid transparent; border-left: 5px solid var(--sky); border-right: 0; transform: translateX(4px); }
/* Ruhiges Merkmal statt Zahlenkachel */
.phase__proof { margin-top: var(--s-5); padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4); background: rgba(255, 255, 255, .06); border-left: 2px solid var(--sky); display: flex; gap: 14px; align-items: flex-start; align-self: start; }
.phase__proof .icon { width: 24px; height: 24px; color: var(--sky); }
.phase__proof span { font-size: var(--fs-7); line-height: 1.5; color: var(--on-navy); }
.phase__proof strong { display: block; margin-bottom: 2px; font-family: var(--font-head); font-size: var(--fs-6); line-height: 1.35; font-weight: 600; color: var(--white); }
.phase__extra { align-self: start; }
/* Abläufe senkrecht, sobald sie nicht mehr in eine Zeile passen (statt Umbruch mit verwaistem Pfeil):
   900–1439 px beide Abläufe (drei schmale Spalten nebeneinander), darunter nur der lange */
@media (min-width: 900px) and (max-width: 1439px) {
  .pills { flex-direction: column; align-items: flex-start; gap: 0; }
  .pills li:not(:last-child) { margin: 0 0 18px; }
  .pills li:not(:last-child)::before { right: auto; left: 16px; top: auto; bottom: -14px; width: 0; height: 8px; border-top: 0; border-left: 1px solid var(--sky); }
  .pills li:not(:last-child)::after { right: auto; left: 12px; top: auto; bottom: -17px; border: 4px solid transparent; border-top: 5px solid var(--sky); border-bottom: 0; transform: none; }
}
@media (max-width: 899px) {
  .pills--long { flex-direction: column; align-items: flex-start; gap: 0; }
  .pills--long li:not(:last-child) { margin: 0 0 18px; }
  .pills--long li:not(:last-child)::before { right: auto; left: 16px; top: auto; bottom: -14px; width: 0; height: 8px; border-top: 0; border-left: 1px solid var(--sky); }
  .pills--long li:not(:last-child)::after { right: auto; left: 12px; top: auto; bottom: -17px; border: 4px solid transparent; border-top: 5px solid var(--sky); border-bottom: 0; transform: none; }
}
.quality__note { margin-top: var(--s-4); font-size: var(--fs-8); letter-spacing: .02em; color: var(--on-navy); }
.quality__more { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line-navy); }

/* ---------- 06 AnDa ---------- */
.anda .sec-titles h2 { max-width: none; }
.anda__grid { align-items: start; row-gap: var(--s-7); }
.anda__text { grid-column: 1 / span 5; }
.anda__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.anda__brand img { height: 34px; width: auto; }
.anda__brand span { font-size: var(--fs-7); color: var(--muted); }
.anda__for { margin-top: var(--s-5); color: var(--slate); max-width: 44ch; }
/* Vorgangskette als schmale Pfeilschiene, Beschriftung darunter */
.chain { --notch: 7px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: var(--s-6); }
.chain li { position: relative; padding: 24px 8px 0 0; font-family: var(--font-head); font-size: var(--fs-8); font-weight: 600; line-height: 1.25; color: var(--navy); hyphens: manual; }
.chain li::before {
  content: ""; position: absolute; left: 0; right: -4px; top: 0; height: 14px; background: var(--c);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%);
}
.chain li:first-child::before { clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%); }
.chain li:last-child::before { right: 0; }
.chain li:nth-child(1) { --c: var(--arrow-1); } .chain li:nth-child(2) { --c: var(--arrow-2); } .chain li:nth-child(3) { --c: var(--arrow-3); }
.chain li:nth-child(4) { --c: var(--arrow-4); } .chain li:nth-child(5) { --c: var(--arrow-5); }
.chain li:not(:first-child) { padding-left: 4px; }
.checks { margin-top: var(--s-6); border-top: 1px solid var(--line-strong); }
.checks li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); line-height: 1.45; }
.checks .icon { color: var(--steel); margin-top: 1px; }
.anda .btn-row { margin-top: var(--s-6); }
.fine { margin-top: var(--s-3); font-size: var(--fs-8); line-height: 1.5; color: var(--muted); }

/* Screenshot im Seitenraster: rechte Kante bündig mit dem Inhalt, Browserrahmen vollständig */
.anda__shot { grid-column: 6 / -1; align-self: start; min-width: 0; }
.browser { background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--r-frame); overflow: hidden; box-shadow: var(--shadow-frame); }
.browser__bar { display: flex; align-items: center; gap: 16px; height: 36px; padding: 0 14px; background: #EEF1F5; border-bottom: 1px solid var(--line); }
.browser__dots { display: flex; gap: 6px; }
.browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: #C6CEDA; }
.browser__url { flex: 1; max-width: 340px; margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: 6px; height: 22px; border-radius: 4px; background: var(--white); border: 1px solid var(--line); font-size: .75rem; color: var(--muted); transform: translateX(-24px); }
.browser__url .icon { width: 12px; height: 12px; }
.browser img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 0 0; }
.anda__shot figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-top: var(--s-4); font-size: var(--fs-8); color: var(--muted); }

.bridge { margin-top: var(--head-gap); padding-top: var(--s-6); border-top: 1px solid var(--line-strong); align-items: start; row-gap: var(--s-4); }
.bridge__head { grid-column: 1 / span 7; }
.bridge__kicker { color: var(--steel-ink); }
.bridge__quote { margin-top: var(--s-3); font-size: var(--fs-3); line-height: 1.25; color: var(--navy); max-width: 30ch; }
.bridge__text { grid-column: 8 / span 5; padding-top: 28px; }
.bridge__text p { font-size: var(--fs-5); line-height: 1.55; color: var(--ink); max-width: 44ch; }
.bridge__text .link-arrow { margin-top: var(--s-5); }

/* ---------- 07 Branchen ---------- */
.sectors { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); column-gap: var(--gap); }
.sector { grid-column: span 6; grid-row: span 6; display: grid; grid-template-rows: subgrid; row-gap: 0; }
.sector__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--mist-2); margin-bottom: var(--s-6); }
.sector__media img { width: 100%; height: 100%; object-fit: cover; }
.sector:first-child .sector__media img { object-position: 40% 55%; }
.sector:last-child .sector__media img { object-position: 50% 45%; }
.sector__label { color: var(--steel-ink); }
.sector h3 { margin-top: var(--s-3); font-size: var(--fs-3); line-height: 1.15; letter-spacing: -.018em; max-width: 24ch; }
.sector__text { margin-top: var(--s-4); color: var(--slate); max-width: 56ch; }
.tags { display: flex; flex-wrap: wrap; align-content: start; gap: 8px; margin-top: var(--s-5); }
.tags li { padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); font-family: var(--font-head); font-size: var(--fs-7); font-weight: 500; color: var(--navy); background: var(--white); }
.sector__focus { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); font-family: var(--font-head); font-weight: 600; color: var(--navy); }
.sector__focus span { color: var(--muted); }

/* ---------- 08 Über uns ---------- */
.about { align-items: start; row-gap: var(--s-6); }
.about__media { grid-column: 1 / span 6; }
.about__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 100%; }
.about__media figcaption { margin-top: var(--s-3); font-size: var(--fs-8); color: var(--muted); }
.about__text { grid-column: 8 / span 5; }
.lead { font-size: var(--fs-5); line-height: 1.55; color: var(--ink); max-width: var(--measure); }
.about__text > p + p { margin-top: var(--s-4); color: var(--slate); max-width: var(--measure); }
.facts { margin-top: var(--s-6); border-top: 1px solid var(--line-strong); }
.facts > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { font-family: var(--font-head); font-weight: 500; color: var(--navy); }

/* ---------- 09 FAQ ---------- */
.faq-wrap { align-items: start; row-gap: var(--s-6); }
.faq-aside { grid-column: 1 / span 3; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: var(--s-5); font-size: var(--fs-7); color: var(--slate); }
.faq-aside .nav-phone { font-size: var(--fs-6); }
.faq-aside__mail { color: var(--steel-ink); text-underline-offset: 3px; }
.faq { grid-column: 4 / span 9; border-top: 2px solid var(--navy); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: 20px 0; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-size: var(--fs-5); font-weight: 600; line-height: 1.3; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 22px; height: 22px; color: var(--steel); transition: transform .25s var(--ease); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq summary:hover span { color: var(--steel-ink); }
.faq__body { padding: 0 var(--s-8) var(--s-5) 0; max-width: var(--measure); color: var(--slate); }

/* ---------- 10 Kontakt ---------- */
.contact__grid { align-items: start; row-gap: var(--s-7); grid-template-rows: auto 1fr; }
.contact__ways { grid-column: 1 / span 5; border-top: 1px solid var(--line-navy); }
.contact__ways li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line-navy); }
.contact__ways .icon { color: var(--sky); width: 22px; height: 22px; margin-top: 3px; }
.contact__ways small { display: block; color: var(--on-navy); margin-bottom: 2px; }
.contact__ways span { font-family: var(--font-head); font-size: var(--fs-5); font-weight: 500; color: var(--white); }
.contact__ways a { text-decoration: none; color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, .3); }
.contact__ways a:hover { border-color: var(--sky); }

.next { grid-column: 1 / span 5; }
.next__title { font-size: var(--fs-8); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sky) !important; }
.next__list { margin-top: var(--s-4); }
.next__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--s-3); align-items: start; padding: 12px 0; }
.next__num {
  --notch: 7px; display: inline-flex; align-items: center; justify-content: flex-start; width: 32px; height: 22px; padding-left: 9px; margin-top: 1px;
  background: var(--sky); color: var(--navy); font-family: var(--font-head); font-size: var(--fs-8); font-weight: 600;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%);
}
.next__list p { color: var(--on-navy); font-size: var(--fs-7); line-height: 1.5; max-width: 44ch; }
.next__list strong { color: var(--white); font-family: var(--font-head); font-size: var(--fs-6); }
.form { position: relative; grid-column: 7 / -1; grid-row: 1 / span 2; background: var(--white); color: var(--ink); padding: clamp(24px, 3.4vw, 48px); }
.section--navy .form__title { font-size: var(--fs-4); margin-bottom: var(--s-5); color: var(--navy); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-4); }
.field label { font-family: var(--font-head); font-size: var(--fs-7); font-weight: 600; color: var(--navy); }
.req { color: var(--steel-ink); }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--field-line); border-radius: var(--r-ctl);
  background: var(--white); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.4;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #687284; }
.field input:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(60, 111, 176, .3); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #8A4B00; }
.field .err { font-size: var(--fs-7); color: #8A4B00; }
.hp { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Honeypot: für Menschen und Screenreader unsichtbar */
.hp label, .hp input { display: block; width: 1px; }
.form__legal { font-size: var(--fs-8); line-height: 1.5; color: var(--muted); margin-top: var(--s-2); }
.form__legal a { color: var(--steel-ink); }
.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-5); }
.form__status { font-size: var(--fs-7); color: var(--slate); }
/* Hinweis nach fehlgeschlagenem Senden (index.html?formular=fehler#form-alert). Mit JavaScript blendet main.js
   ihn ein; ohne JavaScript zeigt ihn die Sprungmarke (:target) – sticht das [hidden] { … !important } oben aus. */
.no-js .form__alert:target { display: block !important; }
.form__alert { margin-bottom: var(--s-5); padding: var(--s-4) var(--s-5); border-left: 3px solid #8A4B00; background: #FBF1E4; color: var(--ink); font-size: var(--fs-7); line-height: 1.5; }
.form__alert strong { display: block; margin-bottom: 2px; font-family: var(--font-head); font-size: var(--fs-6); color: #6E3C00; }
.form__alert a { color: var(--steel-ink); font-weight: 600; white-space: nowrap; }
.form__alert:focus-visible { outline-offset: 2px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: var(--on-navy); padding-top: var(--s-8); font-size: var(--fs-7); border-top: 1px solid var(--line-navy); }
.site-footer__grid { row-gap: var(--s-7); }
.site-footer__brand { grid-column: 1 / span 4; }
.site-footer__brand p { margin-top: var(--s-4); max-width: 34ch; line-height: 1.55; }
.site-footer__col:nth-child(2) { grid-column: 5 / span 3; }
.site-footer__col:nth-child(3) { grid-column: 8 / span 3; }
.site-footer__col:nth-child(4) { grid-column: 11 / span 2; }
.site-footer h2 { font-size: var(--fs-8); letter-spacing: .08em; text-transform: uppercase; color: var(--sky); margin-bottom: var(--s-4); }
.site-footer address, .site-footer__col p { line-height: 1.7; }
.site-footer__col p { margin-top: var(--s-3); }
.site-footer ul li + li { margin-top: 8px; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-8); padding-block: var(--s-5); border-top: 1px solid var(--line-navy); font-size: var(--fs-8); }
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.site-footer__bottom ul li + li { margin-top: 0; }
/* Links mitten im Fließtext (schmaler Fuß der Unterseiten: Telefon, E-Mail) nicht nur über die Farbe
   unterscheiden (WCAG 1.4.1) – dauerhaft unterstrichen */
.site-footer__bottom p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site-footer__bottom p a:hover { text-decoration-thickness: 2px; }

/* Unterseite „So arbeiten wir“ */
.sec-titles .page-title { font-size: var(--fs-1); line-height: 1.04; letter-spacing: -.028em; max-width: 18ch; }
.phase__bar h2 { font-size: var(--fs-5); line-height: 1.2; letter-spacing: -.005em; color: var(--white); }
.sec-titles .page-intro { margin-top: var(--s-5); max-width: 60ch; color: var(--slate); }
.btn--light { background: var(--white); color: var(--navy); }
.btn--light:hover { background: var(--mist-2); }
.quality__cta { align-items: center; gap: var(--s-6); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line-navy); }
.site-footer--slim { padding-top: 0; }
.site-footer--slim .site-footer__bottom { margin-top: 0; border-top: 0; }

/* ---------- Rechtsseiten, Danke- und 404-Seite ----------
   Kopf wie die Abschnittsköpfe der Startseite (Marke links, Titel rechts), darunter Zeilen mit
   Haarlinie: Überschrift in Spalte 1–3, Text in Spalte 4–10. Footer auch bei kurzem Inhalt unten. */
.page-legal { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.page-legal > main { flex: 1 0 auto; }
.legal { padding-block: var(--sec-pad); }
.legal .sec-head { margin-bottom: var(--s-7); }
.sec-num .icon { width: 14px; height: 14px; stroke-width: 2.25; }
.legal__lead { margin-top: var(--s-5); max-width: 60ch; color: var(--slate); }
.legal__actions { margin-top: var(--s-6); align-items: center; gap: var(--s-4) var(--s-6); }
/* Abschlusslinks unter den Zeilen: in der Textspalte */
.legal__end > .legal__actions { grid-column: 4 / -1; margin-top: var(--s-6); }

.legal__sec { border-top: 1px solid var(--line); padding-block: var(--s-6); row-gap: var(--s-4); }
.legal__sec:last-of-type { border-bottom: 1px solid var(--line); }
.legal__sec > h2 { grid-column: 1 / span 3; font-size: var(--fs-5); line-height: 1.3; letter-spacing: -.01em; }
.legal__num { display: block; margin-bottom: 6px; font-size: var(--fs-8); font-weight: 600; letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.legal__text { grid-column: 4 / span 7; min-width: 0; color: var(--slate); }
.legal__text > * + * { margin-top: var(--s-4); }
.legal__text h3 { font-size: var(--fs-6); line-height: 1.35; color: var(--navy); }
.legal__text * + h3 { margin-top: var(--s-6); }
.legal__text h3 + * { margin-top: var(--s-2); }
.legal__text strong { color: var(--ink); }
.legal__text a:not(.btn):not(.link-arrow) { color: var(--steel-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal__text a:not(.btn):not(.link-arrow):hover { color: var(--navy); text-decoration-thickness: 2px; }
.legal__text ul > li { position: relative; padding-left: 22px; }
.legal__text ul > li + li { margin-top: var(--s-2); }
.legal__text ul > li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 6px; height: 6px; background: var(--steel); }
.legal__text .meta { font-size: var(--fs-7); color: var(--muted); }

/* Übersicht (Datenschutz): Sprungmarken in zwei Spalten */
.legal__toc ol { columns: 2; column-gap: var(--gap); }
.legal__toc li { break-inside: avoid; padding-bottom: var(--s-2); }
.legal__text.legal__toc a:not(.btn):not(.link-arrow) { display: inline-flex; gap: 10px; color: var(--navy); text-decoration: none; }
.legal__text.legal__toc a:not(.btn):not(.link-arrow):hover { color: var(--steel-ink); text-decoration: underline; text-decoration-thickness: 1px; }
.legal__toc span { min-width: 2ch; color: var(--muted); font-size: var(--fs-7); font-variant-numeric: tabular-nums; line-height: 1.75; }

/* Hervorgehobener Kasten (z. B. Widerspruchsrecht, Art. 21 Abs. 4 DSGVO: getrennt von anderen Informationen) */
.legal__note { border-left: 3px solid var(--navy); background: var(--mist); padding: var(--s-5); }
.legal__note > * + * { margin-top: var(--s-3); }

/* Bildnachweis */
.credits > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s-4); }
.credits .meta { justify-self: end; text-align: right; }

/* Nächste Schritte (Danke-Seite) – Nummern im Pfeilfeld wie auf der Startseite */
.legal__steps > li { display: flex; gap: var(--s-4); align-items: flex-start; }
.legal__steps > li + li { margin-top: var(--s-4); }
.legal__steps .sec-num { flex: none; width: 40px; padding: 0 0 0 10px; margin-top: 1px; }
.legal__steps .is-done .sec-num { background: var(--steel); }
.legal__steps strong { display: block; font-family: var(--font-head); color: var(--navy); }

/* Linkliste (404) */
.legal__links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: var(--s-4) var(--s-7); }
.legal__text .legal__links > li { padding-left: 0; }
.legal__text .legal__links > li + li { margin-top: 0; }
.legal__text .legal__links > li::before { content: none; }

/* Platzhalter im Fließtext – vor der Veröffentlichung ersetzen */
.ph--text { display: inline; white-space: normal; padding: 1px 6px; font-family: inherit; font-size: inherit; letter-spacing: 0; line-height: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

@media (min-width: 1180px) {
  .legal__links { grid-template-columns: repeat(3, minmax(0, max-content)); }
}
@media (max-width: 1179px) {
  .legal__text { grid-column: 4 / -1; }
}
@media (max-width: 899px) {
  .legal__sec > h2, .legal__text, .legal__end > .legal__actions { grid-column: 1 / -1; }
  .legal__sec { row-gap: var(--s-3); padding-block: var(--s-5); }
}
@media (max-width: 639px) {
  .legal__toc ol { columns: 1; }
  .legal__links { grid-template-columns: minmax(0, 1fr); }
  .credits > li { grid-template-columns: minmax(0, 1fr); }
  .credits .meta { justify-self: start; text-align: left; }
  .legal__actions .btn { width: 100%; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1179px) {
  .hero__head, .hero__body { grid-column: 1 / span 7; }
  .hero__media { grid-column: 8 / -1; height: auto; align-self: center; background: none; }
  .hero__motif { height: clamp(300px, 34vw, 400px); }
  .hero__motif img { object-position: 40% 50%; }
  .hero__index { position: static; width: auto; }
  /* Vertrauensleiste 2 × 2, damit die Aussagen nicht in schmale Spalten umbrechen */
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust li:nth-child(3) { padding-left: 0; border-left: 0; }
  .trust li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .problem { grid-column: span 6; }
  .problems__outro p { grid-column: 1 / span 8; }
  .problems__outro .link-arrow { grid-column: 9 / span 4; }
  .ops__title { grid-column: 1 / span 4; }
  .ops__text { grid-column: 5 / span 8; padding-top: 2px; }
  .ops__list strong { font-size: var(--fs-6); }
  .step h3 { font-size: var(--fs-6); }
  .survey__intro { grid-column: 1 / span 8; }
  .survey__fig { grid-column: 1 / -1; }
  .stance__media { grid-column: 1 / span 5; }
  .estimate__canvas { padding: 24px 24px 0; }
  .promises { grid-column: 6 / span 7; }
  .phase__bar { --notch: 14px; gap: 10px; padding-right: calc(var(--notch) + 10px); }
  .phase__bar h3, .phase__bar h2 { font-size: var(--fs-7); }
  .phase__bar .icon { display: none; }
  .anda__text { grid-column: 1 / span 6; }
  .anda__shot { grid-column: 7 / -1; }
  .anda__shot figcaption { flex-direction: column; }
  .anda .btn-row .btn { flex: 1 1 auto; }
  .bridge__head { grid-column: 1 / span 6; }
  .bridge__text { grid-column: 7 / span 6; }
  .about__text { grid-column: 7 / span 6; }
  .contact__ways, .next { grid-column: 1 / span 5; }
  .form { grid-column: 6 / -1; }
  .site-footer__brand { grid-column: 1 / span 12; }
  .site-footer__col:nth-child(2) { grid-column: 1 / span 4; }
  .site-footer__col:nth-child(3) { grid-column: 5 / span 4; }
  .site-footer__col:nth-child(4) { grid-column: 9 / span 4; }
}

@media (max-width: 899px) {
  .grid, .pillars, .sectors { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sec-index { grid-column: 1 / -1; }
  .sec-titles { grid-column: 1 / -1; }
  /* Mobil/Tablet: Bild als ruhiger Streifen direkt unter dem Kopf, dann Headline, Text, Buttons */
  .hero { padding-top: 0; }
  .hero__grid { grid-template-rows: none; row-gap: var(--s-5); }
  .hero__head, .hero__body, .hero__media { grid-column: 1 / -1; grid-row: auto; }
  .hero__media { order: -1; margin-bottom: var(--s-3); }
  .hero__head { padding-top: 0; order: 0; }
  .hero__body { order: 1; padding-bottom: 0; }
  .hero__lead { margin-top: 0; }
  .hero__media { margin-inline: calc(-1 * var(--gutter)); }
  .hero__motif { height: auto; aspect-ratio: 16 / 9; }
  .hero__motif img { object-position: 50% 40%; }
  .hero__index { display: none; }
  .problem { grid-column: span 3; }
  .problems__outro p, .problems__outro .link-arrow { grid-column: 1 / -1; justify-self: start; }
  /* Säulen untereinander, innen zweispaltig: Text links, Punkte rechts */
  .pillars { grid-template-rows: none; }
  .pillar, .pillar--product { grid-column: 1 / -1; grid-row: auto; grid-template-rows: none; grid-template-columns: subgrid; column-gap: var(--gap); padding: var(--s-6) 0 var(--s-7); }
  .pillar > * { grid-column: 1 / span 3; }
  .pillar .ticks { grid-column: 4 / -1; grid-row: 1 / span 5; margin: 0; }
  .pillar + .pillar::before { left: 0; right: 0; top: 0; bottom: auto; border-left: 0; border-top: 1px solid var(--line); }
  .pillar.pillar--product { padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ops__title, .ops__text { grid-column: 1 / -1; }
  .ops__text { padding-top: 0; }
  .ops__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-6); }
  .steps { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; }
  .step { grid-row: auto; grid-template-rows: none; grid-template-columns: 72px minmax(0, 1fr); column-gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--line); }
  .step:last-child { border-bottom: 1px solid var(--line); }
  .step__bar, .step:first-child .step__bar { grid-row: 1 / span 2; width: 64px; height: 32px; margin: 2px 0 0; padding-left: 14px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
  .step h3 { grid-column: 2; margin-top: 0; font-size: var(--fs-5); }
  .step p { grid-column: 2; max-width: var(--measure); }
  .survey__intro, .survey__fig { grid-column: 1 / -1; }
  /* Ist-Aufnahme senkrecht */
  .flow { flex-direction: column; padding-bottom: var(--s-5); max-width: 480px; }
  .flow__step, .flow__step + .flow__step, .flow__step--break { margin-left: 0 !important; flex: none; }
  .flow__step + .flow__step { margin-top: 6px; }
  .flow__step + .flow__step::after { content: ""; position: absolute; left: 24px; top: -6px; height: 6px; border-left: 2px solid var(--line-strong); }
  .flow__step--break { margin-top: 30px !important; }
  .flow__step--break::after { display: none; }
  .flow__node { height: 36px; padding-left: 16px !important; }
  .flow__node::before, .flow__node::after, .flow__step:first-child .flow__node::before, .flow__step:first-child .flow__node::after { clip-path: none; }
  .flow__step--break::before { left: 24px; top: -30px; width: 0; height: 30px; border-top: 0; border-left: 2px dashed var(--steel); }
  .flow__gap { top: -25px; left: 40px; transform: none; padding-top: 0; }
  .flow__gap::before { display: none; }
  .flow__note { margin-left: 0; }
  .statement { max-width: 18ch; }
  .stance__media { grid-column: 1 / -1; }
  .estimate__canvas { padding: 32px 32px 0; }
  .promises { grid-column: 1 / -1; }
  /* Qualität: Phasen untereinander */
  .phases { grid-template-columns: 1fr; grid-template-rows: none; row-gap: var(--s-7); }
  .phase { grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); align-items: start; }
  .phase__bar, .phase:nth-child(n) .phase__bar { grid-column: 1 / -1; clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%); padding-left: 20px; margin-right: 0; }
  .phase__bar h3, .phase__bar h2 { font-size: var(--fs-6); }
  .phase__bar .icon { display: block; }
  .phase__why { grid-column: 1 / -1; }
  .phase__list { grid-column: 1; }
  .pills, .phase__proof { grid-column: 2; margin-top: var(--s-4); }
  .anda__grid { row-gap: var(--s-6); }
  .anda__text { grid-column: 1 / -1; }
  .anda__shot { grid-column: 1 / -1; order: -1; }
  .bridge__head, .bridge__text { grid-column: 1 / -1; }
  .bridge__text { padding-top: 0; }
  .sectors { grid-template-rows: none; row-gap: var(--s-8); }
  .sector { grid-column: span 3; grid-row: auto; display: flex; flex-direction: column; }
  .sector__focus { margin-top: auto; }
  .sector .tags { margin-bottom: var(--s-5); }
  .about__media, .about__text { grid-column: 1 / -1; }
  .faq-aside { grid-column: 1 / -1; order: 2; padding-top: 0; }
  .faq { grid-column: 1 / -1; }
  .contact__grid { grid-template-rows: none; }
  .contact__ways, .next, .form { grid-column: 1 / -1; grid-row: auto; }
  .site-footer__col:nth-child(2) { grid-column: 1 / span 6; }
  .site-footer__col:nth-child(3) { grid-column: 1 / span 3; }
  .site-footer__col:nth-child(4) { grid-column: 4 / span 3; }
}

@media (max-width: 639px) {
  :root { --fs-6: 1rem; }
  .grid, .pillars, .sectors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero__motif { aspect-ratio: 2 / 1; }
  .hero__motif img { object-position: 50% 38%; }
  .display { letter-spacing: -.025em; }
  .hero__sub { margin-top: var(--s-4); }
  .hero__lead { font-size: var(--fs-6); line-height: 1.6; }
  .hero .btn-row { margin-top: var(--s-5); }
  .hero .btn-row .btn { width: 100%; }
  .eyebrow { letter-spacing: .02em; margin-bottom: var(--s-3); text-wrap: balance; }
  .eyebrow::before { display: none; }
  /* Vertrauensleiste kompakt 2 × 2 */
  .trust { margin-top: var(--s-6); }
  .trust li, .trust li + li { flex-direction: column; gap: 8px; padding: 16px 12px 16px 0; font-size: var(--fs-8); }
  .trust li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .trust strong { font-size: var(--fs-7); }
  .problems { row-gap: var(--s-5); }
  .problem { grid-column: 1 / -1; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s-4); }
  .problem .icon { grid-row: 1 / span 2; margin: 0; }
  .problem p { grid-column: 2; }
  .pillar, .pillar--product, .pillar.pillar--product { display: flex; flex-direction: column; }
  .pillar, .pillar.pillar--product { padding-block: var(--s-5) var(--s-6); }
  .pillar .ticks { margin: var(--s-4) 0 var(--s-5); }
  .pillar .ticks li:nth-child(n+3) { display: none; }
  .pillar--product .ticks { display: none; } /* steht ausführlich im AnDa-Abschnitt */
  .pillar--product .pillar__text { margin-bottom: var(--s-5); }
  .pillar__kicker { margin-bottom: var(--s-4); }
  .pillar__link { align-self: flex-start; }
  /* Leistungen aus einer Hand als Liste: Symbol links, Text rechts */
  .ops__list { grid-template-columns: 1fr; row-gap: 0; border-top: 1px solid var(--line-navy); }
  .ops__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: var(--s-4); padding: var(--s-4) 0; border-top: 0; border-bottom: 1px solid var(--line-navy); }
  .ops__list .icon { grid-row: 1 / span 2; margin: 0; }
  .ops__list strong { font-size: var(--fs-6); }
  .ops__list span { margin-top: 2px; max-width: none; }
  .ops--light .ops__list, .ops--light .ops__list li { border-color: var(--line-strong); }
  .ops__cta { margin-top: var(--s-6); padding-top: 0; border-top: 0; }
  .ops__cta .btn { width: 100%; }
  .step { grid-template-columns: 56px minmax(0, 1fr); }
  .step__bar, .step:first-child .step__bar { width: 48px; height: 28px; padding-left: 12px; }
  .flow__note { flex-basis: 100%; }
  .promises { grid-template-columns: 1fr; }
  .promise { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s-4); padding: var(--s-5) 0; }
  .promise:nth-child(n+2) { border-top: 1px solid var(--line); }
  .promise .icon { grid-row: 1 / span 2; }
  .promise h3 { margin-top: 0; font-size: var(--fs-5); }
  .phase { display: flex; flex-direction: column; align-items: stretch; }
  .phase__list { width: 100%; }
  .pills, .phase__proof { margin-top: var(--s-4); }
  /* Vorgangskette senkrecht: Pfeilschiene links (wie die Zeitachse), Beschriftung rechts */
  .chain { --notch: 5px; grid-template-columns: 1fr; margin-top: var(--s-5); }
  .chain li, .chain li:not(:first-child) { padding: 4px 0 4px 30px; font-size: var(--fs-7); line-height: 1.4; }
  .chain li::before { left: 0; right: auto; top: 0; bottom: -3px; width: 14px; height: auto; clip-path: polygon(0 0, 50% var(--notch), 100% 0, 100% calc(100% - var(--notch)), 50% 100%, 0 calc(100% - var(--notch))); }
  .chain li:first-child::before { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), 50% 100%, 0 calc(100% - var(--notch))); }
  .chain li:last-child::before { bottom: 0; right: auto; }
  .anda .btn-row .btn { width: 100%; }
  .browser__bar { height: 28px; padding: 0 10px; }
  .browser__dots i { width: 7px; height: 7px; }
  .browser__url { display: none; }
  .browser img { aspect-ratio: 1000 / 908; } /* Ausschnitt für schmale Bildschirme; Platz schon vor dem Laden reservieren */
  .sector { grid-column: 1 / -1; }
  .sector__media { aspect-ratio: 2 / 1; margin-bottom: var(--s-5); }
  .next__more { display: none; }
  .next__list li { padding: 8px 0; align-items: center; }
  .next__num { margin-top: 0; }
  .tags { gap: 6px; margin-top: var(--s-4); }
  .tags li { padding: 3px 9px; font-size: var(--fs-8); }
  /* Fakten 2 × 2 */
  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .facts > div { grid-template-columns: 1fr; gap: 2px; align-content: start; }
  .about__media img { aspect-ratio: 2 / 1; }
  .estimate__canvas { padding: 16px 16px 0; }
  .faq__body { padding-right: 0; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .form { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .form .btn { width: 100%; }
  .site-footer__brand, .site-footer__col:nth-child(2) { grid-column: 1 / -1; }
  /* Footer-Navigation doppelt das Menü im (stehenden) Kopf – auf dem Telefon entfällt sie */
  .site-footer__col:nth-child(3), .site-footer__col:nth-child(4) { display: none; }
  .site-footer { padding-top: var(--s-7); }
  .site-footer__grid { row-gap: var(--s-5); }
  .site-footer__bottom { flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }
}

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