/* =========================================================================
   CONSENERSPA — Design-System
   Editorial-Corporate. Typografie, Raster, Diagramme statt Bildmaterial.
   Aufbau der Datei:
     1  Schriften
     2  Gestaltungs-Tokens
     3  Grundlagen / Reset
     4  Raster und Container
     5  Typografische Bausteine
     6  Bewegung (Reveal-System)
     7  Navigation
     8  Sektionen der Startseite
     9  Diagramme und interaktive Bausteine
    10  Footer
    11  Unterseiten-Bausteine
    12  Responsives Verhalten
   ========================================================================= */

/* -------------------------------------------------------------------------
   1  Schriften — lokal eingebettet, keine externen Verbindungen (DSGVO)
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/newsreader-var.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plex-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-mono-500.woff2') format('woff2');
}

/* -------------------------------------------------------------------------
   2  Gestaltungs-Tokens
   ------------------------------------------------------------------------- */

:root {
  /* Grundfarben ------------------------------------------------------- */
  --paper: #f5f3ee; /* Off-White, Papierton */
  --paper-2: #e4e0d5; /* abgesetzte Fläche — deutlich genug, um beim Scrollen als eigenes Band zu lesen */
  --paper-warm: #f3e8da; /* warmes Band, Spanien und Atempausen */
  --ink: #14171a; /* Anthrazit, Fließtext und Headlines */
  --ink-2: #3a4045; /* Sekundärtext */
  --ink-3: #5b6268; /* Tertiärtext — erfüllt AA auf allen drei hellen Bändern */
  --deep: #0b2b31; /* tiefes Petrol, dunkle Sektionen */
  --deep-2: #123a41; /* Aufhellung innerhalb dunkler Sektionen */

  /* Kompetenzfarben — sehr sparsam einsetzen -------------------------- */
  --c-consulting: #14606b;
  --c-energie: #4a6a3c;
  --c-spanien: #9c4529;

  /* Linien und Flächen ------------------------------------------------ */
  --line: rgba(20, 23, 26, 0.16);
  --line-soft: rgba(20, 23, 26, 0.08);
  --line-dark: rgba(245, 243, 238, 0.18);
  --line-dark-soft: rgba(245, 243, 238, 0.09);

  /* Schriftfamilien --------------------------------------------------- */
  --f-display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia,
    serif;
  --f-sans: 'Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    sans-serif;
  --f-mono: 'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Fluide Typo-Skala ------------------------------------------------- */
  --t-hero: clamp(2.6rem, 1rem + 6.4vw, 6.75rem);
  --t-h1: clamp(2.2rem, 1.1rem + 4.4vw, 4.75rem);
  --t-h2: clamp(1.7rem, 1.05rem + 2.6vw, 3.1rem);
  --t-h3: clamp(1.3rem, 1.1rem + 0.85vw, 1.9rem);
  --t-h4: clamp(1.1rem, 1.02rem + 0.4vw, 1.35rem);
  --t-lead: clamp(1.1rem, 1rem + 0.55vw, 1.45rem);
  --t-body: clamp(1rem, 0.975rem + 0.14vw, 1.075rem);
  --t-small: 0.9rem;
  --t-label: 0.72rem;
  --t-numeral: clamp(4rem, 2rem + 9vw, 11rem); /* Sektionsnummern */

  /* Abstände ---------------------------------------------------------- */
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
  --section-y: clamp(4.5rem, 2rem + 9vw, 10.5rem);
  --max: 1560px;

  /* Bewegung ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* weiches Ausschwingen */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-quick: cubic-bezier(0.32, 0.72, 0, 1);
  --d-fast: 160ms;
  --d-base: 260ms;
  --d-slow: 720ms;
}

/* -------------------------------------------------------------------------
   3  Grundlagen
   ------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dl {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--deep);
  color: var(--paper);
}

:focus-visible {
  outline: 2px solid var(--c-consulting);
  outline-offset: 3px;
  border-radius: 1px;
}

.dark :focus-visible {
  outline-color: #7fd4c8;
}

/* Nur für Screenreader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-110%);
  transition: transform var(--d-fast) var(--ease-quick);
}
.skip-link:focus {
  transform: translateY(0);
}

/* -------------------------------------------------------------------------
   4  Raster und Container
   ------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 12-Spalten-Raster, bewusst asymmetrisch bespielt */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: clamp(3rem, 1.5rem + 5vw, 6rem);
}

/* Dunkle Sektionen */
.dark {
  background: var(--deep);
  color: var(--paper);
}
.dark .rule,
.dark hr {
  background: var(--line-dark);
}
.dark .label {
  color: rgba(245, 243, 238, 0.62);
}
.dark .lead,
.dark .body-2 {
  color: rgba(245, 243, 238, 0.78);
}

.ink-bg {
  background: var(--ink);
  color: var(--paper);
}

.warm-bg {
  background: var(--paper-warm);
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  width: 100%;
}

/* -------------------------------------------------------------------------
   5  Typografische Bausteine
   ------------------------------------------------------------------------- */

.label {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
}

.display {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-variation-settings: 'opsz' 36;
}

.display--hero {
  font-size: var(--t-hero);
  line-height: 0.99;
  letter-spacing: -0.028em;
  font-variation-settings: 'opsz' 72;
}

.display--h1 {
  font-size: var(--t-h1);
}
.display--h2 {
  font-size: var(--t-h2);
  line-height: 1.06;
}
.display--h3 {
  font-size: var(--t-h3);
  line-height: 1.16;
  letter-spacing: -0.012em;
  font-variation-settings: 'opsz' 20;
}

/* Sans-Headline für sachliche Zwischenebenen */
.head-sans {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: var(--t-h4);
  letter-spacing: -0.011em;
  line-height: 1.3;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.body-2 {
  color: var(--ink-2);
  text-wrap: pretty;
}

.small {
  font-size: var(--t-small);
  line-height: 1.55;
}

.mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

.measure {
  max-width: 62ch;
}
.measure-narrow {
  max-width: 46ch;
}

/* Textlink mit Unterstreichung, die beim Hover durchläuft */
.link {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--d-base) var(--ease-out),
    opacity var(--d-fast) linear;
}
.link:hover {
  background-size: 0% 1px;
  background-position: 100% 100%;
  opacity: 0.7;
}

/* Buttons — bewusst kantig, keine Pillen, keine Verläufe */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--f-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  padding: 0.95em 1.5em;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--d-base) var(--ease-quick);
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--d-base) var(--ease-quick);
  z-index: 0;
}
.btn > * {
  position: relative;
  z-index: 1;
}
.btn:hover {
  color: var(--ink);
}
.btn:hover::after {
  transform: scaleY(1);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost::after {
  background: var(--ink);
}
.btn--ghost:hover {
  color: var(--paper);
}

.dark .btn {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.dark .btn::after {
  background: var(--deep);
}
.dark .btn:hover {
  color: var(--paper);
}
.dark .btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--line-dark);
}
.dark .btn--ghost::after {
  background: var(--paper);
}
.dark .btn--ghost:hover {
  color: var(--deep);
}

/* Pfeil, der beim Hover leicht mitläuft */
.btn .arrow {
  display: inline-block;
  transition: transform var(--d-base) var(--ease-out);
}
.btn:hover .arrow {
  transform: translateX(3px);
}

/* -------------------------------------------------------------------------
   6  Bewegung — ausschließlich transform und opacity
   ------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--d-slow) var(--ease-out),
    transform var(--d-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Zeilenweiser Aufbau großer Headlines */
.reveal-lines .line {
  display: block;
  overflow: hidden;
}
.reveal-lines .line > span {
  display: block;
  transform: translate3d(0, 110%, 0);
  transition: transform 900ms var(--ease-out);
  transition-delay: var(--line-delay, 0ms);
}
.reveal-lines.is-in .line > span {
  transform: none;
}

/* Linien, die beim Erscheinen aufziehen */
.rule-draw {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-out);
}
.rule-draw.is-in {
  transform: scaleX(1);
}

/* SVG-Pfade zeichnen sich */
.draw-path {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1400ms var(--ease-inout);
  transition-delay: var(--reveal-delay, 0ms);
}
.is-in .draw-path,
.draw-path.is-in {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  .reveal-lines .line > span,
  .rule-draw {
    opacity: 1 !important;
    transform: none !important;
  }
  .draw-path {
    stroke-dashoffset: 0 !important;
  }
}

/* -------------------------------------------------------------------------
   7  Navigation
   ------------------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.1) blur(10px);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-base) linear,
    background var(--d-base) linear;
}
.site-head.is-stuck {
  border-bottom-color: var(--line-soft);
}

.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 72px;
}

/* Wortmarke: CONS / ENER / SPA typografisch getrennt */
.wordmark {
  text-decoration: none;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}
.wordmark span {
  transition: color var(--d-base) var(--ease-out);
}
.wordmark .w-c {
  color: var(--ink);
}
.wordmark .w-e {
  color: var(--ink);
}
.wordmark .w-s {
  color: var(--ink);
}
.wordmark:hover .w-c {
  color: var(--c-consulting);
}
.wordmark:hover .w-e {
  color: var(--c-energie);
}
.wordmark:hover .w-s {
  color: var(--c-spanien);
}
.wordmark .w-rest {
  color: var(--ink-3);
  font-weight: 400;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.2rem + 1.6vw, 2.25rem);
}
/* Die Textlinks der Navigation — der CTA am Ende ist bewusst
   ausgenommen, sonst überschreibt diese Regel seine helle Schrift. */
.nav a:not(.nav-cta) {
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--ink-2);
  position: relative;
  padding-block: 0.35rem;
  transition: color var(--d-fast) linear;
}
.nav a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--d-base) var(--ease-quick);
}
.nav a:not(.nav-cta):hover,
.nav a:not(.nav-cta)[aria-current='page'] {
  color: var(--ink);
}
.nav a:not(.nav-cta):hover::after,
.nav a:not(.nav-cta)[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Gespräch vereinbaren — kehrt sich beim Überfahren um */
.nav .nav-cta {
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--ink);
  padding: 0.6em 1.1em;
  border: 1px solid var(--line);
  transition: background var(--d-base) var(--ease-out),
    color var(--d-base) var(--ease-out), border-color var(--d-base) linear;
}
.nav .nav-cta:hover,
.nav .nav-cta:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
/* Auf der Kontaktseite ist der CTA die aktuelle Seite — dauerhaft gefüllt */
.nav .nav-cta[aria-current='page'] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.burger {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--d-base) var(--ease-quick),
    opacity var(--d-fast) linear;
}
.burger span + span {
  margin-top: 6px;
}
.burger[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.burger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--paper);
  z-index: 99;
  padding: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transform: translate3d(0, -8px, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease-quick),
    transform var(--d-base) var(--ease-quick);
  overflow-y: auto;
}
.mobile-nav.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mobile-nav a {
  text-decoration: none;
  font-family: var(--f-display);
  font-size: 2rem;
  line-height: 1.35;
  border-bottom: 1px solid var(--line-soft);
  padding-block: 0.5rem;
}

/* -------------------------------------------------------------------------
   8  Sektionen der Startseite
   ------------------------------------------------------------------------- */

/* --- Hero ---------------------------------------------------------- */
.hero {
  padding-top: clamp(3rem, 1rem + 6vw, 7rem);
  padding-bottom: clamp(2.5rem, 1rem + 4vw, 5rem);
  position: relative;
}

.hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding-bottom: 1.25rem;
  flex-wrap: wrap;
}

.hero__title {
  margin-top: clamp(1.5rem, 0.5rem + 3vw, 3.25rem);
}

.hero__body {
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: start;
  row-gap: 2rem;
}

.hero__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* Hero mit Bild: Foto rechts, nach links weich in den Papierton auslaufend.
   Einzige Ausnahme von der Regel „keine Bilder" — auf ausdrücklichen Wunsch
   des Kunden, siehe docs/entscheidungen.md. Text bleibt in den linken sieben
   Spalten, damit nichts über dem Motiv steht. */
/* =========================================================================
   Titelbereich mit Motiv
   Aufteilung: Das Bild füllt den oberen Bereich über die volle Breite. Links
   läuft es weich ins Papier, damit die Überschrift darin steht. Der Fließtext
   sitzt darunter auf Papier — er liegt nicht auf dem Bild.
   ========================================================================= */

.hero--bild {
  position: relative;
  padding-top: 0;
  padding-bottom: clamp(2.5rem, 1rem + 4vw, 5rem);
}

.hero--bild > * {
  position: relative;
  z-index: 1;
}

/* --- Das Motiv ---------------------------------------------------------- */

.hero__bild {
  position: absolute;
  z-index: 0;
  top: 0;
  /* Bündig mit dem rechten Rand der Inhaltsspalte, nicht mit dem Fensterrand.
     Solange das Fenster schmaler ist als --max, ist der Wert 0 und das Motiv
     läuft wie bisher bis an die Fensterkante. Auf breiten Monitoren bleibt es
     dagegen an der Textspalte hängen, statt allein in die rechte Ecke zu
     wandern. */
  right: max(0px, (100vw - var(--max)) / 2);
  /* Der Rahmen hat exakt das Seitenverhältnis des Ausschnitts. Dadurch
     beschneidet object-fit nichts mehr — die drei Personen stehen vollständig
     im Bild, einschließlich der Füße. Das Motiv wird dafür kleiner, nicht
     enger. */
  height: var(--motiv-hoehe);
  width: calc(var(--motiv-hoehe) * var(--motiv-verhaeltnis));
  pointer-events: none;
}

.hero--bild {
  /* Höhe des Motivs — bestimmt zugleich, wo die Papierfläche darunter beginnt.
     Die Breite ergibt sich daraus über das Seitenverhältnis des Ausschnitts
     (1440 : 924). */
  --motiv-hoehe: clamp(17rem, 39vw, 36rem);
  --motiv-verhaeltnis: 1.558;
}

.hero__bild img {
  width: 100%;
  height: 100%;
  /* Verhältnis von Rahmen und Bild ist gleich — es wird nichts beschnitten. */
  object-fit: cover;
  object-position: 50% 50%;
  /* Weiche Kante als Smoothstep. Eine lineare Rampe knickt am oberen Ende ab —
     genau dort sieht das Auge eine Kante. Die Kurve laeuft tangential aus. */
  -webkit-mask-image: linear-gradient(to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.028) 2.2%,
    rgba(0, 0, 0, 0.104) 4.4%,
    rgba(0, 0, 0, 0.216) 6.6%,
    rgba(0, 0, 0, 0.352) 8.8%,
    rgba(0, 0, 0, 0.5) 11%,
    rgba(0, 0, 0, 0.648) 13.2%,
    rgba(0, 0, 0, 0.784) 15.4%,
    rgba(0, 0, 0, 0.896) 17.6%,
    rgba(0, 0, 0, 0.972) 19.8%,
    rgba(0, 0, 0, 0.997) 22%,
    rgba(0, 0, 0, 1) 24%);
          mask-image: linear-gradient(to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.028) 2.2%,
    rgba(0, 0, 0, 0.104) 4.4%,
    rgba(0, 0, 0, 0.216) 6.6%,
    rgba(0, 0, 0, 0.352) 8.8%,
    rgba(0, 0, 0, 0.5) 11%,
    rgba(0, 0, 0, 0.648) 13.2%,
    rgba(0, 0, 0, 0.784) 15.4%,
    rgba(0, 0, 0, 0.896) 17.6%,
    rgba(0, 0, 0, 0.972) 19.8%,
    rgba(0, 0, 0, 0.997) 22%,
    rgba(0, 0, 0, 1) 24%);
}



/* --- Kopfbereich: Labels und Überschrift liegen im Motiv ---------------- */

.hero__kopf {
  min-height: var(--motiv-hoehe);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.hero--bild .hero__meta {
  display: block;
  margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}
.hero--bild .hero__meta .label {
  display: block;
  color: var(--ink-2);
}
.hero--bild .hero__meta .label + .label {
  margin-top: 0.35rem;
}

.hero--bild .hero__title {
  max-width: 15ch;
  font-size: clamp(2.1rem, 0.9rem + 3.1vw, 4.1rem);
  margin: 0;
}

/* --- Textfläche unter dem Motiv ----------------------------------------- */

.hero__unten {
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.hero--bild .hero__body {
  row-gap: 2rem;
  align-items: start;
}

.hero--bild .hero__spalte-a {
  grid-column: 3 / span 3;
}
.hero--bild .hero__spalte-b {
  grid-column: 6 / span 4;
}
.hero--bild .hero__actions {
  grid-column: 10 / span 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 0;
}
.hero--bild .hero__actions .btn {
  justify-content: space-between;
}

.hero--bild .triad {
  margin-top: clamp(3rem, 1.5rem + 4vw, 5.5rem);
}

@media (max-width: 1100px) {
  .hero--bild {
    /* Flacher, damit der breitere Rahmen die Ueberschrift nicht erreicht. */
    --motiv-hoehe: 36vw;
  }
  .hero--bild .hero__spalte-a {
    grid-column: 1 / span 6;
  }
  .hero--bild .hero__spalte-b {
    grid-column: 7 / span 6;
  }
  .hero--bild .hero__actions {
    grid-column: 1 / span 12;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .hero--bild .hero__actions .btn {
    justify-content: center;
  }
}

@media (max-width: 760px) {
  /* Auf dem Handy wird das Motiv als Ganzes gezeigt — über die volle Breite,
     ohne weiche Kante. Die Überschrift steht negativ weiß darin; ein Verlauf
     dunkelt von unten ab, damit Weiß auf dem hellen Rasen trägt.

     Die kleinen Labels stehen auf Papier ÜBER dem Bild. Im Motiv lagen sie
     auf hellem Himmel bei 1,19 : 1 und waren nicht lesbar. */
  .hero--bild {
    --motiv-hoehe: 96vw;
    --label-raum: 5.4rem;
  }
  .hero__bild {
    left: 0;
    right: 0;
    width: auto;
    top: var(--label-raum);
    height: var(--motiv-hoehe);
  }
  .hero__bild img {
    /* Etwas nach links gerückt, damit der Bildausschnitt trotz des breiteren
       Motivs derselbe bleibt wie zuvor. */
    object-position: 52% 50%;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero__bild::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(11, 43, 49, 0.02) 0%,
      rgba(11, 43, 49, 0.12) 26%,
      rgba(11, 43, 49, 0.46) 50%,
      rgba(11, 43, 49, 0.76) 74%,
      rgba(11, 43, 49, 0.9) 100%);
  }
  .hero__kopf {
    min-height: calc(var(--label-raum) + var(--motiv-hoehe));
    justify-content: flex-start;
    padding-top: 1.5rem;
    padding-bottom: clamp(1.25rem, 1rem + 2vw, 2rem);
  }
  .hero--bild .hero__meta {
    margin-bottom: 0;
  }
  .hero--bild .hero__meta .label {
    color: var(--ink-2);
  }
  .hero--bild .hero__title {
    color: var(--paper);
    max-width: none;
    margin-top: auto;
    font-size: clamp(1.75rem, 1.1rem + 3.4vw, 2.4rem);
  }
  .hero__ki {
    top: calc(var(--label-raum) + var(--motiv-hoehe) + 0.5rem);
  }
  .hero__unten {
    padding-top: clamp(2rem, 1.5rem + 3vw, 3rem);
  }
  .hero--bild .hero__spalte-a,
  .hero--bild .hero__spalte-b,
  .hero--bild .hero__actions {
    grid-column: 1 / -1;
  }
  .hero--bild .hero__actions {
    flex-direction: column;
  }
}

/* Die drei Felder als typografische Zeile unter dem Hero */
.triad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  margin-top: clamp(3rem, 1.5rem + 4vw, 5.5rem);
}
.triad__item {
  padding: 1.5rem 0 0;
  border-right: 1px solid var(--line-soft);
  padding-right: 1.5rem;
  text-decoration: none;
  display: block;
  position: relative;
  transition: opacity var(--d-base) var(--ease-out);
}
.triad__item:last-child {
  border-right: 0;
}
.triad__item::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--tri-color, var(--ink));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms var(--ease-out);
}
.triad__item:hover::before {
  transform: scaleX(1);
}
.triad__word {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.25rem);
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 0.4rem;
}
.triad__word b {
  font-weight: 600;
  color: var(--tri-color, var(--ink));
}
.triad__word i {
  font-style: normal;
  color: var(--ink-3);
  font-weight: 400;
}
.triad__desc {
  color: var(--ink-2);
  font-size: 0.95rem;
  max-width: 34ch;
}

/* --- Herausforderung: die fünf Fragen ------------------------------- */
.qlist {
  border-top: 1px solid var(--line);
  margin-top: 2.5rem;
}
.qlist li {
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 0.5rem + 2vw, 3rem);
  padding-block: clamp(0.9rem, 0.6rem + 0.8vw, 1.5rem);
  transition: padding-left var(--d-base) var(--ease-out);
}
.qlist li:hover {
  padding-left: 0.75rem;
}
.qlist .qnum {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  color: var(--ink-3);
  flex: 0 0 auto;
  letter-spacing: 0.1em;
}
.qlist .qtext {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 0.95rem + 1.1vw, 2rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
}

/* --- Kompetenzfeld-Kapitel ------------------------------------------ */
.chapter__head {
  align-items: end;
  padding-bottom: clamp(2rem, 1rem + 2.5vw, 3.5rem);
  row-gap: 1.5rem;
}

.numeral {
  font-family: var(--f-mono);
  font-size: var(--t-numeral);
  line-height: 0.8;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--num-color, var(--line));
  display: block;
  font-variant-numeric: tabular-nums;
}

.chapter__kicker {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.chapter__kicker .dot {
  width: 7px;
  height: 7px;
  background: var(--num-color, var(--ink));
  flex: 0 0 auto;
}

/* Leistungsbausteine — Listenzeilen statt Karten */
.offer {
  border-top: 1px solid var(--line);
}
.dark .offer {
  border-top-color: var(--line-dark);
}
.offer__row {
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  column-gap: var(--gutter);
  row-gap: 0.5rem;
  padding-block: clamp(1.35rem, 0.9rem + 1.4vw, 2.35rem);
  position: relative;
}
.dark .offer__row {
  border-bottom-color: var(--line-dark-soft);
}
.offer__row::before {
  content: '';
  position: absolute;
  left: calc(var(--gutter) * -0.5);
  right: calc(var(--gutter) * -0.5);
  top: 0;
  bottom: 0;
  background: var(--paper-2);
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-out);
  z-index: -1;
}
.offer__row:hover::before {
  opacity: 0.55;
}
.dark .offer__row::before {
  background: var(--deep-2);
}
.offer__title {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
}
.offer__title .idx {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.dark .offer__title .idx {
  color: rgba(245, 243, 238, 0.5);
}

/* Aussagesatz, der die Sektion trägt */
.statement {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

/* --- Arbeitsweise: fünf Schritte ------------------------------------ */
.steps {
  counter-reset: step;
  border-top: 1px solid var(--line);
}
.step {
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.35fr);
  column-gap: var(--gutter);
  row-gap: 0.4rem;
  padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.75rem);
  align-items: baseline;
}
/* Zweispaltige Variante ohne eigene Überschrift — nur Nummer und Text.
   Bewusst als Klasse und nicht per style-Attribut, damit die
   Media Queries weiter unten sie überhaupt überschreiben können. */
.step--compact {
  grid-template-columns: 3.5rem minmax(0, 1fr);
}

.step__num {
  font-family: var(--f-mono);
  font-size: 0.95rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  position: relative;
}
.step__num::after {
  content: '';
  position: absolute;
  left: 0;
  top: -0.15rem;
  width: 2.25rem;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.step.is-in .step__num::after {
  transform: scaleX(1);
}

/* --- Netzwerk-Kompetenzmatrix --------------------------------------- */
.matrix {
  display: grid;
  /* Bewusst 3x3 — eine Matrix soll wie eine Matrix aussehen */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}
.matrix__cell {
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  padding: clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
  background: transparent;
  text-align: left;
  cursor: pointer;
  position: relative;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  transition: background var(--d-base) var(--ease-out);
}
.matrix__cell::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
}
.matrix__cell:hover,
.matrix__cell:focus-visible,
.matrix__cell[aria-pressed='true'] {
  background: var(--deep-2);
}
.matrix__cell:hover::after,
.matrix__cell[aria-pressed='true']::after {
  transform: scaleX(1);
}
.matrix__name {
  font-weight: 500;
  font-size: 1.02rem;
}
.matrix__count {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  color: rgba(245, 243, 238, 0.5);
  letter-spacing: 0.1em;
}

.matrix__detail {
  border: 1px solid var(--line-dark);
  border-top: 0;
  padding: clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
  min-height: 140px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--gutter);
  align-items: start;
}
.matrix__detail > * {
  transition: opacity var(--d-base) var(--ease-out),
    transform var(--d-base) var(--ease-out);
}
.matrix__detail.is-swapping > * {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
}

/* --- Referenz-Cases -------------------------------------------------- */
.cases {
  border-top: 1px solid var(--line);
}
.case {
  border-bottom: 1px solid var(--line-soft);
  padding-block: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: var(--gutter);
  row-gap: 1.25rem;
}
.case__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1.5rem var(--gutter);
  margin-top: 1.25rem;
}
.case__fact dt {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.4rem;
}
.case__fact dd {
  margin: 0;
  font-size: 0.98rem;
  color: var(--ink-2);
}

/* --- Testimonials ---------------------------------------------------- */
.quotes {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  column-gap: var(--gutter);
  row-gap: 2.5rem;
  align-items: start;
}
.quote__text {
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 1rem + 2.1vw, 2.75rem);
  line-height: 1.16;
  letter-spacing: -0.018em;
  text-wrap: pretty;
  min-height: 4.2em;
}
.quote__fade {
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.quote__fade.is-out {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
}
.quote__meta {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Initialen-Signet statt Portraitfoto */
.sig {
  --sig-size: 56px;
  width: var(--sig-size);
  height: var(--sig-size);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  font-family: var(--f-mono);
  font-size: calc(var(--sig-size) * 0.3);
  letter-spacing: 0.06em;
  opacity: 0.9;
}

.quote__nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-top: 1px solid var(--line-dark);
}
.quote__navbtn {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-dark-soft);
  padding: 0.9rem 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--d-base) var(--ease-out),
    padding-left var(--d-base) var(--ease-out);
}
.quote__navbtn:hover {
  opacity: 0.85;
  padding-left: 0.5rem;
}
.quote__navbtn[aria-selected='true'] {
  opacity: 1;
}
.quote__navbtn .sig {
  --sig-size: 40px;
}
.quote__progress {
  height: 1px;
  background: var(--line-dark);
  margin-top: 1.25rem;
  position: relative;
  overflow: hidden;
}
.quote__progress i {
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: left;
}
.quote__progress i.run {
  animation: quoteRun var(--quote-dur, 8500ms) linear forwards;
}
@keyframes quoteRun {
  to {
    transform: scaleX(1);
  }
}

/* --- Wissensbereich --------------------------------------------------- */
.knowledge {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  border-top: 1px solid var(--line);
}
.kcard {
  grid-column: span 4;
  border-right: 1px solid var(--line-soft);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) var(--gutter)
    clamp(1.5rem, 1rem + 1.5vw, 2.5rem) 0;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  position: relative;
  transition: transform var(--d-base) var(--ease-out);
}
.kcard:last-child {
  border-right: 0;
}
.kcard--wide {
  grid-column: span 6;
}
.kcard--half {
  grid-column: span 6;
}
.kcard:hover {
  transform: translateY(-3px);
}
.kcard__cat {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kcard__title {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -0.014em;
}
.kcard--wide .kcard__title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
}
.kcard__foot {
  margin-top: auto;
  padding-top: 1.25rem;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  color: var(--ink-3);
  display: flex;
  gap: 1rem;
}

/* Format „5 Minuten für Geschäftsführer“ */
.fivemin {
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
  background: var(--paper-2);
}
.fivemin dl {
  display: grid;
  gap: 1.1rem;
}
.fivemin dt {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fivemin dd {
  margin: 0.25rem 0 0;
  color: var(--ink-2);
}

/* -------------------------------------------------------------------------
   9  Diagramme und interaktive Bausteine
   ------------------------------------------------------------------------- */

.diagram {
  width: 100%;
  height: auto;
  overflow: visible;
}
.diagram text {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.diagram .d-node {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}
.diagram .d-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.55;
}
.diagram .d-fill {
  fill: currentColor;
  opacity: 0.06;
}

/* Diagramme auf dem Handy: Die Zeichnungen sind 900–1000 Einheiten breit; auf
   350 Pixel skaliert wäre die Beschriftung unlesbar. Deshalb behalten sie eine
   Mindestbreite und lassen sich seitlich wischen; die Schrift wird etwas größer. */
@media (max-width: 700px) {
  :is(div, figure, section):has(> .diagram) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(50% - 50vw);
    padding-inline: 1.25rem;
    scrollbar-width: thin;
  }
  .diagram {
    min-width: 720px;
  }
  .diagram text {
    font-size: 13px;
  }
}

/* Prozessdarstellung Ist/Soll (Startseite): Übergaben brechen im Ist-Zustand ab,
   im Soll-Zustand verbinden sie sich und die Datenspur erscheint. */
.process-svg .p-break,
.process-svg .p-x,
.process-svg .p-manual,
.process-svg .p-join,
.process-svg .p-rail,
.process-svg .p-rail-label,
.process-svg .d-node {
  transition: opacity 520ms var(--ease-out), stroke 520ms var(--ease-out),
    fill-opacity 520ms var(--ease-out), stroke-dashoffset 900ms var(--ease-out);
}
.process-svg .p-join,
.process-svg .p-rail,
.process-svg .p-rail-label {
  opacity: 0;
}
.process-svg .p-rail {
  stroke-dasharray: 884;
  stroke-dashoffset: 884;
}
.process-svg[data-state='soll'] .p-break,
.process-svg[data-state='soll'] .p-x,
.process-svg[data-state='soll'] .p-manual {
  opacity: 0;
}
.process-svg[data-state='soll'] .p-join,
.process-svg[data-state='soll'] .p-rail,
.process-svg[data-state='soll'] .p-rail-label {
  opacity: 1;
}
.process-svg[data-state='soll'] .p-rail {
  stroke-dashoffset: 0;
}
.process-svg[data-state='soll'] .d-node {
  stroke: var(--c-consulting);
  fill: var(--c-consulting);
  fill-opacity: 0.08;
}
[data-process-note] {
  min-height: 3.2em;
  transition: opacity 260ms var(--ease-out);
}
[data-process-note].is-swapping {
  opacity: 0;
}

/* Fließende Energiepartikel auf den Leitungen */
.flow {
  stroke-dasharray: 3 9;
  animation: flowDash 2.4s linear infinite;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
.is-in .flow {
  opacity: 0.9;
}
@keyframes flowDash {
  to {
    stroke-dashoffset: -24;
  }
}
@media (prefers-reduced-motion: reduce) {
  .flow {
    animation: none;
    opacity: 0.55;
  }
}

/* Wirtschaftlichkeits-Balken */
.bars {
  display: grid;
  gap: 1.05rem;
  margin-top: 2rem;
}
.bar__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
}
.bar__track {
  height: 3px;
  background: var(--line-dark-soft);
  position: relative;
  overflow: hidden;
}
.bar__fill {
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1100ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.is-in .bar__fill {
  transform: scaleX(var(--val, 0.5));
}

/* Zähler */
.counter {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Prozess vorher/nachher */
.toggle-row {
  display: inline-flex;
  border: 1px solid var(--line);
  margin-top: 1.75rem;
}
.toggle-row button {
  background: none;
  border: 0;
  padding: 0.7em 1.2em;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--ink-3);
  transition: background var(--d-base) var(--ease-out),
    color var(--d-base) var(--ease-out);
}
.toggle-row button + button {
  border-left: 1px solid var(--line);
}
.toggle-row button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}

/* Aufklappbereich */
.disclosure {
  border-top: 1px solid var(--line-soft);
}
.disclosure__btn {
  width: 100%;
  background: none;
  border: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  text-align: left;
}
.disclosure__btn .plus {
  position: relative;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}
.disclosure__btn .plus::before,
.disclosure__btn .plus::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform var(--d-base) var(--ease-quick);
}
.disclosure__btn .plus::before {
  left: 0;
  top: 5.5px;
  width: 12px;
  height: 1px;
}
.disclosure__btn .plus::after {
  left: 5.5px;
  top: 0;
  width: 1px;
  height: 12px;
}
.disclosure__btn[aria-expanded='true'] .plus::after {
  transform: scaleY(0);
}
.disclosure__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-quick);
}
.disclosure__panel > div {
  overflow: hidden;
}
.disclosure__btn[aria-expanded='true'] + .disclosure__panel {
  grid-template-rows: 1fr;
}

/* -------------------------------------------------------------------------
   10  Footer
   ------------------------------------------------------------------------- */

.cta-final {
  padding-block: clamp(5rem, 2rem + 10vw, 12rem);
}

.site-foot {
  border-top: 1px solid var(--line-dark-soft);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  font-size: 0.92rem;
}
.foot-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 2.5rem var(--gutter);
}
.foot-cols h3 {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.6;
  margin-bottom: 1rem;
}
.foot-cols li + li {
  margin-top: 0.5rem;
}
.foot-cols a {
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--d-fast) linear;
}
.foot-cols a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.foot-bottom {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark-soft);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  opacity: 0.65;
}

/* -------------------------------------------------------------------------
   11  Unterseiten-Bausteine
   ------------------------------------------------------------------------- */

.page-head {
  padding-top: clamp(2.5rem, 1rem + 5vw, 6rem);
  padding-bottom: clamp(2rem, 1rem + 3vw, 4rem);
  border-bottom: 1px solid var(--line);
}

.crumbs {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.75rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.crumbs a {
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--ink);
}

.toc {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 0.7rem;
  align-content: start;
}
.toc a {
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--ink-3);
  border-left: 1px solid var(--line);
  padding-left: 0.9rem;
  transition: color var(--d-base) var(--ease-out),
    border-color var(--d-base) var(--ease-out);
}
.toc a:hover,
.toc a.is-active {
  color: var(--ink);
  border-left-color: var(--ink);
}

.prose h2 {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  margin-bottom: 1.25rem;
}
.prose h3 {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: var(--t-h4);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.prose p {
  color: var(--ink-2);
  max-width: 68ch;
  margin-bottom: 1.15rem;
  text-wrap: pretty;
}
.prose ul.ticks {
  margin: 1.25rem 0 1.75rem;
  display: grid;
  gap: 0.7rem;
  max-width: 68ch;
}
/* Gedankenstrich absolut positioniert statt als Grid-Spalte —
   so bleibt die Zeile auch bei <strong>, <a> oder gemischtem Inline-Inhalt heil. */
.prose ul.ticks li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-2);
}
.prose ul.ticks li::before {
  content: '—';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink-3);
}

.pullquote {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.3rem);
  line-height: 1.18;
  letter-spacing: -0.016em;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  margin-block: clamp(2.5rem, 2rem + 2vw, 4rem);
  text-wrap: balance;
}

.next-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  border-top: 1px solid var(--line);
}
.next-links a {
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem) var(--gutter)
    clamp(1.25rem, 1rem + 1.2vw, 2rem) 0;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: background var(--d-base) var(--ease-out);
}
.next-links a:hover {
  background: var(--paper-2);
}

/* Kontaktformular */
.field {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1.35rem;
}
.field label {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field input,
.field textarea,
.field select {
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.65rem 0;
  border-radius: 0;
  transition: border-color var(--d-base) var(--ease-out);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--c-consulting);
}
.field textarea {
  resize: vertical;
  min-height: 8rem;
}

/* -------------------------------------------------------------------------
   12  Spaltenzuweisungen und responsives Verhalten
   ------------------------------------------------------------------------- */

.col-1-6 {
  grid-column: 1 / span 6;
}
.col-1-7 {
  grid-column: 1 / span 7;
}
.col-1-8 {
  grid-column: 1 / span 8;
}
.col-1-12 {
  grid-column: 1 / span 12;
}
.col-1-4 {
  grid-column: 1 / span 4;
}
.col-1-5 {
  grid-column: 1 / span 5;
}
.col-4-9 {
  grid-column: 4 / span 9;
}
.col-5-8 {
  grid-column: 5 / span 8;
}
.col-6-7 {
  grid-column: 6 / span 7;
}
.col-7-6 {
  grid-column: 7 / span 6;
}
.col-8-5 {
  grid-column: 8 / span 5;
}
.col-9-4 {
  grid-column: 9 / span 4;
}

@media (max-width: 1080px) {
  .quotes {
    grid-template-columns: 1fr;
  }
  .fivemin {
    grid-template-columns: 1fr;
  }
  .matrix__detail {
    grid-template-columns: 1fr;
  }
  .kcard,
  .kcard--wide,
  .kcard--half {
    grid-column: span 6;
  }
}

@media (max-width: 900px) {
  .site-head__inner {
    height: 64px;
  }
  .mobile-nav {
    inset-block-start: 64px;
  }
  .nav,
  .nav-cta {
    display: none;
  }
  .burger {
    display: block;
  }
  .triad {
    grid-template-columns: 1fr;
  }
  .triad__item {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 1.5rem;
  }
  .triad__item:last-child {
    border-bottom: 0;
  }
  .offer__row,
  .case {
    grid-template-columns: 1fr;
  }
  .step,
  .step--compact {
    grid-template-columns: 3.5rem 1fr;
  }
  .step__text {
    grid-column: 2;
  }
  .kcard,
  .kcard--wide,
  .kcard--half {
    grid-column: span 12;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    padding-right: 0;
  }
  .col-1-6,
  .col-1-7,
  .col-1-8,
  .col-1-4,
  .col-1-5,
  .col-4-9,
  .col-5-8,
  .col-6-7,
  .col-7-6,
  .col-8-5,
  .col-9-4 {
    grid-column: 1 / span 12;
  }
  .toc {
    display: none;
  }
}

@media (max-width: 640px) {
  .matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .qlist li {
    flex-direction: column;
    gap: 0.35rem;
  }
  .step,
  .step--compact {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }
  .step__text,
  .step--compact .step__text {
    grid-column: 1;
  }
}

@media print {
  .site-head,
  .mobile-nav,
  .btn,
  .quote__nav {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* -------------------------------------------------------------------------
   14  Wissensbereich: Kategorienfilter, Formularmeldungen, Fehlerseite
   ------------------------------------------------------------------------- */

/* Filterzeile — Textschalter, keine Pillen */
.cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  align-items: baseline;
  padding-block: 1.25rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cat-filter {
  background: none;
  border: 0;
  padding: 0.25rem 0;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  position: relative;
  transition: color var(--d-base) var(--ease-out);
}
.cat-filter::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--d-base) var(--ease-quick);
}
.cat-filter:hover {
  color: var(--ink);
}
.cat-filter:hover::after,
.cat-filter[aria-pressed='true']::after {
  transform: scaleX(1);
  transform-origin: left;
}
.cat-filter[aria-pressed='true'] {
  color: var(--ink);
}

/* Ausgefilterte Karten verschwinden, ohne das Raster springen zu lassen */
.kcard.is-filtered {
  display: none;
}
.kcard {
  transition: opacity var(--d-base) var(--ease-out),
    transform var(--d-base) var(--ease-out);
}
.kcard.is-fading {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
}

/* Teamseite: die Trennlinie unter der Filterleiste übernimmt die erste Person */
[data-team-filters] {
  border-bottom: 0;
  padding-bottom: 0.75rem;
}

/* Teamseite: Personen werden mit denselben Klassen gefiltert wie die Karten */
.team-person {
  transition: opacity var(--d-base) var(--ease-out),
    transform var(--d-base) var(--ease-out);
}
.team-person.is-fading {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
}
.team-person.is-filtered {
  display: none;
}

/* Sparten einer Person — kleine Mono-Kennzeichnungen unter der Rolle */
.person__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin-top: 0.9rem;
}
.person__cat {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line);
  padding: 0.22rem 0.5rem;
}

/* Meldung, wenn ein Filter nichts trifft */
.filter-empty {
  grid-column: 1 / -1;
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  color: var(--ink-3);
}

/* Formularmeldungen */
.notice {
  border: 1px solid var(--line);
  border-left-width: 3px;
  padding: 1.1rem 1.35rem;
  margin-bottom: 2rem;
}
.notice--ok {
  border-left-color: var(--c-energie);
}
.notice--error {
  border-left-color: var(--c-spanien);
}
.notice h2,
.notice p {
  margin: 0;
}
.notice p + p {
  margin-top: 0.5rem;
}
.notice ul {
  margin: 0.5rem 0 0;
  display: grid;
  gap: 0.35rem;
}
.notice li::before {
  content: '— ';
  color: var(--ink-3);
}

/* Honigtopf gegen Formularroboter — für Menschen unsichtbar, kein display:none,
   damit einfache Prüfroutinen ihn trotzdem ausfüllen */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Fehlerseite */
.errorpage {
  min-height: 62vh;
  display: flex;
  align-items: center;
}
.errorcode {
  font-family: var(--f-mono);
  font-size: clamp(4rem, 2rem + 9vw, 10rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(20, 23, 26, 0.22);
  display: block;
}

/* Ausführliche Cases auf der Referenzseite: zwei breite Spalten statt vier
   schmaler — die Felder enthalten dort mehrere Sätze und brauchen Laufweite. */
.case--detail .case__facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem var(--gutter);
}
@media (max-width: 760px) {
  .case--detail .case__facts {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   15  Lesbarkeits-Bausteine
   Die Seiten tragen viel Fachsubstanz. Damit sie trotzdem schnell erfassbar
   bleiben, steht vor jedem längeren Abschnitt die Kernaussage, und der
   ausführliche Text rückt eine Ebene dahinter.
   ========================================================================= */

/* --- Kernaussage: was jemand mitnimmt, der nur diesen Block liest ------- */
.gist {
  border-top: 2px solid var(--gist-color, var(--ink));
  padding-top: clamp(1.25rem, 1rem + 1vw, 2rem);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
  align-items: start;
}
.gist__claim {
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -0.016em;
  text-wrap: balance;
  font-variation-settings: 'opsz' 32;
}
.gist__points {
  display: grid;
  gap: 0.85rem;
  counter-reset: gistpoint;
}
.gist__points li {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  align-items: baseline;
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.gist__points li::before {
  counter-increment: gistpoint;
  content: counter(gistpoint, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  color: var(--gist-color, var(--ink-3));
}
.dark .gist {
  border-top-color: var(--gist-color, var(--paper));
}
.dark .gist__points li {
  color: rgba(245, 243, 238, 0.78);
}

/* --- Vertiefung: der ausführliche Text, eine Ebene dahinter ------------- */
.deepdive {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-block: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.dark .deepdive {
  border-color: var(--line-dark);
}
.deepdive .disclosure__btn {
  padding-block: 1.25rem;
}
.deepdive__label {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}
.deepdive__label .mono {
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dark .deepdive__label .mono {
  color: rgba(245, 243, 238, 0.55);
}
.deepdive__body {
  padding-bottom: 2rem;
  max-width: 68ch;
}
.deepdive__body > *:first-child {
  margin-top: 0;
}
.deepdive__body p {
  margin-bottom: 1.1rem;
}
.dark .deepdive__body p {
  color: rgba(245, 243, 238, 0.78);
}

/* --- Kennzahlen: Struktur des Angebots in Ziffern ----------------------- */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.dark .figures {
  border-color: var(--line-dark);
}
.figure {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dark .figure {
  border-color: var(--line-dark);
}
.figure__value {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--figure-color, var(--ink));
}
.dark .figure__value {
  color: var(--figure-color, var(--paper));
}
.figure__label {
  font-weight: 500;
  font-size: 1rem;
  margin-top: 0.35rem;
}
.figure__note {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-3);
}
.dark .figure__note {
  color: rgba(245, 243, 238, 0.6);
}

/* --- Zäsur: ein Satz über die volle Breite, als Atempause --------------- */
.zaesur {
  padding-block: clamp(4rem, 2rem + 8vw, 9rem);
}
.zaesur__text {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
  max-width: 20ch;
}
.zaesur__note {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  max-width: 46ch;
}

/* --- Getönte Fläche als drittes Band ------------------------------------ */
.tint-bg {
  background: var(--paper-2);
}

/* --- Umschalter zwischen zwei Sichtweisen ------------------------------- */
.switch-panels > [data-switch-panel] {
  display: none;
}
.switch-panels > [data-switch-panel].is-active {
  display: block;
  animation: panelIn 420ms var(--ease-out) both;
}
@keyframes panelIn {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .switch-panels > [data-switch-panel].is-active {
    animation: none;
  }
}
.dark .toggle-row {
  border-color: var(--line-dark);
}
.dark .toggle-row button {
  color: rgba(245, 243, 238, 0.6);
}
.dark .toggle-row button + button {
  border-left-color: var(--line-dark);
}
.dark .toggle-row button[aria-pressed='true'] {
  background: var(--paper);
  color: var(--ink);
}

/* --- Selbsteinschätzung: ankreuzen, Einordnung erscheint ---------------- */
.checklist {
  border-top: 1px solid var(--line);
}
.dark .checklist {
  border-top-color: var(--line-dark);
}
.checklist__item {
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 1.05rem;
  cursor: pointer;
  transition: padding-left var(--d-base) var(--ease-out);
}
.dark .checklist__item {
  border-bottom-color: var(--line-dark-soft);
}
.checklist__item:hover {
  padding-left: 0.6rem;
}
.checklist__item input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  flex: 0 0 auto;
  border: 1px solid var(--ink-3);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background var(--d-fast) var(--ease-out),
    border-color var(--d-fast) var(--ease-out);
}
.dark .checklist__item input {
  border-color: rgba(245, 243, 238, 0.5);
}
.checklist__item input::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--paper);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 220ms var(--ease-quick);
}
.checklist__item input:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.dark .checklist__item input:checked {
  background: var(--paper);
  border-color: var(--paper);
}
.dark .checklist__item input::after {
  border-color: var(--ink);
}
.checklist__item input:checked::after {
  transform: rotate(45deg) scale(1);
}
.checklist__text {
  line-height: 1.5;
}

.checklist__result {
  margin-top: 1.75rem;
  padding: clamp(1.15rem, 1rem + 0.8vw, 1.75rem);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-left-color: var(--result-color, var(--ink));
  min-height: 5.5rem;
  transition: opacity var(--d-base) var(--ease-out);
}
.dark .checklist__result {
  border-color: var(--line-dark);
  border-left-color: var(--result-color, var(--paper));
}
.checklist__result.is-swapping {
  opacity: 0;
}
.checklist__count {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 0.6rem;
}
.dark .checklist__count {
  color: rgba(245, 243, 238, 0.55);
}

@media (max-width: 860px) {
  .gist {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}


/* -------------------------------------------------------------------------
   16  Bildmaterial und KI-Kennzeichnung
   Nach Art. 50 AI Act werden KI-erzeugte und KI-bearbeitete Darstellungen
   gekennzeichnet. Der Hinweis steht bewusst klein und ruhig — erkennbar,
   ohne das Bild zu stören. Der ausführliche Text steht im Impressum.
   ------------------------------------------------------------------------- */

.portraet {
  margin: 0;
  max-width: 220px;
}
.portraet img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.ki-hinweis {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ki-hinweis a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.ki-hinweis a:hover {
  color: var(--ink);
  border-bottom-color: currentColor;
}
.dark .ki-hinweis {
  color: rgba(245, 243, 238, 0.55);
}

/* Kennzeichnung am Titelmotiv — sitzt in der unteren Bildecke */
.hero__ki {
  position: absolute;
  /* Folgt der rechten Kante des Motivs — siehe .hero__bild */
  right: calc(var(--gutter) + max(0px, (100vw - var(--max)) / 2));
  /* Knapp unter dem Motiv auf Papier — dort ist der kleine Text sicher
     lesbar, ohne im Bild zu stören. Bezug ist die Unterkante des Motivs. */
  top: calc(var(--motiv-hoehe) + 0.55rem);
  z-index: 2;
  margin: 0;
}
@media (max-width: 760px) {
  .hero__ki {
    top: calc(var(--label-raum) + var(--motiv-hoehe) + 0.5rem);
  }
}