/* AI Værk — pages.css: Section-spezifische Styles pro Seite. 4/5 */

/* ── Hero ──────────────────────────────────────────────── */
/* Kein overflow:hidden — die Hover-Karten der Leiter-Badges ragen unten
   raus; die Trail-Badges clippt bereits .hero-badge-field selbst. */
.hero { position: relative; }
.hero-badge-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Top/bottom only — horizontal padding must stay the shell gutter. */
.hero-stage {
  padding-top: clamp(56px, 9vw, 96px);
  padding-bottom: clamp(48px, 7vw, 72px);
  position: relative;
  z-index: 1;
}

.hero-trail-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 2px 5px 3px;
  border-radius: 4px;
  background: var(--badge-color, var(--trail-sky));
  color: #171411;
  font-family: var(--font-brand);
  font-size: 11px;
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 2px 8px oklch(0.24 0.02 70 / 0.08);
  pointer-events: none;
  user-select: none;
}
.hero-badge-static {
  opacity: 0.72;
  transform: rotate(var(--badge-rot, 0deg));
}
.badge-static-1 { top: 14%; right: 4.5%; --badge-rot: -1.5deg; }
.badge-static-2 { top: 28%; right: 12%; --badge-rot: 1deg; }
.badge-static-3 { top: 42%; right: 3%; --badge-rot: -0.8deg; }
.badge-static-4 { top: 56%; right: 9%; --badge-rot: 1.4deg; }

.hero-trail-badge.is-live {
  opacity: 0;
  filter: blur(3px);
  transform: translate(var(--trail-enter-x, 0), var(--trail-enter-y, 4px)) scale(0.96);
  transition:
    opacity 140ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 140ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}
.hero-trail-badge.is-live.is-visible {
  opacity: 0.6;
  filter: blur(0);
  transform: translate(0, 0) scale(1);
}
/* Sparkle-Trail: der Cursor hinterlaesst kleine Æsterisken in den
   Pastelltoenen statt Wort-Labels. */
.hero-trail-spark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  line-height: 0;
}
.hero-trail-spark svg { display: block; }
.hero-trail-spark.is-live {
  opacity: 0;
  filter: blur(2px);
  transform: translate(var(--trail-enter-x, 0), var(--trail-enter-y, 4px)) rotate(calc(var(--spark-rot, 0deg) - 35deg)) scale(0.6);
  transition:
    opacity 160ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 160ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}
.hero-trail-spark.is-live.is-visible {
  opacity: 0.9;
  filter: blur(0);
  transform: translate(0, 0) rotate(var(--spark-rot, 0deg)) scale(1);
}
.hero-trail-spark.is-live.is-leaving {
  opacity: 0;
  filter: blur(1.5px);
  transform: translate(var(--trail-exit-x, 0), var(--trail-exit-y, -2px)) rotate(calc(var(--spark-rot, 0deg) + 25deg)) scale(0.75);
  transition:
    opacity 320ms cubic-bezier(0.55, 0, 1, 0.45),
    filter 320ms cubic-bezier(0.55, 0, 1, 0.45),
    transform 320ms cubic-bezier(0.55, 0, 1, 0.45);
}

.hero-trail-badge.is-live.is-leaving {
  opacity: 0;
  filter: blur(2.5px);
  transform: translate(var(--trail-exit-x, 0), var(--trail-exit-y, -2px)) scale(0.98);
  transition:
    opacity 300ms cubic-bezier(0.55, 0, 1, 0.45),
    filter 300ms cubic-bezier(0.55, 0, 1, 0.45),
    transform 300ms cubic-bezier(0.55, 0, 1, 0.45);
}
.hero-trail-mobile { display: none; }

@media (max-width: 1100px) {
  .hero-badge-static { display: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-badge-static { display: none; }
}
@media (max-width: 1100px) and (hover: none), (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  .hero-trail-mobile {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 18px;
    margin-top: 18px;
  }
  .hero-trail-mobile .hero-trail-badge {
    position: relative;
    opacity: 0.76;
  }
  .hero-trail-mobile ~ .range-list { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-trail-badge.is-live, .hero-trail-spark.is-live { display: none; }
}

.hero h1 {
  font-size: clamp(38px, 6.4vw, 76px);
  line-height: 1.05;
  font-weight: 570;
  letter-spacing: -0.028em;
  max-width: 920px;
}
/* Exactly two colour families: glacier blue and violet-pink. */
.glow-word {
  position: relative;
  display: inline-block;
}
.glow-word::before {
  content: "";
  position: absolute;
  inset: -0.12em -0.3em -0.22em;
  background:
    radial-gradient(58% 88% at 18% 56%, oklch(0.78 0.13 235 / 0.7), transparent 74%),
    radial-gradient(50% 86% at 52% 46%, oklch(0.91 0.07 225 / 0.72), transparent 76%),
    radial-gradient(42% 76% at 84% 56%, oklch(0.72 0.19 330 / 0.5), transparent 74%);
  filter: blur(0.16em);
  z-index: -1;
}
.glow-word::after {
  content: "";
  position: absolute;
  inset: 0.02em -0.1em -0.08em;
  background:
    radial-gradient(54% 68% at 30% 56%, oklch(0.84 0.1 235 / 0.46), transparent 70%),
    radial-gradient(44% 62% at 62% 48%, oklch(0.79 0.13 305 / 0.38), transparent 70%),
    radial-gradient(28% 54% at 88% 54%, oklch(0.84 0.16 350 / 0.42), transparent 70%);
  filter: blur(0.055em);
  z-index: -1;
}
.hero-sub { margin-top: 30px; max-width: 560px; }
.hero-sub .lede {
  font-family: var(--font-brand);
  font-size: clamp(19px, 2.2vw, 22px);
  font-weight: 520;
  letter-spacing: -0.012em;
}
.hero-sub .copy {
  margin-top: 12px;
  color: var(--stone);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Offering ladder — badges along a drawn path (desktop) */
.range-strip {
  position: relative;
  z-index: 4;
  margin-top: clamp(56px, 8vw, 90px);
  height: 190px;
}
.range-strip svg.path { position: absolute; inset: 0; width: 100%; height: 100%; }
.range-badge {
  position: absolute;
  font-size: 14px;
  font-weight: 520;
  line-height: 1;
  padding: 9px 15px 10px;
  border-radius: 9px;
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(33, 30, 26, 0.16),
    0 6px 16px rgba(33, 30, 26, 0.07);
  white-space: nowrap;
  text-decoration: none;
  transform: translate(-50%, calc(-100% - 14px)) rotate(var(--rot, 0deg));
}
.range-badge.below { transform: translate(-50%, 15px) rotate(var(--rot, 0deg)); }
.tone-lime { background: var(--lime); }
.tone-peach { background: var(--peach); }
.tone-sky { background: var(--sky); }
.tone-lilac-b { background: #e4d9ff; }
.tone-mint { background: var(--mint); }
/* Hover-Preview auf den Leiter-Badges: kleine Karte im Paper-Stil,
   gerade gestellt (Badge-Rotation wird neutralisiert), steigt sanft auf. */
.range-badge { cursor: pointer; }
.range-badge:hover { z-index: 6; }
.range-badge:focus-visible {
  z-index: 6;
  outline: 3px solid rgba(46, 90, 120, 0.35);
  outline-offset: 3px;
}
.badge-tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  width: 230px;
  padding: 12px 14px 13px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hairline);
  box-shadow: 0 2px 6px rgba(33, 30, 26, 0.06), 0 14px 34px rgba(33, 30, 26, 0.1);
  font-size: 12.5px;
  font-weight: 430;
  line-height: 1.5;
  color: var(--ink-soft);
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--tip-shift, -50%)) rotate(calc(var(--rot, 0deg) * -1)) translateY(6px);
  transition: opacity 0.22s var(--ease-exit), transform 0.28s var(--ease-exit);
  transition-delay: 0s;
}
.badge-tip-art {
  display: block;
  width: 100%;
  height: 26px;
  margin-bottom: 9px;
}
.tone-lime .badge-tip-art { color: #94af42; }
.tone-peach .badge-tip-art { color: #e08d4e; }
.tone-sky .badge-tip-art { color: #6fa3d8; }
.tone-lilac-b .badge-tip-art { color: #9d84d8; }
.tone-mint .badge-tip-art { color: #74b874; }
.range-badge.below .badge-tip { bottom: auto; top: calc(100% + 12px); transform: translateX(var(--tip-shift, -50%)) rotate(calc(var(--rot, 0deg) * -1)) translateY(-6px); }
.tip-edge-l .badge-tip { --tip-shift: -14%; }
.tip-edge-r .badge-tip { --tip-shift: -86%; }
.range-badge:hover .badge-tip,
.range-badge:focus-visible .badge-tip {
  opacity: 1;
  transform: translateX(var(--tip-shift, -50%)) rotate(calc(var(--rot, 0deg) * -1)) translateY(0);
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
  transition-delay: 0.12s;
}
@media (prefers-reduced-motion: reduce) {
  .badge-tip { transition: opacity 0.3s var(--ease); }
}

.range-note {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -26px;
  font-size: 13.5px;
  color: var(--stone);
  white-space: nowrap;
}
.range-list { display: none; }

@media (max-width: 800px) {
  .range-strip { display: none; }
  .range-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 40px;
  }
  .range-list li {
    list-style: none;
    font-size: 14px;
    font-weight: 520;
    line-height: 1;
    padding: 9px 14px 10px;
    border-radius: 9px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      0 1px 2px rgba(33, 30, 26, 0.14);
  }
  .range-list li .dot { display: none; }
  .range-list li a {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  .range-list li:has(a:focus-visible) {
    outline: 3px solid rgba(46, 90, 120, 0.35);
    outline-offset: 3px;
  }
  .range-list li:nth-child(1) { background: var(--lime); transform: rotate(-1.4deg); }
  .range-list li:nth-child(2) { background: var(--peach); transform: rotate(1deg); }
  .range-list li:nth-child(3) { background: var(--sky); transform: rotate(-0.8deg); }
  .range-list li:nth-child(4) { background: #dccdff; transform: rotate(1.2deg); }
  .range-list li:nth-child(5) { background: var(--mint); transform: rotate(-1deg); }
  .range-list .range-note-m {
    flex-basis: 100%;
    padding: 10px 0 0;
    background: none;
    box-shadow: none;
    transform: none;
    color: var(--stone);
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1.5;
  }
}

/* ── Ergebnis triad ────────────────────────────────────── */
.triad {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
}
.triad-item {
  padding-top: 22px;
  border-top: 1px solid var(--hairline-strong);
}
.triad-item .t-icon {
  color: var(--ink-soft);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(33, 30, 26, 0.1);
}
.triad-item:nth-child(1) .t-icon { background: var(--mint); }
.triad-item:nth-child(2) .t-icon { background: var(--peach); }
.triad-item:nth-child(3) .t-icon { background: var(--sky); }
.triad-item h3 {
  font-size: 19px;
  letter-spacing: -0.012em;
  max-width: 24ch;
}
.triad-item p {
  margin-top: 10px;
  font-size: 15px;
  color: var(--stone);
}
@media (max-width: 900px) {
  .triad { grid-template-columns: 1fr; gap: 28px; }
}

/* ── Wissensflow ───────────────────────────────────────── */
.flow-mobile-cta { display: none; }

.flow {
  margin-top: clamp(44px, 6vw, 64px);
  display: grid;
  grid-template-columns: minmax(240px, 300px) 64px minmax(240px, 290px) 64px minmax(280px, 1fr);
  align-items: center;
}

.doc-stack { position: relative; height: 440px; }
/* Document tiles — hero-palette plates with a real mini-preview page
   peeking out, instead of white cards with placeholder bars. */
.doc-tile {
  position: absolute;
  width: min(252px, 100%);
  background: var(--tile, var(--sky));
  border: 1px solid rgba(23, 20, 17, 0.1);
  border-radius: 14px;
  padding: 14px 16px 0;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.doc-tile .doc-title {
  display: flex; align-items: center; gap: 9px;
  font-weight: 560; font-size: 14.5px;
  font-family: var(--font-brand);
  color: var(--ink);
}
.doc-tile .doc-meta { margin-top: 3px; font-size: 12.5px; color: rgba(33, 30, 26, 0.62); line-height: 1.4; }
.doc-tile .doc-page {
  margin: 12px 10px 0;
  background: #fff;
  border-radius: 8px 8px 0 0;
  padding: 11px 12px 13px;
  min-height: 66px;
  box-shadow: 0 -2px 10px rgba(23, 20, 17, 0.07);
  display: grid;
  gap: 6px;
  align-content: start;
}
.pg-head { display: block; width: 44%; height: 6px; border-radius: 3px; background: var(--ink-soft); opacity: 0.72; }
.pg-line { display: block; height: 4px; border-radius: 2px; background: var(--paper-deep); }
.pg-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 2px; }
.pg-table i { display: block; height: 9px; border-radius: 2px; background: var(--paper-deep); border: 1px solid var(--hairline); }
.pg-check { display: flex; align-items: center; gap: 7px; }
.pg-check b {
  flex: none;
  width: 11px; height: 11px;
  border-radius: 3.5px;
  border: 1px solid var(--hairline-strong);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.pg-check.is-done b { background: var(--accent); border-color: var(--accent); }
.pg-check i { display: block; height: 4px; border-radius: 2px; background: var(--paper-deep); }
.pg-chart { display: flex; align-items: flex-end; gap: 4px; height: 38px; margin-top: 2px; }
.pg-chart i { flex: 1; border-radius: 2.5px 2.5px 0 0; background: var(--tile, var(--sky)); opacity: 0.85; }
.doc-tile.d1 { top: 0; left: 0; transform: rotate(-1.6deg); z-index: 1; }
.doc-tile.d2 { top: 132px; left: 26px; transform: rotate(0.9deg); z-index: 2; }
.doc-tile.d3 { top: 258px; left: 6px; transform: rotate(-0.8deg); z-index: 3; }

.flow-link { position: relative; height: 60px; }
.flow-link svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Converging strands — each source keeps its color until they meet. */
.flow-merge { align-self: stretch; height: auto; }
.flow-merge svg path, .flow-out svg path { opacity: 0.75; }

.engine {
  position: relative;
  z-index: 1;
  background: var(--dark);
  color: var(--card);
  border-radius: 18px;
  padding: 22px 20px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-card);
}
/* One breath of aurora in the kernel's far corner — ties it to the footer. */
.engine::after {
  content: "";
  position: absolute;
  right: -60px; bottom: -70px;
  width: 230px; height: 190px;
  background:
    radial-gradient(46% 54% at 62% 46%, oklch(0.68 0.14 330 / 0.34), transparent 70%),
    radial-gradient(42% 50% at 34% 64%, oklch(0.53 0.17 295 / 0.3), transparent 70%),
    radial-gradient(38% 46% at 76% 72%, oklch(0.62 0.07 170 / 0.22), transparent 70%);
  filter: blur(22px);
  pointer-events: none;
}
.engine .field {
  position: absolute; inset: 0;
  opacity: 0.35;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(90% 90% at 50% 40%, #000 25%, transparent 78%);
  mask-image: radial-gradient(90% 90% at 50% 40%, #000 25%, transparent 78%);
}
.engine h3 {
  position: relative;
  font-size: 18px;
  font-weight: 560;
  letter-spacing: -0.01em;
}
.engine-rows { position: relative; margin-top: 14px; display: grid; }
.engine-rows div {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(244, 241, 234, 0.84);
}
.engine-rows div + div { border-top: 1px solid rgba(244, 241, 234, 0.09); }
.engine-rows svg {
  flex: none;
  width: 24px; height: 24px;
  padding: 5px;
  border-radius: 7px;
  background: rgba(244, 241, 234, 0.08);
  box-shadow: inset 0 0 0 1px rgba(244, 241, 234, 0.07);
  color: #a8e0c2;
}

.qa-col { display: grid; gap: 20px; }
.q-bubble {
  justify-self: end;
  max-width: 300px;
  background: var(--accent-soft);
  border: 1px solid #d3e0d9;
  border-radius: 20px 20px 6px 20px;
  padding: 14px 19px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  box-shadow: 0 2px 10px rgba(33, 30, 26, 0.05);
}
.a-card .who { color: var(--accent); font-weight: 520; }
.q-bubble .who, .a-card .who {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--stone); margin-bottom: 6px;
}
.a-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 20px 20px 20px 6px;
  padding: 22px 24px 20px;
  box-shadow: var(--shadow-float);
  font-size: 15px;
  line-height: 1.62;
}
.a-card .who { margin-bottom: 10px; }
.a-card .who svg { color: var(--accent); }
/* Quiet emphasis: a soft accent wash for the key fact, a dotted underline
   for the cited rule — no boxes, no inverse pills. */
mark.hl {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 4px;
  padding: 0 4px 1px;
  font-weight: 560;
  white-space: nowrap;
}
mark.hl-border {
  background: transparent;
  color: var(--accent);
  font-weight: 560;
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.a-card .cites { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
/* Source tags — each cite carries its source tile's color. */
.cite {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 4px 11px 4px 7px;
}
.cite-dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 3px;
  background: var(--cite, var(--sky));
  box-shadow: inset 0 0 0 1px rgba(23, 20, 17, 0.12);
}
.cite svg { flex: none; color: var(--stone); }

.flow-notes {
  margin-top: clamp(40px, 6vw, 56px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 26px;
  border-top: 1px dashed var(--hairline-strong);
}
.flow-note { font-size: 14px; color: var(--stone); line-height: 1.55; }
.flow-note b {
  display: flex; align-items: center;
  color: var(--ink);
  font-weight: 560; margin-bottom: 4px;
  font-family: var(--font-brand);
}
/* Only the leading number is a chip — the second span carries the title text. */
.flow-note b span:first-child {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: var(--chip, var(--paper-deep));
  border: 1px solid rgba(23, 20, 17, 0.08);
  color: var(--ink); font-weight: 520; font-size: 12px;
  margin-right: 9px; font-variant-numeric: tabular-nums;
}
/* Station colors mirror the graphic: sources, kernel, question, answer. */
.flow-note:nth-child(1) b span:first-child { --chip: var(--sky); }
.flow-note:nth-child(2) b span:first-child { --chip: var(--mint); }
.flow-note:nth-child(3) b span:first-child { --chip: var(--accent-soft); }
.flow-note:nth-child(4) b span:first-child { background: #fff; border-color: var(--hairline-strong); }

@media (max-width: 1080px) {
  .flow {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 560px;
  }
  /* Stacked: strands become one quiet vertical connector. */
  .flow-link { height: 44px; width: auto; margin: 0; align-self: auto; }
  .flow-link svg { display: none; }
  .flow-link::before {
    content: "";
    position: absolute;
    left: 50%; top: 5px; bottom: 5px;
    width: 1.6px;
    transform: translateX(-50%);
    border-radius: 1px;
    background: linear-gradient(to bottom, var(--stone-faint), var(--hairline-strong));
  }
  .doc-stack { height: auto; display: grid; gap: 14px; }
  .doc-tile, .doc-tile.d1, .doc-tile.d2, .doc-tile.d3 {
    position: static;
    width: 100%;
    transform: none;
  }
  .doc-tile.d1 { transform: rotate(-0.6deg); }
  .doc-tile.d3 { transform: rotate(0.5deg); }
  .qa-col { max-width: 100%; }
  .flow-notes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .flow-notes { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 760px) {
  .wissensflow-section .flow,
  .wissensflow-section .flow-notes {
    display: none;
  }

  .flow-mobile-cta {
    display: flex;
    margin-top: 28px;
  }
}

/* ── Lösungsfelder ─────────────────────────────────────── */
.felder-grid {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.feld-card {
  grid-column: span 2;
  border-radius: 16px;
  padding: 25px 25px 23px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 190px;
  text-decoration: none;
  border: 1px solid var(--edge, var(--hairline-strong));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.feld-card.tone-sage { --edge: var(--sage-line); }
.feld-card.tone-slate { --edge: var(--slate-line); }
.feld-card.tone-sand { --edge: var(--sand-line); }
.feld-card.tone-clay { --edge: var(--clay-line); }
.feld-card.tone-lilac { --edge: var(--lilac-line); }
.feld-card:nth-child(4), .feld-card:nth-child(5) { grid-column: span 3; }
.feld-card:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 14px 30px rgba(33, 30, 26, 0.1);
}
.feld-card .feld-num {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  opacity: 0.55;
  margin-bottom: 2px;
}
.feld-card h3 {
  font-size: 18.5px;
  letter-spacing: -0.012em;
  max-width: 26ch;
}
.feld-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.feld-card .feld-more {
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.tone-sage { background: var(--sage); }
.tone-slate { background: var(--slate); }
.tone-sand { background: var(--sand); }
.tone-clay { background: var(--clay); }
.tone-lilac { background: var(--lilac); }

/* Glow-Nachzuenden: jede Karte traegt einen Bodenglow im eigenen
   Ton, der nach dem Landen von unten aufsteigt. Nummern faden
   als letztes ein. Delays erben den Reveal-Stagger der Karte. */
.feld-card { position: relative; isolation: isolate; overflow: hidden; }
.feld-card::before {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  z-index: -1;
  background: radial-gradient(92% 115% at 50% 110%, var(--feld-glow, transparent), transparent 74%);
  pointer-events: none;
}
.feld-card.tone-sage { --feld-glow: rgba(154, 196, 85, 0.3); }
.feld-card.tone-slate { --feld-glow: rgba(111, 163, 216, 0.28); }
.feld-card.tone-sand { --feld-glow: rgba(235, 154, 95, 0.26); }
.feld-card.tone-clay { --feld-glow: rgba(224, 122, 111, 0.24); }
.feld-card.tone-lilac { --feld-glow: rgba(157, 132, 216, 0.26); }
html.js .felder-grid[data-reveal] .feld-card::before {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.8s var(--ease), translate 0.8s var(--ease);
  transition-delay: calc(var(--reveal-delay, 0s) + 0.4s);
}
html.js .felder-grid[data-reveal] .feld-num {
  opacity: 0;
  transition:
    opacity 0.5s var(--ease) calc(var(--reveal-delay, 0s) + 0.7s),
    color 0.45s var(--ease);
}
html.js .felder-grid.is-revealed .feld-card::before { opacity: 1; translate: 0 0; }
html.js .felder-grid.is-revealed .feld-num { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
  html.js .felder-grid[data-reveal] .feld-card::before { opacity: 1; translate: 0 0; transition: none; }
  html.js .felder-grid[data-reveal] .feld-num { opacity: 0.55; transition: none; }
}
/* Nach dem Reveal braucht die Karte ihre volle Transition-Liste
   zurueck (die Gruppen-Regel ersetzt sie sonst komplett): Reveal-
   Properties behalten den Stagger, Hover-Properties laufen ohne
   Delay — sonst springt der Schatten und der Lift hinkt nach. */
html.js .felder-grid[data-reveal] > .feld-card {
  transition:
    opacity 0.55s var(--ease) var(--reveal-delay, 0s),
    transform 0.55s var(--ease) var(--reveal-delay, 0s),
    translate 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.feld-card:hover,
.feld-card:focus-visible { translate: 0 -3px; }

/* Hover: eigener Glow-Layer (::after) mit eigener Transition —
   getrennt vom Reveal-Layer, damit Ein- und Ausstieg ohne
   geerbte Delays sauber laufen. Der Glow steigt hoeher, die
   Nummer tritt hervor, der Pfeil rueckt an. */
.feld-card::after {
  content: "";
  position: absolute;
  inset: 12% 0 0;
  z-index: -1;
  background: radial-gradient(96% 120% at 50% 112%, var(--feld-glow, transparent), transparent 78%);
  opacity: 0;
  transition: opacity 0.55s var(--ease);
  pointer-events: none;
}
.feld-card:hover::after,
.feld-card:focus-visible::after { opacity: 1; }
.feld-card .feld-num { transition: color 0.45s var(--ease); }
.feld-card:hover .feld-num { color: var(--ink); }
.feld-card .feld-more svg { transition: transform 0.35s var(--ease); }
.feld-card:hover .feld-more svg { transform: translateX(3px); }

.felder-cta { margin-top: 28px; }

@media (max-width: 980px) {
  .felder-grid { grid-template-columns: 1fr 1fr; }
  .feld-card, .feld-card:nth-child(4), .feld-card:nth-child(5) { grid-column: span 1; min-height: 0; }
  .feld-card:last-child { grid-column: span 2; }
}
@media (max-width: 620px) {
  .felder-grid { grid-template-columns: 1fr; }
  .feld-card:last-child { grid-column: span 1; }
}

/* ── Arbeitsweise ──────────────────────────────────────── */
/* Arbeitsweise: der Titel wird zum Layout — zwei Pole, ein Rückgrat. */
.work-intro {
  margin-top: clamp(30px, 4vw, 44px);
  display: flex;
  align-items: center;
  gap: 20px;
}
.work-duo { display: flex; flex: none; }
.work-duo img {
  width: 92px; height: 92px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--hairline-strong);
}
.work-duo img:first-child { transform: rotate(-1.6deg); z-index: 1; }
.work-duo img:last-child { margin-left: -12px; transform: rotate(1.2deg); }
.work-statement {
  font-family: var(--font-brand);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 580;
  letter-spacing: -0.02em;
  line-height: 1.3;
  max-width: 34ch;
}
.work-caption { margin-top: 8px; font-size: 14px; color: var(--stone); }
.work-caption a { color: var(--accent); font-weight: 520; }
.poles {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 96px);
  position: relative;
}
/* Das Rückgrat zwischen den Polen. */
.poles::before {
  content: "";
  position: absolute;
  left: 50%; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--hairline-strong);
}
.pole-word {
  font-family: var(--font-brand);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 6px;
}
.pole-item { padding: 20px 0; }
.pole-item + .pole-item { border-top: 1px solid var(--hairline); }
.pole-item h4 { font-size: 18px; letter-spacing: -0.01em; font-weight: 560; }
.pole-item p {
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
}
@media (max-width: 800px) {
  .poles { grid-template-columns: 1fr; gap: 36px; }
  .poles::before { content: none; }
  .work-intro { flex-direction: column; align-items: flex-start; }
}

/* ── Case teaser / case page ───────────────────────────── */
.case-teaser {
  margin-top: clamp(32px, 5vw, 48px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.case-teaser h2 {
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.024em;
  line-height: 1.08;
}
.case-teaser .case-sub {
  display: block;
  font-weight: 380;
  color: var(--stone);
}
.case-teaser p { margin-top: 18px; color: var(--ink-soft); max-width: 50ch; }
.case-teaser .btn { margin-top: 26px; }
@media (max-width: 900px) {
  .case-teaser { grid-template-columns: 1fr; }
}

.case-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.case-rail {
  font-size: 15px;
  display: grid;
  gap: 13px;
  align-content: start;
  padding-top: 8px;
  position: sticky;
  top: 88px;
}
.case-rail a {
  color: var(--stone-faint);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.case-rail a:hover, .case-rail a.active { color: var(--ink); }
.case-rail a.active { font-weight: 560; }

.case-title {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 590;
  letter-spacing: -0.024em;
  line-height: 1.08;
}
.case-title-light { display: block; font-weight: 380; color: var(--stone); }
.case-lede {
  margin-top: 20px;
  font-size: 16.5px;
  color: var(--ink-soft);
  max-width: 600px;
}

.case-cols {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(28px, 5vw, 52px);
  margin-top: clamp(32px, 5vw, 48px);
  align-items: start;
}
.case-narrative p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.65; }
.case-narrative p + p { margin-top: 14px; }

.eng-map { display: grid; gap: 18px; align-content: start; }
.eng-group {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 16px;
  align-items: start;
}
.eng-group .g-label { font-size: 13px; color: var(--stone); padding-top: 6px; line-height: 1.4; }
.eng-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.eng-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-brand);
  font-size: 12.5px;
  font-weight: 540;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: var(--ink);
  padding: 5px 12px 6px;
  border-radius: 10px;
  border: 1px solid rgba(23, 20, 17, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.eng-chip.tone-sand { border-color: var(--sand-line, rgba(23,20,17,0.1)); }
.eng-chip.tone-sage { border-color: var(--sage-line, rgba(23,20,17,0.1)); }
.eng-chip.tone-slate { border-color: var(--slate-line, rgba(23,20,17,0.1)); }
.eng-chip.tone-clay { border-color: var(--clay-line, rgba(23,20,17,0.1)); }
/* CherryGate: eine dunkle Kachel mit Kirsch-Dot, kein Layer-Trick. */
.eng-chip.dark {
  background: var(--dark);
  color: var(--paper-deep);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.eng-chip.cherry::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-radius: 3px;
  background: var(--cherry);
}

.case-results {
  margin-top: clamp(36px, 6vw, 56px);
  border-top: 1px solid var(--hairline);
  padding-top: 34px;
}
.case-results h2, .case-block h2 { font-size: 21px; font-weight: 560; letter-spacing: -0.012em; }
/* Ergebnisse als Herzstueck: gross gesetzt, Ton-Marks statt Icons. */
.result-lines { margin-top: 26px; display: grid; max-width: 780px; }
.result-line {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  letter-spacing: -0.008em;
  color: var(--ink-soft);
  padding: 16px 0;
}
.result-line + .result-line { border-top: 1px solid var(--hairline); }
.result-line strong {
  font-weight: 540;
  color: var(--ink);
  border-radius: 4px;
  padding: 0 4px 1px;
}
/* Markierung als Gradient-Layer: kann sich wie ein Textmarker
   von links ueber den Begriff ziehen. */
.result-line strong {
  background-image: linear-gradient(var(--mark, transparent), var(--mark, transparent));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
}
.result-line:nth-child(1) strong { --mark: rgba(219, 231, 212, 0.75); }
.result-line:nth-child(2) strong { --mark: rgba(191, 226, 255, 0.55); }
.result-line:nth-child(3) strong { --mark: rgba(255, 207, 168, 0.55); }
.result-line:nth-child(4) strong { --mark: rgba(227, 218, 242, 0.7); }
.case-chap {
  display: block;
  font-family: var(--font-brand);
  font-size: 12.5px;
  font-weight: 560;
  letter-spacing: 0.01em;
  color: var(--stone-faint);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}

.case-block { margin-top: clamp(36px, 6vw, 56px); border-top: 1px solid var(--hairline); padding-top: 34px; }
.case-block p { margin-top: 14px; color: var(--ink-soft); max-width: 640px; }

@media (max-width: 900px) {
  .case-grid { grid-template-columns: 1fr; }
  .case-rail { position: static; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0 0 4px; }
  .case-cols { grid-template-columns: 1fr; }
  .eng-group { grid-template-columns: 1fr; gap: 8px; }
  .eng-group .g-label { padding-top: 0; }
}

/* ── Page headers (subpages) ───────────────────────────── */
/* Vertical rhythm only — never override the shell's horizontal gutters. */
.page-head {
  padding-top: clamp(48px, 8vw, 88px);
  padding-bottom: clamp(36px, 6vw, 64px);
}
.page-head h1 {
  font-size: clamp(32px, 5vw, 54px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  max-width: 20ch;
}
.page-head .sub {
  display: block;
  font-weight: 400;
  color: var(--stone);
}
.page-head .intro {
  margin-top: 22px;
  font-size: 16.5px;
  color: var(--ink-soft);
  max-width: 640px;
}

/* ── Lösungen: Rail + Flow ─────────────────────────────── */
.sol-layout {
  display: grid;
  grid-template-columns: 208px 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
.sol-rail {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 2px;
  padding-top: 6px;
}
.sol-rail a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 10px;
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 520;
  color: var(--stone);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.sol-rail a:hover { color: var(--ink); }
.sol-rail a.active { color: var(--ink); background: var(--paper-deep); font-weight: 580; }
.sol-num { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--stone-faint); }
.sol-rail a.active .sol-num { color: var(--accent); }
.sol-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.sol-dot.tone-sage { background: var(--sage); }
.sol-dot.tone-slate { background: var(--slate); }
.sol-dot.tone-sand { background: var(--sand); }
.sol-dot.tone-clay { background: var(--clay); }
.sol-dot.tone-lilac { background: var(--lilac); }

/* Chrome-Tab-Stack: alle Karten pinnen auf derselben Höhe; jede Karte
   trägt einen Nummern-Tab in ihrem eigenen Slot. Am Ende liegt eine Karte
   mit fünf sichtbaren Tabs, der aktive verschmilzt mit der Karte. Flach,
   nur Haarlinien — keine Schatten, die sich stapeln könnten. */
.sol-flow { display: block; }
.sol-item {
  --stack-i: 0;
  position: sticky;
  top: 80px;
  padding-top: 42px;
  scroll-margin-top: 80px;
  /* Der transparente Tab-Zeilen-Bereich späterer Karten darf Klicks auf
     frühere Tabs nicht schlucken. */
  pointer-events: none;
}
.sol-item .sol-tab,
.sol-item .sol-body { pointer-events: auto; }
.sol-item:nth-child(2) { --stack-i: 1; }
.sol-item:nth-child(3) { --stack-i: 2; }
.sol-item:nth-child(4) { --stack-i: 3; }
.sol-item:nth-child(5) { --stack-i: 4; }
.sol-tone-sage { --sol-tint: rgba(219, 231, 212, 0.5); }
.sol-tone-slate { --sol-tint: rgba(211, 224, 230, 0.5); }
.sol-tone-sand { --sol-tint: rgba(236, 227, 207, 0.55); }
.sol-tone-clay { --sol-tint: rgba(237, 219, 206, 0.5); }
.sol-tone-lilac { --sol-tint: rgba(227, 218, 242, 0.5); }
.sol-tone-sage .sol-tab { background-image: linear-gradient(0deg, rgba(219, 231, 212, 0.5), rgba(219, 231, 212, 0) 78%); }
.sol-tone-slate .sol-tab { background-image: linear-gradient(0deg, rgba(211, 224, 230, 0.5), rgba(211, 224, 230, 0) 78%); }
.sol-tone-sand .sol-tab { background-image: linear-gradient(0deg, rgba(236, 227, 207, 0.5), rgba(236, 227, 207, 0) 78%); }
.sol-tone-clay .sol-tab { background-image: linear-gradient(0deg, rgba(237, 219, 206, 0.5), rgba(237, 219, 206, 0) 78%); }
.sol-tone-lilac .sol-tab { background-image: linear-gradient(0deg, rgba(227, 218, 242, 0.5), rgba(227, 218, 242, 0) 78%); }
.sol-tab {
  position: absolute;
  top: 0;
  left: calc(20px + var(--stack-i) * 106px);
  width: 98px;
  height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--hairline-strong);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 580;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-decoration: none;
  z-index: 2;
  /* Unsichtbar, bis die eigene Karte oben andockt — die einlaufende Karte
     zeigt so nur ihre saubere Oberkante. */
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none !important;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background-color 0.25s var(--ease);
}
.sol-item.is-docked .sol-tab {
  opacity: 1;
  transform: none;
  pointer-events: auto !important;
}
.sol-tab:hover { background-color: var(--paper-deep); }
.sol-body {
  position: relative;
  background-color: #fff;
  /* Classy: ein Hauch des Feld-Tons, aus der Unterkante aufsteigend. */
  background-image: radial-gradient(130% 90% at 50% 112%, var(--sol-tint, transparent) 0%, transparent 60%);
  border: 1px solid var(--hairline-strong);
  border-radius: 18px;
  min-height: calc(100vh - 80px - 42px - 56px);
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.sol-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: clamp(22px, 3vh, 30px) clamp(24px, 3.2vw, 44px) 0;
}
.sol-head h2 { font-size: clamp(21px, 2.2vw, 27px); letter-spacing: -0.016em; }
.sol-lead { margin-left: auto; font-size: 14px; color: var(--stone); }
.sol-cols {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.15fr);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
  padding: clamp(16px, 2.5vh, 28px) clamp(24px, 3.2vw, 44px) clamp(24px, 3.5vh, 40px);
}
.sol-gfx { margin: 0; }
.sol-copy {
  font-size: clamp(15.5px, 1.5vw, 17px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: 18px;
}
/* Ergebnisse: ruhige Zeilen statt Häkchen-Liste. */
.sol-results { list-style: none; max-width: 54ch; display: grid; }
.sol-results li {
  padding: 10px 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.sol-results li + li { border-top: 1px solid var(--hairline); }

/* Fundament-Band */
.fund-grid {
  margin-top: clamp(30px, 4vw, 44px);
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 1fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.fund-diagram {
  position: relative;
  border: 1px solid var(--clay-line);
  border-radius: 20px;
  padding: 26px 22px 30px;
  background: linear-gradient(180deg, #fff 55%, rgba(244, 241, 234, 0.6));
}
.fund-lines { display: block; width: 100%; height: 84px; }
.fund-top { display: flex; justify-content: space-between; gap: 8px; }
.fund-base { display: flex; justify-content: center; }
.fund-node {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-brand);
  font-size: 13px;
  font-weight: 540;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 8px 12px 9px;
  box-shadow: 0 6px 16px rgba(33, 30, 26, 0.06);
  white-space: nowrap;
}
.fund-node:nth-child(1) { transform: rotate(-0.7deg); }
.fund-node:nth-child(2) { transform: rotate(0.4deg); }
.fund-node:nth-child(3) { transform: rotate(-0.4deg); }
.fund-slab {
  display: grid;
  justify-items: center;
  gap: 1px;
  width: min(78%, 300px);
  text-align: center;
  background: var(--sage);
  border: 1px solid var(--sage-line);
  border-radius: 12px;
  padding: 12px 18px 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 10px 24px rgba(33, 30, 26, 0.08);
}
.fund-slab b { font-family: var(--font-brand); font-weight: 580; font-size: 14.5px; letter-spacing: -0.01em; color: var(--ink); }
.fund-slab i { font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.fund-frame-label {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 520; color: var(--accent);
  background: #fff;
  border: 1px solid var(--clay-line);
  border-radius: 999px;
  padding: 6px 13px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(33, 30, 26, 0.08);
}
.fund-frame-label svg { color: var(--accent); }
.fund-ds h3 { font-size: 20px; letter-spacing: -0.012em; margin-bottom: 14px; }
.fund-ds ul { list-style: none; display: grid; }
.fund-ds li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 0;
  font-size: 15px; line-height: 1.5; color: var(--ink-soft);
}
.fund-ds li + li { border-top: 1px solid var(--hairline); }
.fund-icon {
  flex: none; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--accent-soft); color: var(--accent);
}
.fund-legal { margin-top: 16px; font-size: 12.5px; color: var(--stone); max-width: 52ch; }

@media (max-width: 900px) {
  .sol-layout { grid-template-columns: 1fr; }
  /* Mobil: normaler Fluss; die Rail wird zur klebenden Nummern-Zeile. */
  .sol-item { position: static; padding-top: 0; pointer-events: auto; }
  .sol-item + .sol-item { margin-top: 16px; }
  .sol-tab { display: none; }
  .sol-rail {
    position: sticky;
    top: 60px;
    z-index: 6;
    grid-auto-flow: column;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 0;
    margin: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    overflow-x: visible;
  }
  .sol-rail a { padding: 7px 12px; }
  .sol-rail .sol-label { display: none; }
  .sol-rail .sol-num { font-size: 14px; color: var(--stone); }
  .sol-rail a.active .sol-num { color: var(--accent); font-weight: 600; }
  .sol-body { border-radius: 18px; min-height: 0; }
  .sol-head { flex-wrap: wrap; }
  .sol-lead { margin-left: 0; width: 100%; }
  .sol-cols { grid-template-columns: 1fr; }
  .sol-gfx { margin-top: 22px; }
  .fund-grid { grid-template-columns: 1fr; }
}

/* ── Lösungen detail ───────────────────────────────────── */
.feld-detail {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(24px, 5vw, 64px);
  padding: clamp(32px, 5vw, 48px) 0;
  border-top: 1px solid var(--hairline);
}
.feld-detail:first-of-type { border-top: 0; padding-top: 0; }
.feld-detail .feld-side h2 {
  font-size: clamp(21px, 2.6vw, 26px);
  letter-spacing: -0.015em;
  max-width: 18ch;
}
.feld-detail .feld-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(33, 30, 26, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(33, 30, 26, 0.08);
  position: relative;
}
.feld-detail .feld-plate::after {
  content: "";
  width: 12px; height: 12px;
  background: rgba(33, 30, 26, 0.55);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.feld-detail .lead {
  margin-top: 10px;
  color: var(--stone);
  font-size: 15px;
}
.result-list { display: grid; gap: 12px; list-style: none; }
.result-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.result-list svg { flex: none; color: var(--accent); transform: translateY(2px); }
.feld-note {
  margin-top: 18px;
  font-size: 14px;
  color: var(--stone);
  border-top: 1px dashed var(--hairline-strong);
  padding-top: 14px;
  max-width: 60ch;
}
.feld-link {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
}
@media (max-width: 800px) {
  .feld-detail { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Prose bands (quality claims, datenschutz, etc.) ───── */
.band {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
}
.band h2 { font-size: clamp(21px, 2.6vw, 26px); letter-spacing: -0.015em; }
.band p { margin-top: 14px; color: var(--ink-soft); max-width: 72ch; }
.band .band-legal {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--stone);
  border-top: 1px dashed var(--hairline-strong);
  padding-top: 14px;
}
.band-dark {
  background:
    radial-gradient(90% 140% at 0% 50%, rgba(180, 144, 239, 0.12), transparent 54%),
    radial-gradient(75% 120% at 100% 20%, rgba(88, 161, 132, 0.1), transparent 58%),
    var(--ink);
  border-color: var(--ink);
  color: var(--paper-deep);
  position: relative;
  overflow: hidden;
}
.band-dark h2 { color: #fff; }
.band-dark p { color: rgba(242, 239, 232, 0.8); position: relative; }
/* ── Weitsicht card — night sky, aurora curtains, ASCII field ──
   Home only. Midnight navy/violet base from the northern-lights reference;
   curtains hang from the top edge (the footer's rise from the bottom). */
.band-weitsicht {
  position: relative;
  overflow: hidden;
  border-color: oklch(0.27 0.04 285);
  background:
    radial-gradient(90% 130% at 82% -24%, oklch(0.33 0.085 305 / 0.5), transparent 62%),
    radial-gradient(64% 46% at 26% 118%, oklch(0.36 0.07 235 / 0.32), transparent 68%),
    radial-gradient(70% 90% at 8% 112%, oklch(0.28 0.06 250 / 0.5), transparent 58%),
    linear-gradient(166deg, oklch(0.24 0.045 292) 0%, oklch(0.2 0.045 278) 48%, oklch(0.165 0.04 262) 100%);
  color: var(--paper-deep);
  min-height: clamp(320px, 34vw, 430px);
  display: flex;
  align-items: center;
  padding: clamp(30px, 4.5vw, 54px) clamp(28px, 4vw, 50px);
}
.ws-sky {
  position: absolute;
  left: -5%; right: -5%; top: -30px;
  height: 86%;
  display: flex;
  align-items: flex-start;
  filter: blur(17px);
  opacity: 0.82;
  pointer-events: none;
}
.ws-sky i {
  flex: 1;
  display: block;
  height: var(--h, 60%);
  margin: 0 -6px;
  border-radius: 0 0 18px 18px;
  transform: skewX(var(--sk, 0deg));
  transform-origin: top;
  background: linear-gradient(to bottom,
    oklch(0.46 0.13 296 / 0.6) 0%,
    oklch(0.52 0.12 310 / 0.44) 34%,
    oklch(0.6 0.1 340 / 0.3) 58%,
    oklch(0.55 0.08 250 / 0.14) 80%,
    transparent 100%);
}
.ws-sky i:nth-child(3n + 1) {
  background: linear-gradient(to bottom,
    oklch(0.5 0.1 250 / 0.55) 0%,
    oklch(0.6 0.09 235 / 0.4) 36%,
    oklch(0.62 0.08 290 / 0.26) 62%,
    transparent 100%);
}
/* One quiet breath of aurora green, far from the copy. */
.ws-sky i:nth-child(7) {
  background: linear-gradient(to bottom,
    oklch(0.5 0.11 300 / 0.5) 0%,
    oklch(0.58 0.09 330 / 0.34) 38%,
    oklch(0.62 0.07 170 / 0.2) 66%,
    transparent 100%);
}
.ws-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(97deg,
    oklch(0.18 0.04 280 / 0.88) 0%,
    oklch(0.18 0.04 280 / 0.56) 36%,
    oklch(0.18 0.04 280 / 0) 60%);
}
.ws-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.ws-content { position: relative; max-width: 46ch; }
.band-weitsicht h2 { color: #fff; }
.band-weitsicht p { color: oklch(0.89 0.015 285 / 0.92); }
.band-weitsicht .ws-cta { margin-top: 22px; }
.band-weitsicht .feld-link { color: #f2efe8; }
@media (max-width: 720px) {
  .band-weitsicht { min-height: 0; }
  .ws-sky { top: -24px; height: 58%; filter: blur(20px); }
  .ws-scrim {
    background: linear-gradient(to top,
      oklch(0.18 0.04 280 / 0.9) 0%,
      oklch(0.18 0.04 280 / 0.6) 55%,
      oklch(0.18 0.04 280 / 0.12) 100%);
  }
}
/* On phones the aurora carries the card alone — no particle field. */
@media (max-width: 640px) {
  .ws-field { display: none; }
}

/* ── Steps (phases) ────────────────────────────────────── */
.steps {
  margin-top: clamp(32px, 5vw, 48px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 32px);
  counter-reset: step;
}
.step {
  padding-top: 20px;
  border-top: 1px solid var(--hairline-strong);
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-size: 14px;
  color: var(--stone-faint);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.step h3 { font-size: 17px; letter-spacing: -0.01em; }
.step p { margin-top: 8px; font-size: 14px; color: var(--stone); }
@media (max-width: 980px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ── Article cards ─────────────────────────────────────── */
.pillars {
  margin-top: clamp(32px, 5vw, 48px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pillar {
  border-radius: 16px;
  padding: 24px;
}
.pillar h3 { font-size: 17.5px; letter-spacing: -0.01em; }
.pillar p { margin-top: 8px; font-size: 14px; color: var(--ink-soft); }
@media (max-width: 800px) { .pillars { grid-template-columns: 1fr; } }

.article-list {
  margin-top: clamp(32px, 5vw, 48px);
  display: grid;
  gap: 0;
}
.article-row {
  position: relative;
  display: grid;
  grid-template-columns: clamp(132px, 15vw, 180px) 140px minmax(0, 1fr) auto;
  gap: 8px clamp(20px, 4vw, 48px);
  align-items: center;
  padding: 26px 0;
  border-top: 1px solid var(--hairline-strong);
  text-decoration: none;
  transition: background-color 0.3s var(--ease);
}
.article-row .a-image {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--paper-deep);
}
.article-row .a-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
}
.article-row:hover .a-image img { transform: scale(1.04); }
.article-row h3 { transition: color 0.4s var(--ease); }
.article-row:hover h3 { color: var(--accent); }
.article-row .a-arrow svg { transition: transform 0.35s var(--ease); }
.article-row:hover .a-arrow svg { transform: translateX(3px); }
/* Bild-Entwicklung beim Reveal: startet leicht vergroessert und
   entsaettigt, setzt sich scharf — via scale/filter, waehrend der
   Hover-Zoom transform nutzt: getrennte Properties. */
/* Jede Zeile beobachtet sich selbst: sie laeuft ein, sobald sie
   selbst im Viewport steht, ihr Bild entwickelt kurz nach. */
html.js .article-row[data-reveal] .a-image img {
  scale: 1.06;
  filter: saturate(0.55);
  transition:
    scale 0.85s var(--ease) 0.3s,
    filter 0.85s var(--ease) 0.3s,
    transform 0.55s var(--ease);
}
html.js .article-row.is-revealed .a-image img { scale: 1; filter: saturate(1); }
@media (prefers-reduced-motion: reduce) {
  html.js .article-row[data-reveal] .a-image img { scale: 1; filter: none; transition: none; }
}
.article-row .a-meta { grid-column: 2; grid-row: 1 / span 2; }
.article-list--editorial .article-row .a-meta { grid-row: 1; align-self: end; }
.article-list--editorial .article-row .a-footer {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}
.article-row h3 { grid-column: 3; grid-row: 1; align-self: end; }
/* Whole row is clickable via the stretched title link. */
.a-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.a-link::after { content: ""; position: absolute; inset: 0; }
.article-row:hover .a-link { color: var(--accent);
}
.article-row:last-child { border-bottom: 1px solid var(--hairline-strong); }
.article-row .a-meta { font-size: 13.5px; color: var(--stone); line-height: 1.5; }
.article-row .a-author {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.25;
}
.article-row .a-footer .a-author { margin-top: 7px; }
.article-row .a-footer .a-arrow { display: none; }
.article-row .a-author img {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--hairline-strong);
  background: var(--paper-deep);
}
.a-tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 520;
  color: var(--ink-soft);
  padding: 3px 9px 4px;
  border-radius: 6px;
  margin-bottom: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.a-tag.tag-praxis { background: var(--mint); }
.a-tag.tag-technologie { background: var(--sky); }
.a-tag.tag-politik { background: var(--lilac); }
.a-tag.tag-default { background: var(--sand); }
.article-row h3 { font-size: 20px; letter-spacing: -0.014em; max-width: 30ch; }
.article-row .a-excerpt {
  grid-column: 3;
  grid-row: 2;
  align-self: start;
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--stone);
  max-width: 60ch;
}
.article-row .a-arrow { grid-column: 4; grid-row: 1 / span 2; color: var(--stone-faint); transition: color 0.3s var(--ease), transform 0.3s var(--ease); }
.article-row:hover .a-arrow { color: var(--ink); transform: translateX(3px); }
.article-row:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 700px) {
  .article-row {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 8px 16px;
    align-items: start;
  }
  .article-row .a-image { grid-column: 1; grid-row: 1 / span 2; }
  .article-row .a-meta { grid-column: 2; grid-row: 1; }
  .article-row h3 { grid-column: 2; grid-row: 2; align-self: start; }
  .article-row .a-excerpt { grid-column: 1 / -1; grid-row: 3; }
  .article-row .a-arrow { display: none; }

  /* The blog index becomes a single editorial reading axis on phones. */
  .article-list--editorial { margin-top: 22px; }
  .article-list--editorial .article-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 27px 0 30px;
  }
  .article-list--editorial .article-row .a-meta {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.35;
  }
  .article-list--editorial .a-meta-break { display: none; }
  .article-list--editorial .a-meta-detail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .article-list--editorial .a-tag {
    flex: none;
    margin: 0;
    padding: 3px 8px 4px;
    font-size: 11.5px;
  }
  .article-list--editorial .article-row h3 {
    grid-column: 1;
    grid-row: 2;
    max-width: 100%;
    margin: 13px 0 17px;
    font-size: clamp(23px, 6.3vw, 25px);
    line-height: 1.08;
    letter-spacing: -0.022em;
  }
  .article-list--editorial .article-row .a-image {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    aspect-ratio: 5 / 2;
    border-radius: 14px;
  }
  .article-list--editorial .article-row .a-excerpt {
    grid-column: 1;
    grid-row: 4;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: 15px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--stone);
  }
  .article-list--editorial .article-row .a-footer {
    grid-column: 1;
    grid-row: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 17px;
  }
  .article-list--editorial .article-row .a-author {
    margin: 0;
    font-size: 12.5px;
  }
  .article-list--editorial .article-row .a-footer .a-arrow {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--stone);
  }
}

.note-line {
  margin-top: 24px;
  font-size: 14px;
  color: var(--stone);
  max-width: 70ch;
}

/* Fussnote unter dem Weitsicht-Band. Nur dort: .note-line steckt an fuenf
   Stellen (Beitraege-Link, zwei Notizen auf Ueber uns, Hinweis auf
   Fallstudien), die linksbuendig bleiben sollen.
   Vorher stand sie linksbuendig und 70ch breit direkt unter der dunklen
   Karte — das las wie ein vergessener Absatz, und der Umbruch riss
   „Sie." vom Satz, unmittelbar vor den Link. */
.note-web {
  margin-top: clamp(30px, 4.5vw, 52px);
  margin-inline: auto;
  max-width: 56ch;
  line-height: 1.65;
  text-align: center;
  text-wrap: balance;
}
/* Der Link gehoert an den Satz, nicht auf eine eigene Zeile. */
.note-web .feld-link { white-space: nowrap; }

/* ── Über uns ──────────────────────────────────────────── */
.founder-grid {
  margin-top: clamp(32px, 5vw, 48px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.founder-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.founder-card h3 { font-size: 21px; letter-spacing: -0.014em; }
.founder-card p { margin-top: 10px; font-size: 15px; color: var(--ink-soft); }
@media (max-width: 760px) { .founder-grid { grid-template-columns: 1fr; } }

.service-list { margin-top: 22px; display: grid; gap: 10px; list-style: none; max-width: 640px; }
.service-list li {
  display: flex; gap: 12px; align-items: baseline;
  font-size: 15.5px; color: var(--ink-soft);
}
.service-list svg { flex: none; color: var(--accent); transform: translateY(2px); }

.region-stops {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 8px;
  list-style: none;
}
.region-stops li {
  font-size: 14px;
  font-weight: 500;
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  padding: 8px 14px;
  border-radius: 999px;
}
.region-stops li:not(:last-child)::after { content: none; }
.region-sep { color: var(--stone-faint); }

/* ── Kontakt — single centered column, founders first ──── */
.contact-shell {
  max-width: 640px;
  padding-bottom: clamp(48px, 7vw, 80px);
}
.contact-head { text-align: center; padding: clamp(28px, 5vw, 48px) 0 clamp(28px, 4vw, 40px); }
.contact-head h1 {
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: -0.025em;
  line-height: 1.08;
}
.contact-head .sub {
  display: block;
  font-weight: 400;
  color: var(--stone);
}
.contact-head .intro {
  margin: 20px auto 0;
  font-size: 16.5px;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* The two founders, slightly overlapped and tilted — the same grammar as
   the hero's static badges. The aurora glow is this page's one signature. */
.founder-duo {
  position: relative;
  display: inline-flex;
  justify-content: center;
  margin-bottom: 14px;
}
.founder-glow {
  position: absolute;
  left: 50%; top: 58%;
  width: 300px; height: 190px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(48% 56% at 32% 62%, oklch(0.72 0.08 165 / 0.34), transparent 70%),
    radial-gradient(44% 54% at 68% 42%, var(--aurora-rose), transparent 68%),
    radial-gradient(38% 48% at 54% 76%, oklch(0.53 0.17 295 / 0.14), transparent 70%);
  filter: blur(26px);
  pointer-events: none;
}
.founder-photo {
  position: relative;
  width: 88px; height: 88px;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--paper);
  box-shadow: 0 4px 18px oklch(0.24 0.02 70 / 0.14);
  background: var(--card);
}
.founder-photo-1 { transform: rotate(-2deg); z-index: 1; }
.founder-photo-2 { transform: rotate(1.6deg); }
.founder-caption {
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 560;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.contact-form {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: clamp(24px, 3.5vw, 36px);
  box-shadow: var(--shadow-card);
}
/* Message-first: the textarea is the star — hierarchy through size and
   type, not a colored plate. */
.contact-form-solo .form-field-message textarea {
  min-height: 190px;
  background: #fff;
  font-size: 17px;
  line-height: 1.6;
  padding: 16px 18px;
}
.contact-form-solo .form-field-message textarea::placeholder { color: var(--stone-faint); }
.contact-form-solo .form-field-message label { font-size: 17px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 4px;
}
.form-foot .form-privacy { margin: 0; max-width: 34ch; }
.form-foot .btn { flex: none; }

/* Founder reply chip — the hero's answer-card grammar, quieter. */
.reply-card { margin-top: 22px; }
.reply-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--paper);
  box-shadow: 0 1px 5px oklch(0.24 0.02 70 / 0.16);
}
.reply-card p { font-size: 15px; color: var(--ink-soft); }

.contact-mailto {
  margin-top: 22px;
  text-align: center;
  font-size: 14.5px;
  color: var(--stone);
}
.contact-mailto a { color: var(--accent); font-weight: 520; }

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-foot { flex-direction: column; align-items: flex-start; }
  .founder-glow { width: 230px; height: 160px; }
}
.form-field { margin-bottom: 18px; }
.form-field label {
  display: block;
  font-size: 14px;
  font-weight: 560;
  font-family: var(--font-brand);
  margin-bottom: 8px;
}
.form-field input,
.form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  padding: 13px 14px;
  min-height: 48px;
  transition: border-color 0.25s var(--ease);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}
.form-field .field-error {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--cherry);
}

.form-error {
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(151, 72, 57, 0.28);
  border-radius: 10px;
  background: #f8ebe7;
  color: #79382e;
  font-size: 14px;
  line-height: 1.5;
}
.form-field.has-error input,
.form-field.has-error textarea { border-color: var(--cherry); }
.form-privacy { font-size: 13px; color: var(--stone); margin: 14px 0 18px; }
.hp-field { position: absolute; left: -9999px; }

.form-success {
  background: var(--accent-soft);
  border: 1px solid #d3e0d9;
  border-radius: 14px;
  padding: 24px;
}
.form-success h2 { font-size: 20px; letter-spacing: -0.012em; color: var(--accent); }
.form-success p { margin-top: 8px; font-size: 15px; color: var(--ink-soft); }

/* ── Artikel-Detailseite ───────────────────────────────── */
.article-shell { max-width: 1120px; padding: clamp(32px, 5vw, 56px) var(--gutter) clamp(40px, 6vw, 64px); }
.article-head { max-width: 720px; margin-inline: auto; }
.article-back { margin-bottom: 22px; }
.article-back a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500;
  color: var(--stone); text-decoration: none;
  transition: color 0.25s var(--ease);
}
.article-back a:hover { color: var(--accent); }
.article-back svg { transform: rotate(180deg); }
.article-cover {
  overflow: hidden;
  aspect-ratio: var(--article-cover-ratio, 3 / 2);
  margin: 0 0 clamp(26px, 4vw, 36px);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: var(--paper-deep);
}
.article-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-title {
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin-bottom: 18px;
}
.article-author {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 24px;
}
.article-author img {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--hairline-strong);
  background: var(--paper-deep);
}
.article-author__copy { display: grid; gap: 1px; line-height: 1.2; }
.article-author__label { font-size: 12px; color: var(--stone); }
.article-author__copy strong { font-size: 14px; font-weight: 580; color: var(--ink); }
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr);
  align-items: start;
}
/* Abstract reading rail: on desktop only the strokes are visible; labels
   surface on hover/focus, and the current section keeps its label in ink. */
.article-rail {
  grid-column: 1;
  justify-self: end;
  width: 216px;
  margin-inline-end: clamp(42px, 5.5vw, 72px);
  position: sticky;
  top: 118px;
  max-height: calc(100vh - 150px);
  overflow: visible;
}
.article-body { grid-column: 2; }
.article-rail__toggle { display: none; }
.article-rail__list {
  margin: 0;
  padding: 4px 0;
  list-style: none;
}
.article-rail__list a {
  position: relative;
  display: block;
  height: 12px;
  text-decoration: none;
  outline: none;
}
.article-rail__stroke {
  position: absolute;
  left: 0;
  top: 5px;
  width: var(--rail-width, 12px);
  height: 2px;
  background: var(--hairline-strong);
  transition: width 220ms var(--ease), background-color 220ms var(--ease);
}
.article-rail__label {
  position: absolute;
  left: 52px;
  top: -2px;
  width: 164px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--stone);
  opacity: 0;
  transform: translateX(-3px);
  transition: transform 160ms var(--ease), color 140ms var(--ease);
}
.article-rail__list a.is-current .article-rail__stroke {
  width: var(--rail-width, 34px);
  background: var(--ink);
}
.article-rail__list a.is-current .article-rail__label {
  opacity: 1;
  transform: none;
  color: var(--ink);
  font-weight: 520;
}
.article-rail__list a:hover .article-rail__label,
.article-rail__list a:focus-visible .article-rail__label {
  opacity: 1;
  transform: none;
}
.article-rail__list a:hover .article-rail__label { color: var(--ink-soft); }
.article-rail__list a:hover .article-rail__stroke { background: var(--stone); }
.article-rail__list a.is-current:hover .article-rail__stroke { background: var(--ink); }
.article-rail__list a:focus-visible .article-rail__label {
  color: var(--ink);
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}
@media (min-width: 901px) {
  .article-rail__list:has(a:hover) a.is-current:not(:hover) .article-rail__label,
  .article-rail__list:has(a:focus-visible) a.is-current:not(:focus-visible) .article-rail__label,
  .article-rail__list:has(a:focus-visible) a:hover:not(:focus-visible) .article-rail__label {
    opacity: 0;
    transform: translateX(-3px);
  }
}
.article-rail__chevron { display: none; }
.article-body,
.article-body h2 { scroll-margin-top: 110px; }
.article-body .article__meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 13.5px; color: var(--stone);
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--hairline);
}
.article-body .article__meta-category { color: var(--accent); font-weight: 560; }
.article-body p { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 18px; }
.article-body h2 {
  font-size: 22px;
  letter-spacing: -0.014em;
  margin: 34px 0 14px;
  color: var(--ink);
}
.article-body strong { color: var(--ink); font-weight: 560; }
.article-body .article__callout {
  background: var(--accent-soft);
  border: 1px solid #d3e0d9;
  border-radius: 14px;
  padding: 20px 22px;
  margin: 28px 0;
}
.article-body .article__callout p { margin: 0; color: var(--ink); }
.article-body a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article-body a:hover { text-decoration-thickness: 2px; }
.article-body h3 {
  font-size: 17px;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.article__decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0;
}
.article__decision-grid article {
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
}
.article__decision-grid article:nth-child(1) { background: var(--clay); border-color: var(--clay-line); }
.article__decision-grid article:nth-child(2) { background: var(--sage); border-color: var(--sage-line); }
.article__decision-grid article:nth-child(3) { background: var(--slate); border-color: var(--slate-line); }
.article__decision-grid article:nth-child(4) { background: var(--paper-deep); }
.article__decision-grid p {
  margin: 9px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
}
.article__icon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0 30px;
}
.article__icon-grid figure {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
}
.article__icon-plate {
  display: grid;
  place-items: center;
  height: 126px;
  padding: 22px 16px;
  background: var(--slate);
}
.article__icon-plate--basic { background: var(--clay); }
.article__icon-plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.article__icon-plate--basic img { width: 100px; }
.article__icon-grid figcaption {
  padding: 15px 16px 17px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.article-body .article__steps,
.article-body .article__sources {
  margin: 20px 0 28px;
  padding-left: 24px;
  color: var(--ink-soft);
}
.article-body .article__steps li,
.article-body .article__sources li {
  padding-left: 6px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.68;
}
.article-body .article__steps li::marker {
  color: var(--accent);
  font-weight: 650;
}
.article-body .article__faq { margin-top: 20px; }
.article-body .article__faq .faq-a p {
  margin: 0;
  padding: 2px 40px 18px 0;
  font-size: 14.5px;
  line-height: 1.66;
}

@media (max-width: 700px) {
  .article__decision-grid,
  .article__icon-grid { grid-template-columns: 1fr; }
  .article__icon-plate { height: 150px; }
}

@media (max-width: 1300px) {
  .article-layout {
    display: block;
    max-width: 720px;
    margin-inline: auto;
  }

  /* Compact reading strip: tick marks + current section, tap to open the list. */
  .article-rail {
    position: sticky;
    top: 72px;
    z-index: 30;
    isolation: isolate;
    justify-self: stretch;
    width: auto;
    max-height: none;
    margin: 20px 0 26px;
    background: var(--paper);
  }
  .article-rail::before {
    content: "";
    position: absolute;
    z-index: -1;
    /* Close the small gap below the sticky header before the downward fade.
       Otherwise a clipped line of article copy can show above the rail. */
    top: -12px;
    bottom: -76px;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
      to bottom,
      var(--paper) 0%,
      var(--paper) 42%,
      rgba(250, 248, 244, 0.98) 48%,
      rgba(250, 248, 244, 0.94) 54%,
      rgba(250, 248, 244, 0.88) 60%,
      rgba(250, 248, 244, 0.79) 66%,
      rgba(250, 248, 244, 0.68) 72%,
      rgba(250, 248, 244, 0.55) 78%,
      rgba(250, 248, 244, 0.42) 84%,
      rgba(250, 248, 244, 0.29) 89%,
      rgba(250, 248, 244, 0.18) 93%,
      rgba(250, 248, 244, 0.09) 96%,
      rgba(250, 248, 244, 0.035) 98%,
      rgba(250, 248, 244, 0) 100%
    );
  }
  .article-rail.is-stuck.is-reading::before { opacity: 1; }
  .article-rail__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--paper);
    box-shadow: var(--shadow-float);
    text-align: left;
    cursor: pointer;
    font: inherit;
  }
  .article-rail__ticks {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
  }
  .article-rail__tick {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--hairline-strong);
    transition: width 180ms var(--ease), height 180ms var(--ease), border-radius 180ms var(--ease), background-color 180ms var(--ease);
  }
  .article-rail__tick.is-complete {
    background: var(--stone);
  }
  .article-rail__tick.is-current {
    width: 14px;
    height: 3px;
    border-radius: 999px;
    background: var(--ink);
  }
  .article-rail__current {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 520;
    color: var(--ink);
  }
  .article-rail__chevron {
    display: block;
    flex-shrink: 0;
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--stone);
    border-bottom: 1.5px solid var(--stone);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 220ms var(--ease);
  }
  .article-rail.is-open .article-rail__chevron { transform: rotate(-135deg) translateY(-1px); }
  .article-rail__list {
    position: fixed;
    z-index: 45;
    left: var(--rail-panel-left, 0);
    top: var(--rail-panel-top, 0);
    width: var(--rail-panel-width, auto);
    max-height: var(--rail-panel-max, min(55dvh, 460px));
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-anchor: none;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 8px;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--shadow-float);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition:
      opacity 150ms var(--ease-exit),
      transform 150ms var(--ease-exit),
      visibility 0s linear 150ms;
  }
  .article-rail.is-open .article-rail__list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition:
      opacity 190ms var(--ease),
      transform 190ms var(--ease),
      visibility 0s linear 0s;
  }
  .article-rail__list { counter-reset: article-section; }
  .article-rail__list li { counter-increment: article-section; }
  .article-rail__list a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 2px;
    height: auto;
    padding: 10px 10px;
    border-radius: 10px;
    color: var(--stone);
  }
  .article-rail__list a::before {
    content: counter(article-section, decimal-leading-zero);
    grid-column: 1;
    font-size: 11.5px;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
    color: var(--stone-faint);
  }
  .article-rail__stroke { display: none; }
  .article-rail__list a .article-rail__label {
    grid-column: 2;
    position: static;
    width: auto;
    opacity: 1;
    transform: none;
    font-size: 13.5px;
    line-height: 1.42;
    color: var(--ink-soft);
  }
  .article-rail__list a.is-current {
    background: rgba(211, 224, 230, 0.52);
    color: var(--ink);
  }
  .article-rail__list a.is-current::before { color: var(--accent); font-weight: 620; }
  .article-rail__list a.is-current .article-rail__label { color: var(--ink); font-weight: 560; }
  .article-rail__list a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
  .article-rail__list a:focus-visible .article-rail__label { outline: 0; }
  /* Without JS the toggle is inert: show the list inline instead. */
  html:not(.js) .article-rail__toggle { display: none; }
  html:not(.js) .article-rail__list {
    position: static;
    width: auto;
    max-height: none;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    border-top: 1px solid var(--hairline-strong);
  }
}

@media (max-width: 1300px) and (prefers-reduced-motion: reduce) {
  .article-rail__tick,
  .article-rail__chevron { transition-duration: 0.01ms; }
  .article-rail__list,
  .article-rail.is-open .article-rail__list {
    transform: none;
    transition: opacity 0.01ms linear, visibility 0s linear;
  }
}

/* ── Workshops: Vorher/Nachher-Wandel ───────────────────── */
.wk-wandel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
}
.wk-side {
  position: relative;
  border-radius: 20px;
  padding: clamp(22px, 3vw, 30px);
  padding-top: 34px;
  display: grid;
  align-content: start;
}
.wk-side-vorher {
  background: rgba(242, 239, 232, 0.62);
  border: 1px dashed var(--hairline-strong);
}
.wk-side-nachher {
  background: rgba(219, 231, 212, 0.45);
  border: 1px solid rgba(188, 207, 178, 0.5);
}
.wk-tag {
  position: absolute;
  top: 0;
  left: 26px;
  transform: translateY(-50%);
  font-family: var(--font-brand);
  font-size: 12px;
  font-weight: 540;
  color: var(--stone);
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 5px 13px;
  white-space: nowrap;
}
.wk-tag-on {
  color: var(--accent);
  border-color: rgba(46, 90, 120, 0.4);
}
.wk-scene { display: grid; gap: 12px; justify-items: start; }
.wk-who { font-size: 12.5px; color: var(--stone); }
.wk-bubble {
  background: #f2efe8;
  border: 1px solid var(--hairline);
  border-radius: 14px 14px 14px 4px;
  padding: 11px 15px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  transform: rotate(-0.4deg);
}
.wk-stray {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px dashed #cfc8b9;
  border-radius: 999px;
  background: rgba(250, 248, 244, 0.8);
  color: #8d867a;
  font-size: 11.5px;
  transform: rotate(0.8deg);
}
.wk-stray svg { width: 12px; height: 12px; flex: none; }
.wk-mutter { font-size: 12px; color: var(--stone-faint); font-style: italic; }
.wk-card {
  width: 100%;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px 16px 13px;
  box-shadow: 0 14px 30px rgba(33, 30, 26, 0.10);
  transform: rotate(-0.4deg);
}
.wk-card-head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--stone);
  margin-bottom: 7px;
}
.wk-card-head svg { width: 13px; height: 13px; color: var(--accent); }
.wk-card p { font-size: 14px; line-height: 1.6; color: var(--ink); }
.wk-card mark {
  background: rgba(201, 236, 201, 0.6);
  border-radius: 4px;
  padding: 0 4px 1px;
  font-weight: 540;
  color: var(--ink);
}
.wk-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px dashed var(--hairline-strong);
}
.wk-rule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 4px 10px;
}
.wk-rule svg { width: 12px; height: 12px; flex: none; color: var(--accent); }
.wk-status {
  font-size: 11.5px;
  font-weight: 560;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 4px 11px 5px;
}
/* Ergebnisse: asymmetrisches Bento, Tint aus dem jeweiligen Ton */
.wk-results {
  margin-top: clamp(24px, 3vw, 36px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 2vw, 20px);
}
.wk-result {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: clamp(20px, 2.6vw, 26px);
  box-shadow: 0 8px 20px rgba(33, 30, 26, 0.05);
}
.wk-result:nth-child(1) { grid-column: span 7; --wk-glow: rgba(219, 231, 212, 0.9); --wk-glow-hover: rgba(154, 196, 85, 0.28); }
.wk-result:nth-child(2) { grid-column: span 5; --wk-glow: rgba(211, 224, 230, 0.9); --wk-glow-hover: rgba(111, 163, 216, 0.26); }
.wk-result:nth-child(3) { grid-column: span 5; --wk-glow: rgba(236, 227, 207, 0.95); --wk-glow-hover: rgba(235, 154, 95, 0.22); }
.wk-result:nth-child(4) { grid-column: span 7; --wk-glow: rgba(227, 218, 242, 0.9); --wk-glow-hover: rgba(157, 132, 216, 0.24); }
/* Glow auf eigenem Layer (wie Loesungsfelder): kann nach dem
   Landen der Karte von unten aufsteigen; Hover-Glow separat. */
.wk-result { position: relative; isolation: isolate; overflow: hidden; }
.wk-result::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(130% 100% at 50% 115%, var(--wk-glow, transparent), transparent 70%);
  pointer-events: none;
}
.wk-result::after {
  content: "";
  position: absolute;
  inset: 12% 0 0;
  z-index: -1;
  background: radial-gradient(96% 120% at 50% 112%, var(--wk-glow-hover, transparent), transparent 78%);
  opacity: 0;
  transition: opacity 0.55s var(--ease);
  pointer-events: none;
}
.wk-result:hover::after { opacity: 1; }
html.js .wk-results[data-reveal] .wk-result::before {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.8s var(--ease) calc(var(--reveal-delay, 0s) + 0.4s), translate 0.8s var(--ease) calc(var(--reveal-delay, 0s) + 0.4s);
}
html.js .wk-results.is-revealed .wk-result::before { opacity: 1; translate: 0 0; }
/* Volle Transition-Liste nach dem Gruppen-Reveal: Lift und
   Schatten laufen delay-frei. */
html.js .wk-results[data-reveal] > .wk-result {
  transition:
    opacity 0.55s var(--ease) var(--reveal-delay, 0s),
    transform 0.55s var(--ease) var(--reveal-delay, 0s),
    translate 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.wk-result { transition: translate 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.wk-result:hover { translate: 0 -3px; box-shadow: 0 12px 26px rgba(33, 30, 26, 0.08); }
@media (prefers-reduced-motion: reduce) {
  html.js .wk-results[data-reveal] .wk-result::before { opacity: 1; translate: 0 0; transition: none; }
  .wk-result { transition: none; }
}
@media (max-width: 760px) {
  .wk-result:nth-child(n) { grid-column: 1 / -1; }
}
.wk-result h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17.5px;
  letter-spacing: -0.012em;
}
.wk-result h3 .sol-dot { flex: none; }
.wk-result p { margin-top: 9px; font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); max-width: 48ch; }
/* Befaehigung: Manifest-Moment, frei auf Papier */
.wk-manifest { max-width: 900px; padding: clamp(12px, 2vw, 24px) 0; }
.wk-manifest h2 {
  position: relative;
  isolation: isolate;
  font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.026em;
  max-width: 18ch;
}
.wk-manifest-spark {
  display: block;
  width: 32px; height: 32px;
  color: var(--accent);
  margin-bottom: 18px;
}
.wk-manifest p {
  margin-top: clamp(16px, 2.4vw, 24px);
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--ink-soft);
  max-width: 56ch;
}
/* Formate: Angebotsleiter-Treppe, Strategie in der letzten Stufe */
.wk-steps {
  margin-top: clamp(26px, 3.4vw, 40px);
  max-width: 980px;
  margin-inline: auto;
  display: grid;
  gap: 18px;
}
.wk-step {
  display: flex;
  gap: clamp(14px, 2.4vw, 24px);
  align-items: flex-start;
  width: 94%;
  border-radius: 16px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(23, 20, 17, 0.07);
  box-shadow: 0 8px 20px rgba(33, 30, 26, 0.06);
}
.wk-step:nth-child(1) { margin-left: 0; transform: rotate(-0.5deg); }
.wk-step:nth-child(2) { margin-left: 2%; transform: rotate(0.3deg); }
.wk-step:nth-child(3) { margin-left: 4%; transform: rotate(-0.25deg); }
.wk-step:nth-child(4) { margin-left: 6%; transform: rotate(0.35deg); }
.wk-step-lime { background: linear-gradient(180deg, rgba(217, 242, 142, 0.4), rgba(217, 242, 142, 0.72)); }
.wk-step-peach { background: linear-gradient(180deg, rgba(255, 207, 168, 0.4), rgba(255, 207, 168, 0.72)); }
.wk-step-sky { background: linear-gradient(180deg, rgba(191, 226, 255, 0.4), rgba(191, 226, 255, 0.72)); }
/* Die letzte Stufe ist der dunkle Kern: das Crescendo der Leiter. */
.wk-step-dark {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 16px 34px rgba(33, 30, 26, 0.18);
  padding: clamp(22px, 3.2vw, 32px);
}
.wk-step-dark::after {
  content: "";
  position: absolute;
  right: -70px; top: -80px;
  width: 240px; height: 200px;
  background:
    radial-gradient(50% 50% at 55% 50%, rgba(122, 205, 178, 0.16), transparent 70%),
    radial-gradient(44% 46% at 40% 60%, rgba(154, 134, 221, 0.14), transparent 70%);
  filter: blur(34px);
  pointer-events: none;
}
.wk-step-dark .wk-step-num {
  background: rgba(244, 241, 234, 0.1);
  border-color: rgba(244, 241, 234, 0.14);
  color: rgba(244, 241, 234, 0.85);
}
.wk-step-dark h3 { color: #fff; }
.wk-step-dark .wk-step-meta { color: rgba(244, 241, 234, 0.6); opacity: 1; }
.wk-step-dark .wk-step-body p { color: rgba(244, 241, 234, 0.8); }
.wk-step-dark .wk-step-results { border-top-color: rgba(244, 241, 234, 0.14); }
.wk-step-dark .wk-step-facts { border-top-color: rgba(244, 241, 234, 0.14); }
.wk-step-dark .wk-step-facts div { border-bottom-color: rgba(244, 241, 234, 0.1); }
.wk-step-dark .wk-step-facts dt { color: rgba(244, 241, 234, 0.6); }
.wk-step-dark .wk-step-facts dd { color: rgba(244, 241, 234, 0.86); }
.wk-step-dark .wk-step-result b { color: rgba(244, 241, 234, 0.94); }
.wk-step-dark .wk-step-result i { color: rgba(244, 241, 234, 0.68); }
.wk-step-dark .wk-step-note { color: rgba(244, 241, 234, 0.55); opacity: 1; }
.wk-step-num {
  flex: none;
  font-family: var(--font-brand);
  font-size: 12px;
  font-weight: 560;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(23, 20, 17, 0.08);
  border-radius: 999px;
  padding: 3px 8px;
  margin-top: 2px;
}
.wk-step-body { min-width: 0; width: 100%; }
.wk-step-body h3 { font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.018em; }
.wk-step-meta { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-soft); opacity: 0.75; }
.wk-step-body > p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }
.wk-step-facts {
  margin-top: 18px;
  padding-top: 6px;
  border-top: 1px solid rgba(23, 20, 17, 0.12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(20px, 4vw, 44px);
}
.wk-step-facts div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(23, 20, 17, 0.1);
}
.wk-step-facts dt {
  font-family: var(--font-brand);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.wk-step-facts dd {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.wk-step-results {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid rgba(23, 20, 17, 0.12);
  display: grid;
  gap: 11px;
}
.wk-step-result { display: grid; gap: 2px; }
.wk-step-result b { font-family: var(--font-brand); font-size: 13.5px; font-weight: 580; letter-spacing: -0.01em; color: var(--ink); }
.wk-step-result i { font-style: normal; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.wk-step-note { display: block; margin-top: 11px; font-size: 11.5px; line-height: 1.5; color: var(--ink-soft); opacity: 0.7; max-width: 52ch; }
.wk-process-sec { background: var(--paper-deep); }
.wk-process {
  margin-top: clamp(30px, 4vw, 48px);
  list-style: none;
  border-top: 1px solid var(--hairline-strong);
}
.wk-process li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 36px);
  padding: clamp(22px, 3vw, 32px) 0;
  border-bottom: 1px solid var(--hairline-strong);
}
.wk-process li > span {
  font-family: var(--font-brand);
  font-size: 13px;
  color: var(--accent);
}
.wk-process h3 { font-size: clamp(19px, 2.2vw, 24px); letter-spacing: -0.016em; }
.wk-process p { margin-top: 7px; max-width: 65ch; color: var(--ink-soft); font-size: 15px; line-height: 1.65; }
.wk-frame-sec { background: var(--dark); color: var(--paper-deep); }
.wk-frame-sec .sec-head h2 { color: #fff; }
.wk-frame {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
}
.wk-frame > div { border-top: 1px solid rgba(244, 241, 234, 0.2); padding-top: 22px; }
.wk-frame h3 { color: #fff; font-size: clamp(20px, 2.4vw, 26px); }
.wk-frame p { margin-top: 10px; max-width: 48ch; color: rgba(244, 241, 234, 0.76); font-size: 15px; line-height: 1.68; }
/* Einstieg: offene Schlusszeile unter der Treppe */
.wk-close {
  max-width: none;
  margin: clamp(42px, 6vw, 72px) auto 0;
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) minmax(200px, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  border-top: 1px solid var(--hairline);
  padding-top: clamp(24px, 3.4vw, 36px);
}
.wk-close-text h3 { font-size: 19px; letter-spacing: -0.014em; max-width: 24ch; }
.wk-close-text p { margin-top: 8px; font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); max-width: 46ch; }
.wk-close-links { display: grid; gap: 12px; justify-items: start; }
@media (max-width: 860px) {
  .wk-step { width: 100%; }
  .wk-step:nth-child(n) { margin-left: 0; }
  .wk-step-facts { grid-template-columns: 1fr; }
  .wk-frame { grid-template-columns: 1fr; }
  .wk-close { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .wk-step { gap: 10px; padding: 18px 15px 16px; }
  .wk-step-dark { padding: 20px 16px 18px; }
  .wk-step-facts div { grid-template-columns: 84px 1fr; gap: 8px; }
  .wk-process li { grid-template-columns: 38px minmax(0, 1fr); }
}

/* ── Individuelle Entwicklung ──────────────────────────── */
/* Wann: asymmetrisches Bento, Ton-Schimmer von unten */
.ie-bento {
  margin-top: clamp(24px, 3vw, 36px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 2vw, 20px);
}
.ie-bento-item {
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: clamp(20px, 2.6vw, 26px);
  box-shadow: 0 8px 20px rgba(33, 30, 26, 0.05);
}
.ie-bento-item:nth-child(1) { grid-column: span 7; --ie-glow: radial-gradient(130% 100% at 50% 115%, rgba(227, 218, 242, 0.9), transparent 70%); }
.ie-bento-item:nth-child(2) { grid-column: span 5; --ie-glow: radial-gradient(130% 100% at 50% 115%, rgba(191, 226, 255, 0.85), transparent 70%); }
.ie-bento-item:nth-child(3) { grid-column: 1 / -1; --ie-glow: radial-gradient(80% 130% at 100% 60%, rgba(255, 207, 168, 0.75), transparent 62%); display: grid; grid-template-columns: minmax(220px, 0.9fr) 1.4fr; gap: clamp(16px, 3vw, 44px); align-items: start; }
/* Glow auf eigenem Layer: steigt nach dem Landen auf, Hover
   intensiviert ihn ueber einen zweiten, gegateten Layer. */
.ie-bento-item { position: relative; isolation: isolate; overflow: hidden; background: #fff; }
.ie-bento-item::before,
.ie-bento-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ie-glow, none);
  pointer-events: none;
}
.ie-bento-item::after { opacity: 0; transition: opacity 0.55s var(--ease); }
.ie-bento-item:hover::after { opacity: 0.85; }
html.js .ie-bento[data-reveal] .ie-bento-item::before {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.8s var(--ease) calc(var(--reveal-delay, 0s) + 0.4s), translate 0.8s var(--ease) calc(var(--reveal-delay, 0s) + 0.4s);
}
html.js .ie-bento.is-revealed .ie-bento-item::before { opacity: 1; translate: 0 0; }
html.js .ie-bento[data-reveal] > .ie-bento-item {
  transition:
    opacity 0.55s var(--ease) var(--reveal-delay, 0s),
    transform 0.55s var(--ease) var(--reveal-delay, 0s),
    translate 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.ie-bento-item { transition: translate 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.ie-bento-item:hover { translate: 0 -3px; box-shadow: 0 12px 26px rgba(33, 30, 26, 0.08); }
.ie-bento-item h3 { font-size: 17.5px; letter-spacing: -0.012em; max-width: 24ch; }
.ie-bento-item p { margin-top: 9px; font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); max-width: 52ch; }
.ie-bento-item:nth-child(3) p { margin-top: 0; }
/* Phasen: Timeline auf einer Ton-Linie, die offen auslaeuft */
.ie-tl {
  position: relative;
  margin-top: clamp(28px, 3.6vw, 44px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.6vw, 32px);
}
/* Etappen: jedes Segment ist ein eigenes Linien-Stueck, das letzte laeuft offen aus. */
.ie-tl-seg {
  display: block;
  height: 5px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(23, 20, 17, 0.06);
}
.ie-tl-seg-lime { background: var(--lime); }
.ie-tl-seg-peach { background: var(--peach); }
.ie-tl-seg-sky { background: var(--sky); }
.ie-tl-seg-lilac {
  background: linear-gradient(90deg, var(--lilac) 0%, var(--lilac) 55%, transparent 98%);
  box-shadow: none;
}
.ie-tl-num {
  display: block;
  height: 18px;
  margin-bottom: 10px;
  font-family: var(--font-brand);
  font-size: 13px;
  font-weight: 560;
  color: var(--stone-faint);
  font-variant-numeric: tabular-nums;
  line-height: 18px;
}
.ie-tl-col h3 { margin-top: 16px; font-size: 16.5px; letter-spacing: -0.012em; }
.ie-tl-col p { margin-top: 7px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.ie-tl-beyond {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 18px;
  font-size: 11.5px;
  font-style: italic;
  color: var(--stone-faint);
  white-space: nowrap;
}
/* Technik: Split mit Faehigkeits-Chips */
.ie-tech {
  display: grid;
  grid-template-columns: minmax(300px, 1.4fr) minmax(240px, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  border-top: 1px solid var(--hairline);
  padding-top: clamp(28px, 4vw, 44px);
}
.ie-tech-text h2 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.018em; max-width: 22ch; }
.ie-tech-text p { margin-top: 12px; font-size: 15px; line-height: 1.66; color: var(--ink-soft); max-width: 58ch; }
.ie-tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-content: center;
}
.ie-tech-chips span {
  font-family: var(--font-brand);
  font-size: 13px;
  font-weight: 540;
  color: var(--ink);
  padding: 8px 14px 9px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(33, 30, 26, 0.1);
}
.ie-tech-chips span:nth-child(6n+1) { background: var(--lilac); transform: rotate(-1deg); }
.ie-tech-chips span:nth-child(6n+2) { background: var(--sky); transform: rotate(0.8deg); }
.ie-tech-chips span:nth-child(6n+3) { background: var(--sage); transform: rotate(-0.5deg); }
.ie-tech-chips span:nth-child(6n+4) { background: var(--peach); transform: rotate(0.6deg); }
.ie-tech-chips span:nth-child(6n+5) { background: var(--sand); transform: rotate(-0.8deg); }
.ie-tech-chips span:nth-child(6n+6) { background: var(--slate); transform: rotate(0.5deg); }
@media (max-width: 760px) {
  .ie-bento-item:nth-child(n) { grid-column: 1 / -1; }
  .ie-bento-item:nth-child(3) { grid-template-columns: 1fr; gap: 8px; }
  .ie-bento-item:nth-child(3) p { margin-top: 0; }
  .ie-tl { grid-template-columns: 1fr; gap: 28px; }
  .ie-tl-seg { width: 56px; }
  .ie-tl-col h3 { margin-top: 12px; }
  .ie-tl-beyond { display: none; }
  .ie-tech { grid-template-columns: 1fr; }
}

/* Verantwortung: das Siegel-Protokoll */
.ie-seal {
  display: grid;
  grid-template-columns: minmax(300px, 1.2fr) minmax(280px, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.ie-seal-text h2 { font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -0.02em; max-width: 18ch; }
.ie-seal-text p { margin-top: 14px; font-size: 15.5px; line-height: 1.66; color: var(--ink-soft); max-width: 54ch; }
.ie-doc {
  justify-self: center;
  width: min(100%, 400px);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 22px 24px 20px;
  box-shadow: 0 14px 30px rgba(33, 30, 26, 0.10);
  transform: rotate(0.6deg);
}
.ie-doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
}
.ie-doc-label {
  font-family: var(--font-brand);
  font-size: 14.5px;
  font-weight: 580;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ink);
}
.ie-doc-seal {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--paper-deep);
  box-shadow: inset 0 2px 5px rgba(33, 30, 26, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.8);
  color: var(--accent);
}
.ie-doc-seal svg { width: 30px; height: 30px; }
.ie-doc-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.ie-doc-rows li {
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.ie-doc-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding-top: 15px;
  border-top: 1px dashed var(--hairline-strong);
}
.ie-doc-duo { display: flex; }
.ie-doc-duo img {
  width: 38px; height: 38px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid #fff;
}
.ie-doc-duo img + img { margin-left: -9px; }
.ie-doc-who { font-size: 11.5px; line-height: 1.45; color: var(--stone); }
.ie-doc-who b { font-family: var(--font-brand); font-size: 12.5px; font-weight: 580; color: var(--ink); }
@media (max-width: 760px) {
  .ie-seal { grid-template-columns: 1fr; }
  .ie-doc { justify-self: start; }
}

/* ── Fallstudien-Teaser: der Weg als Mini-Kaskade ──────── */
.ref-path {
  justify-self: center;
  width: min(100%, 440px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.ref-stop {
  display: grid;
  gap: 2px;
  justify-items: start;
  border-radius: 14px;
  padding: 14px 17px 13px;
  border: 1px solid rgba(23, 20, 17, 0.07);
  box-shadow: 0 8px 20px rgba(33, 30, 26, 0.06);
}
.ref-stop-label {
  font-size: 11px;
  font-weight: 540;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  opacity: 0.7;
  margin-bottom: 3px;
}
.ref-stop b { font-family: var(--font-brand); font-size: 14.5px; font-weight: 580; letter-spacing: -0.01em; color: var(--ink); }
.ref-stop i { font-style: normal; font-size: 12px; color: var(--ink-soft); }
.ref-stop-1 {
  width: 78%;
  transform: rotate(-0.7deg);
  background: linear-gradient(180deg, rgba(219, 231, 212, 0.5), rgba(219, 231, 212, 0.85));
}
.ref-stop-2 {
  width: 84%;
  justify-self: center;
  margin-top: -8px;
  transform: rotate(0.5deg);
  background: #fff;
  border-color: var(--hairline);
  z-index: 1;
}
/* Das Ziel: die dunkle Produkt-Kachel. */
.ref-stop-3 {
  position: relative;
  overflow: hidden;
  width: 88%;
  justify-self: end;
  margin-top: -8px;
  transform: rotate(-0.4deg);
  background: var(--dark);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 16px 34px rgba(33, 30, 26, 0.18);
  padding: 16px 18px 15px;
  z-index: 2;
}
.ref-stop-3::after {
  content: "";
  position: absolute;
  right: -60px; top: -70px;
  width: 210px; height: 180px;
  background:
    radial-gradient(50% 50% at 55% 50%, rgba(235, 127, 181, 0.2), transparent 70%),
    radial-gradient(44% 46% at 40% 60%, rgba(154, 134, 221, 0.14), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}
.ref-stop-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 540;
  letter-spacing: 0.02em;
  color: rgba(244, 241, 234, 0.6);
  margin-bottom: 3px;
}
.ref-stop-head svg { width: 11px; height: 11px; color: #a8e0c2; }
.ref-stop-3 b { color: #fff; font-size: 15.5px; }
.ref-stop-3 i { color: rgba(244, 241, 234, 0.7); }
.ref-status {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 560;
  color: rgba(244, 241, 234, 0.9);
  background: rgba(244, 241, 234, 0.1);
  box-shadow: inset 0 0 0 1px rgba(244, 241, 234, 0.12);
  border-radius: 999px;
  padding: 4px 11px 5px;
}

/* ── Über uns ──────────────────────────────────────────── */
/* Steckbrief-Karten der Gruender */
.ua-founders {
  margin-top: clamp(24px, 3vw, 36px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(16px, 2.4vw, 24px);
}
.ua-founders { grid-template-rows: repeat(4, auto); }
.ua-founder {
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: clamp(22px, 3vw, 30px);
  box-shadow: 0 8px 20px rgba(33, 30, 26, 0.05);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  align-content: start;
}
.ua-founder-sky { background: #fff radial-gradient(130% 100% at 50% 118%, rgba(191, 226, 255, 0.75), transparent 70%); }
.ua-founder-lilac { background: #fff radial-gradient(130% 100% at 50% 118%, rgba(227, 218, 242, 0.8), transparent 70%); }
.ua-portrait {
  width: min(100%, 220px); height: auto;
  aspect-ratio: 1;
  border-radius: 18px;
  object-fit: cover;
  transform: rotate(-1deg);
  box-shadow: 0 8px 20px rgba(33, 30, 26, 0.1);
}
.ua-founder-head { margin-top: 18px; }
.ua-founder-head h3 { font-size: 21px; letter-spacing: -0.016em; }
.ua-role { display: block; margin-top: 2px; font-size: 13px; color: var(--stone); }
.ua-cred { display: block; margin-top: 3px; font-size: 11.5px; color: var(--stone-faint); }
.ua-bio { margin-top: 12px; font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); max-width: 48ch; }
.ua-kennt { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--hairline-strong); display: grid; gap: 10px; }
.ua-kennt-label {
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--stone-faint);
}
.ua-kennt-row { display: grid; gap: 2px; }
.ua-kennt-row b { font-family: var(--font-brand); font-size: 14px; font-weight: 580; letter-spacing: -0.01em; color: var(--ink); }
.ua-kennt-row i { font-style: normal; font-size: 13px; line-height: 1.55; color: var(--ink-soft); max-width: 44ch; }
/* Zusammenarbeit: das Wortgeruest aus Versprechenssteinen */
.ua-cloudwrap {
  margin-top: clamp(24px, 3vw, 36px);
  display: grid;
  grid-template-columns: minmax(320px, 1.2fr) minmax(280px, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.ua-wall { display: grid; gap: 9px; justify-items: center; align-content: center; }
.ua-wall-row { display: flex; gap: 9px; align-items: stretch; }
.ua-brick {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 560;
  letter-spacing: -0.012em;
  line-height: 1;
  color: var(--ink);
  border-radius: 10px;
  padding: 10px 16px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(23, 20, 17, 0.08);
}
.ua-brick.b-main {
  font-size: 28px;
  font-weight: 620;
  letter-spacing: -0.022em;
  padding: 12px 20px 15px;
}
.ua-brick.b-lime { background: #bcd970; }
.ua-brick.b-mint { background: #84d0aa; }
.ua-brick.b-sky { background: #85bdec; }
.ua-brick.b-lilac { background: #b7a0f0; }
.ua-brick.b-peach { background: #f5a266; }
.ua-brick.b-pink { background: #ef94c5; }
.ua-brick.b-sand { background: #ecc76f; }
.ua-cloud-legend { list-style: none; margin: 0; padding: 0; display: grid; }
.ua-cloud-legend li {
  position: relative;
  padding: 16px 0 16px 30px;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.014em;
  color: var(--ink-soft);
}
.ua-cloud-legend li + li { border-top: 1px solid var(--hairline); }
.ua-cloud-dot {
  position: absolute;
  left: 2px;
  top: 28px;
  width: 11px; height: 11px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(23, 20, 17, 0.12);
}
.ua-dot-sage { background: var(--sage); }
.ua-dot-sky { background: var(--sky); }
.ua-dot-peach { background: var(--peach); }
.ua-dot-lilac { background: var(--lilac); }
.ua-dot-sand { background: var(--sand); }
@media (max-width: 860px) {
  .ua-cloudwrap { grid-template-columns: 1fr; }
  .ua-wall-row { flex-wrap: wrap; justify-content: center; }
}
/* Region: zwei persoenliche Routen */
.ua-routes { margin-top: clamp(24px, 3vw, 36px); display: grid; gap: 22px; max-width: 940px; }
.ua-route {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 0;
}
.ua-route-who {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 580;
  letter-spacing: -0.008em;
  color: var(--ink);
  margin-right: 24px;
  min-width: 118px;
}
.ua-route-who img {
  width: 42px; height: 42px;
  border-radius: 12px;
  object-fit: cover;
}
.ua-stop {
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 540;
  letter-spacing: -0.008em;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 11px 20px 12px;
  white-space: nowrap;
}
.ua-stop-end { background: var(--accent-soft); border-color: rgba(46, 90, 120, 0.35); color: var(--accent); }
.ua-route-line {
  flex: 1;
  min-width: 18px;
  max-width: 64px;
  border-top: 1.5px dashed var(--hairline-strong);
  margin: 0 -1px;
}
@media (max-width: 760px) {
  .ua-route { align-items: center; }
  .ua-route-who { width: 100%; margin-right: 0; margin-bottom: 2px; }
}


/* Die Bruecke: beide kennen sich aus der KI-Politik. */
.ua-founders { position: relative; }
/* Als Sticker quer ueber beiden Karten, Collage-Sprache. */
.ua-bridge {
  position: absolute;
  left: 50%;
  top: clamp(56px, 7vw, 92px);
  transform: translateX(-50%) rotate(-2.2deg);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-brand);
  font-size: 13px;
  font-weight: 560;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: var(--paper-deep);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  padding: 10px 16px 11px;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(33, 30, 26, 0.12);
}
.ua-bridge svg { width: 13px; height: 13px; color: var(--accent); }
@media (max-width: 760px) {
  .ua-bridge { display: none; }
}


/* Politik: hin und zurueck, zwei Ton-Plates */
.ua-politik {
  margin-top: clamp(24px, 3vw, 36px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.ua-pol {
  border-radius: 18px;
  padding: clamp(20px, 3vw, 28px);
}
.ua-pol-slate { background: rgba(211, 224, 230, 0.45); border: 1px solid rgba(178, 200, 210, 0.5); }
.ua-pol-sage { background: rgba(219, 231, 212, 0.45); border: 1px solid rgba(188, 207, 178, 0.5); }
.ua-pol-label {
  display: inline-block;
  font-family: var(--font-brand);
  font-size: 13px;
  font-weight: 580;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(23, 20, 17, 0.08);
  border-radius: 999px;
  padding: 5px 13px 6px;
  margin-bottom: 14px;
}
.ua-pol ul { list-style: none; margin: 0; padding: 0; display: grid; }
.ua-pol li {
  padding: 9px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.ua-pol li + li { border-top: 1px solid rgba(23, 20, 17, 0.08); }

/* ── Kontakt: der Brief an die Gruender ────────────────── */
.fd-person { display: inline-grid; justify-items: center; gap: 6px; }
.fd-person + .fd-person { margin-left: 14px; }
.fd-person i { font-style: normal; font-size: 12.5px; font-weight: 540; color: var(--ink-soft); }
.letter-hello {
  display: block;
  font-family: var(--font-brand);
  font-size: 18px;
  font-weight: 580;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin-bottom: 6px;
}
.letter-body textarea {
  width: 100%;
  border: 0;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 35px, var(--hairline) 35px, var(--hairline) 36px);
  background-attachment: local;
  font: inherit;
  font-size: 15.5px;
  line-height: 36px;
  color: var(--ink);
  min-height: 218px;
  resize: vertical;
  padding: 0;
  outline: none;
}
.letter-body textarea::placeholder { color: var(--stone-faint); }
.letter-body.has-error textarea { background-color: rgba(164, 36, 59, 0.03); }
.letter-sender {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.letter-dash { display: none; }
.letter-field { flex: 1; min-width: 180px; }
.letter-field input {
  width: 100%;
  border: 1px solid var(--hairline-strong);
  border-radius: 11px;
  background: var(--paper);
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  padding: 12px 15px;
  outline: none;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.letter-field input:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46, 90, 120, 0.12);
}
.letter-field input::placeholder { color: var(--stone-faint); }
.letter-field.has-error input { border-color: var(--cherry); }

/* Kontakt-Feinschliff: Luft zwischen Brief, Antwortkarte und Direkt-Zeile */
.reply-card { margin-top: 28px; }
.contact-form-solo .form-foot { margin-top: 30px; }
.contact-direct { margin-top: 40px; display: grid; justify-items: center; gap: 18px; }
.contact-direct-lead { font-size: 14px; color: var(--stone); }
.contact-direct-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px clamp(28px, 4vw, 48px); }
.direct-chip {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.direct-chip svg { display: none; }
.direct-chip .dc-ic {
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  margin-top: 2px;
}
.direct-chip .dc-ic svg { display: block; width: 16px; height: 16px; }
.direct-chip .dc-text { display: grid; gap: 0; text-align: left; }
.direct-chip .dc-text b {
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 560;
  letter-spacing: -0.008em;
  color: var(--ink);
  white-space: nowrap;
}
.direct-chip:hover .dc-text b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.direct-chip .dc-text i { font-style: normal; font-size: 11.5px; color: var(--stone); }

/* Schnellstart-Chips im Brief */
.letter-quick { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 20px; }
.letter-quick button {
  font-family: var(--font-brand);
  font-size: 12.5px;
  font-weight: 540;
  letter-spacing: -0.005em;
  color: var(--stone);
  background: none;
  border: 1px dashed var(--hairline-strong);
  border-radius: 9px;
  padding: 6px 12px 7px;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.letter-quick button:hover { color: var(--ink); border-color: var(--stone); }
.letter-quick button.is-active {
  background: var(--accent-soft);
  border: 1px solid rgba(46, 90, 120, 0.35);
  color: var(--accent);
}

/* Toast fuer Formular-Hinweise */
.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 16px);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 94vw;
  white-space: nowrap;
  background: var(--dark);
  color: var(--paper-deep);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 12px 19px 13px;
  font-size: 13.5px;
  line-height: 1.4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 40px rgba(33, 30, 26, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.35s cubic-bezier(0.3, 1.2, 0.4, 1);
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.toast::before {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-radius: 3px;
  background: var(--cherry);
}
@keyframes toast-shake {
  0%, 100% { margin-left: 0; }
  20% { margin-left: -9px; }
  40% { margin-left: 8px; }
  60% { margin-left: -6px; }
  80% { margin-left: 4px; }
}
.toast.is-shake { animation: toast-shake 0.45s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 0.3s var(--ease); transform: translate(-50%, 0); }
  .toast.is-shake { animation: none; }
}

/* Kontakt: Erfolgszustand als eigener Moment */
.contact-success {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: clamp(30px, 4vw, 44px) clamp(24px, 4vw, 48px);
  box-shadow: 0 14px 30px rgba(33, 30, 26, 0.08);
}
.cs-duo { display: flex; }
.cs-duo img {
  width: 52px; height: 52px;
  max-width: none;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 6px 16px rgba(33, 30, 26, 0.12);
}
.cs-duo img:first-child { transform: rotate(-2deg); }
.cs-duo img + img { margin-left: -8px; transform: rotate(1.6deg); }
.contact-success p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); max-width: 42ch; }
.cs-status {
  font-size: 12px;
  font-weight: 560;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 5px 13px 6px;
}
.contact-success .feld-link { margin-top: 6px; }
.cs-spark { width: 24px; height: 24px; color: var(--accent); }

/* ── Legal-Seiten ──────────────────────────────────────── */
.legal-prose { max-width: 72ch; }
.legal-prose h2 {
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: -0.016em;
  margin-top: clamp(32px, 4.4vw, 52px);
  padding-top: clamp(20px, 3vw, 30px);
  border-top: 1px solid var(--hairline);
}
.legal-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-prose h3 { font-size: 16.5px; letter-spacing: -0.01em; margin-top: 26px; }
.legal-prose h4 { font-size: 14.5px; letter-spacing: -0.008em; margin-top: 18px; color: var(--ink-soft); }
.legal-prose p { margin-top: 10px; font-size: 14.5px; line-height: 1.68; color: var(--ink-soft); }
.legal-prose ul { margin: 10px 0 0 18px; padding: 0; display: grid; gap: 6px; }
.legal-prose li { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.legal-prose a { color: var(--ink); }
.legal-prose .legal__date { margin-top: 34px; font-size: 12.5px; color: var(--stone); }

/* ── Workshops: archivierter Praxis-Rückblick ───────────── */
.wk-recap-sec { padding-top: clamp(22px, 3vw, 40px); }
.wk-recap {
  display: grid;
  grid-template-columns: minmax(250px, 0.82fr) minmax(0, 1.18fr);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 46px rgba(33, 30, 26, 0.08);
}
.wk-recap-visual {
  margin: 0;
  min-height: 420px;
  background: var(--paper-deep);
  overflow: hidden;
}
.wk-recap-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
}
.wk-recap-body {
  align-self: center;
  padding: clamp(28px, 4vw, 52px);
}
.wk-recap-body h2 {
  margin-top: 12px;
  max-width: 16ch;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.06;
  text-wrap: balance;
}
.wk-recap-body > p {
  margin-top: 16px;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ink-soft);
}
.wk-recap-facts {
  margin: 28px 0 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.wk-recap-facts div { padding: 16px 14px 17px 0; }
.wk-recap-facts div + div {
  padding-left: 14px;
  border-left: 1px solid var(--hairline);
}
.wk-recap-facts dt {
  font-family: var(--font-brand);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 620;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.wk-recap-facts dd {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--stone);
}
@media (max-width: 760px) {
  .wk-recap { grid-template-columns: 1fr; }
  .wk-recap-visual { min-height: 0; }
  .wk-recap-visual img { aspect-ratio: 16 / 9; height: auto; }
  .wk-recap-body h2 { max-width: 20ch; }
}
@media (max-width: 460px) {
  .wk-recap-facts { grid-template-columns: 1fr 1fr; }
  .wk-recap-facts div:nth-child(3) {
    grid-column: 1 / -1;
    padding-left: 0;
    border-top: 1px solid var(--hairline);
    border-left: 0;
  }
}

/* ── Veranstaltung: KI-Praxiswerkstatt (DiZwei) ────────── */
.page-event-dizwei h1,
.page-event-dizwei h2,
.page-event-dizwei h3 {
  text-wrap: balance;
}
.ev-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-brand);
  font-size: 13.5px;
  font-weight: 580;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 14px;
}
.ev-kicker svg { width: 13px; height: 13px; color: var(--accent); }
.ev-cross { color: var(--stone-faint); font-weight: 400; }
.ev-archive-badge {
  display: table;
  margin: 2px 0 14px;
  padding: 6px 12px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-brand);
  font-size: 12px;
  font-weight: 590;
}
.ev-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: clamp(38px, 6vw, 84px);
  align-items: center;
}
.ev-hero-content { min-width: 0; }
.page-head .ev-hero-title {
  max-width: 19ch;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.04;
}
.ev-hero-title .glow-word {
  z-index: 0;
  white-space: nowrap;
}
.ev-hero-lede {
  margin-top: 26px;
  max-width: 700px;
  font-family: var(--font-brand);
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 540;
  line-height: 1.38;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.page-head .intro.ev-hero-copy { margin-top: 12px; }
.ev-hero-cta { margin-top: 26px; }
.ev-hero-visual {
  margin: 0;
  width: min(100%, 420px);
  justify-self: end;
  overflow: hidden;
  border-radius: 20px;
  background: var(--paper-deep);
  box-shadow: 0 18px 40px rgba(33, 30, 26, 0.12);
}
.ev-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
.ev-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(12px, 2vw, 18px);
  align-items: stretch;
}
.ev-date {
  display: grid;
  gap: 2px;
  justify-items: start;
  text-decoration: none;
  border-radius: 18px;
  padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid rgba(23, 20, 17, 0.07);
  box-shadow: 0 8px 20px rgba(33, 30, 26, 0.06);
}
.ev-date-lime { background: linear-gradient(180deg, rgba(217, 242, 142, 0.4), rgba(217, 242, 142, 0.75)); transform: rotate(-0.5deg); }
.ev-date-sky { background: linear-gradient(180deg, rgba(191, 226, 255, 0.4), rgba(191, 226, 255, 0.75)); transform: rotate(0.4deg); }
.ev-date-num {
  font-family: var(--font-brand);
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 620;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.ev-date-meta { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.ev-date-cta {
  margin-top: 12px;
  font-family: var(--font-brand);
  font-size: 12.5px;
  font-weight: 580;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(23, 20, 17, 0.1);
  border-radius: 999px;
  padding: 6px 14px 7px;
}
.ev-place {
  display: grid;
  gap: 3px;
  align-content: center;
  justify-items: start;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: clamp(18px, 2.6vw, 26px);
  box-shadow: 0 8px 20px rgba(33, 30, 26, 0.05);
}
.ev-place b { font-family: var(--font-brand); font-size: 15px; font-weight: 580; letter-spacing: -0.01em; color: var(--ink); }
.ev-place i { font-style: normal; font-size: 13.5px; color: var(--ink-soft); }
.ev-place-meta {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 560;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 4px 11px 5px;
}
/* Konkrete Lernergebnisse */
.ev-outcome-sec { background: rgba(255, 255, 255, 0.36); }
.ev-outcomes {
  margin-top: clamp(24px, 3.4vw, 38px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: var(--hairline);
}
.ev-outcome {
  min-height: 190px;
  padding: clamp(22px, 3vw, 34px);
  background: var(--paper);
}
.ev-outcome > span,
.ev-case-steps article > span {
  display: block;
  font-family: var(--font-brand);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 24px;
}
.ev-outcome h3,
.ev-case-steps h3 { font-size: 18px; letter-spacing: -0.014em; }
.ev-outcome p,
.ev-case-steps p {
  margin-top: 9px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-soft);
}
/* Fallstudie als Beleg für den Weg von Orientierung zu Betrieb */
.ev-case {
  display: grid;
  grid-template-columns: minmax(270px, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(30px, 5vw, 72px);
  padding: clamp(26px, 4vw, 48px);
  border-radius: 20px;
  background: var(--ink);
  color: var(--paper);
}
.ev-case-head .kicker { color: var(--sky); }
.ev-case-head h2 {
  margin-top: 10px;
  font-size: clamp(24px, 3.4vw, 36px);
  letter-spacing: -0.024em;
  max-width: 16ch;
}
.ev-case-head > p {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.72);
}
.ev-case-head .text-link {
  margin-top: 22px;
  color: #fff;
}
.ev-case-steps {
  display: grid;
  align-content: start;
}
.ev-case-steps article {
  padding: 4px 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.ev-case-steps article + article { padding-top: 22px; }
.ev-case-steps article:last-child { border-bottom: 0; padding-bottom: 0; }
.ev-case-steps article > span { color: var(--lime); margin-bottom: 10px; }
.ev-case-steps h3 { color: #fff; }
.ev-case-steps p { color: rgba(255, 255, 255, 0.68); }
/* Startkarte als Artefakt */
.ev-result {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.ev-result-text h2 {
  font-size: clamp(24px, 3.4vw, 34px);
  letter-spacing: -0.02em;
  max-width: none;
}
.ev-result-text h2 span { display: inline-block; }
.ev-result-text p { margin-top: 14px; font-size: 15.5px; line-height: 1.66; color: var(--ink-soft); max-width: 48ch; }
/* Hinweis neben der Startkarte — KEIN Kasten.

   Zwei Anläufe mit Behältern sind gescheitert, erst blau, dann warm mit
   Haarlinie. Der Fehler war nicht die Farbe, sondern der Behälter: ein
   Kasten behauptet ein eigenes Bauteil, wo in Wahrheit nur ein
   nachgeordneter Gedanke steht — und in einer Papierfläche wirkt jede
   Umrandung wie ein Fremdkörper.

   Stattdessen die Randnotiz aus dem Zeitschriftensatz: kein Rahmen,
   keine Fläche, keine Linie. Der Rang entsteht allein aus Typografie —
   kleiner, stiller, schmaleres Satzmaß, viel Luft darüber. Markiert wird
   sie vom Sternzeichen der Marke, genau wie die Kicker (.prog-kicker) es
   schon tun. Ein Zeichen statt eines Rahmens. */
.ev-result-text .ev-result-note {
  margin-top: clamp(24px, 3.2vw, 34px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.72;
  color: var(--stone);
}
/* Das Zeichen sitzt auf der ersten Zeile, nicht auf deren Oberkante. */
.ev-result-text .ev-result-note .ai-ico { margin-top: 4px; color: var(--accent); }
@media (max-width: 900px) {
  .ev-result-text .ev-result-note { max-width: none; }
}

.ev-card {
  justify-self: center;
  width: min(100%, 400px);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 22px 24px 20px;
  box-shadow: 0 14px 30px rgba(33, 30, 26, 0.10);
  transform: rotate(0.6deg);
  display: grid;
  gap: 15px;
}
.ev-card-tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-brand);
  font-size: 13px;
  font-weight: 580;
  color: var(--ink);
  background: var(--paper-deep);
  border-radius: 999px;
  padding: 6px 13px 7px;
}
.ev-card-tag svg { width: 12px; height: 12px; color: var(--accent); }
.ev-card-field { display: grid; gap: 2px; }
.ev-card-field b { font-family: var(--font-brand); font-size: 13.5px; font-weight: 580; letter-spacing: -0.01em; color: var(--ink); }
.ev-card-field i { font-style: normal; font-size: 12px; color: var(--stone); }
.ev-card-line { margin-top: 9px; border-bottom: 1.5px solid var(--hairline); }
/* Zielgruppen-Chips */
.ev-audience { margin-top: clamp(20px, 3vw, 30px); display: flex; flex-wrap: wrap; gap: 10px; max-width: 780px; }
.ev-audience span {
  font-family: var(--font-brand);
  font-size: 13.5px;
  font-weight: 540;
  letter-spacing: -0.005em;
  color: var(--ink);
  padding: 9px 16px 10px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(33, 30, 26, 0.1);
}
.ev-audience .tone-a { background: var(--sage); transform: rotate(-0.8deg); }
.ev-audience .tone-b { background: var(--sky); transform: rotate(0.5deg); }
.ev-audience .tone-c { background: var(--peach); transform: rotate(-0.4deg); }
.ev-audience .tone-d { background: var(--lilac); transform: rotate(0.6deg); }
.ev-audience .tone-e { background: var(--sand); transform: rotate(-0.6deg); }
/* Voraussetzungen und Workshop-Leitung */
.ev-requirements {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(340px, 1.2fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.ev-requirements-copy h2 { font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -0.02em; }
.ev-requirements-copy p {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.66;
  color: var(--ink-soft);
  max-width: 46ch;
}
.ev-requirements-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline-strong);
}
.ev-requirements-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.ev-requirements-list svg { margin-top: 3px; color: var(--accent); }
.ev-facilitators {
  margin-top: clamp(24px, 3.4vw, 38px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 1120px;
}
.ev-facilitator {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
}
.ev-facilitator img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 10px;
  filter: saturate(0.88);
}
.ev-facilitator h3 { font-size: 18px; letter-spacing: -0.014em; }
.ev-facilitator p { margin-top: 4px; font-size: 13px; line-height: 1.38; color: var(--ink-soft); }
.ev-partner-copy { margin-top: 4px; font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); }
@media (max-width: 900px) {
  .ev-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .ev-hero-visual { width: 100%; max-width: 420px; justify-self: start; }
  .ev-facilitators { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ev-hero-visual { max-width: none; }
  .ev-outcomes { grid-template-columns: 1fr; }
  .ev-outcome { min-height: 0; }
  .ev-case { grid-template-columns: 1fr; }
  .ev-result { grid-template-columns: 1fr; }
  .ev-card { justify-self: start; }
  .ev-requirements { grid-template-columns: 1fr; }
  .ev-facilitators { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ev-facilitator { grid-template-columns: 70px 1fr; gap: 14px; }
  .ev-facilitator img { width: 70px; height: 70px; }
}

/* Veranstaltung: Anmeldung */
.ev-dizwei { height: 20px; width: auto; display: inline-block; }
.ua-pol-logo { display: inline-flex; align-items: center; }
.ua-pol-logo img { height: 18px; width: auto; display: block; }
.ev-signup {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: clamp(24px, 3.4vw, 40px);
  box-shadow: 0 14px 30px rgba(33, 30, 26, 0.08);
  max-width: 760px;
}
.ev-signup-head h2 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.018em; }
.ev-signup-head p { margin-top: 8px; font-size: 15px; color: var(--ink-soft); }
.ev-termine {
  border: 0; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.ev-opt { display: block; cursor: pointer; }
.ev-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ev-opt span {
  display: grid;
  gap: 1px;
  min-height: 56px;
  align-content: center;
  padding: 12px 16px;
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: 560;
  letter-spacing: -0.008em;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--hairline-strong);
  border-radius: 13px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.ev-opt span i { font-style: normal; font-size: 12px; font-weight: 400; color: var(--stone); }
.ev-opt:hover span { border-color: var(--stone); }
.ev-opt input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.ev-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ev-opt-no-date span {
  background: #fff;
  border-style: dashed;
}
.ev-no-date-card {
  margin-top: 20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px 20px;
  align-items: start;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--accent-soft);
}
.ev-no-date-card[hidden] { display: none; }
.ev-no-date-duo { display: flex; align-items: center; }
.ev-no-date-duo img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 3px solid var(--accent-soft);
  border-radius: 50%;
}
.ev-no-date-duo img + img { margin-left: -15px; }
.ev-no-date-copy h3 { font-size: 18px; letter-spacing: -0.014em; }
.ev-no-date-copy p {
  margin-top: 5px;
  max-width: 50ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.ev-no-date-card .btn {
  grid-column: 2;
  justify-self: start;
}
.ev-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.ev-field label { display: block; font-size: 13px; font-weight: 540; color: var(--ink); margin-bottom: 6px; }
.ev-field label i { font-style: normal; font-weight: 400; color: var(--stone-faint); }
.ev-field input {
  width: 100%;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: 11px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.ev-field input:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46, 90, 120, 0.12); }
.ev-signup .form-foot { margin-top: 24px; }
.ev-signup-success {
  display: grid;
  justify-items: start;
  gap: 10px;
  margin-top: 20px;
  background: var(--accent-soft);
  border: 1px solid rgba(46, 90, 120, 0.25);
  border-radius: 14px;
  padding: 20px 22px;
}
.ev-signup-success svg { width: 20px; height: 20px; color: var(--accent); }
.ev-signup-success p { font-size: 15px; line-height: 1.6; color: var(--ink); max-width: 52ch; }
@media (max-width: 700px) {
  .ev-no-date-card { grid-template-columns: 1fr; }
  .ev-no-date-card .btn { grid-column: auto; justify-self: start; }
}

/* Fundament-Diagramm mobil: Knoten stapeln, Linien weglassen */
@media (max-width: 700px) {
  .fund-top { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .fund-node { white-space: normal; font-size: 12.5px; padding: 7px 11px 8px; }
  .fund-lines { display: none; }
  .fund-base { margin-top: 16px; }
  .fund-slab { width: 100%; }
}

/* Programmatische Seiten: Link-Zeile unter Prosa-Abschnitten */
.prog-links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; }
.prog-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-brand);
  font-size: 13.5px;
  font-weight: 580;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 14px;
}
.prog-kicker svg { width: 13px; height: 13px; color: var(--accent); }
/* Editorial-Split: Titel links, Inhalt rechts — fuellt die Breite. */
.prog-split {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(320px, 1.25fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.prog-split h2 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.018em; max-width: 16ch; }
.prog-split-body p { font-size: 15.5px; line-height: 1.68; color: var(--ink-soft); max-width: 58ch; }
.prog-plate {
  border-radius: 18px;
  padding: clamp(22px, 3.2vw, 34px);
}
.prog-plate-sage { background: rgba(219, 231, 212, 0.45); border: 1px solid rgba(188, 207, 178, 0.5); }
.prog-plate-slate { background: rgba(211, 224, 230, 0.45); border: 1px solid rgba(178, 200, 210, 0.5); }
.prog-plate-sand { background: rgba(236, 227, 207, 0.45); border: 1px solid rgba(213, 200, 166, 0.5); }
.prog-plate-lilac { background: rgba(227, 218, 242, 0.45); border: 1px solid rgba(198, 184, 221, 0.5); }
.prog-plate ul { list-style: none; margin: 0; padding: 0; display: grid; }
.prog-plate li {
  padding: 13px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.prog-plate li:first-child { padding-top: 0; }
.prog-plate li:last-child { padding-bottom: 0; }
.prog-plate li + li { border-top: 1px solid rgba(23, 20, 17, 0.08); }
.prog-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.prog-chip {
  font-family: var(--font-brand);
  font-size: 13px;
  font-weight: 540;
  letter-spacing: -0.005em;
  color: var(--ink);
  padding: 8px 14px 9px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(33, 30, 26, 0.1);
}
.prog-chip-sage { background: var(--sage); transform: rotate(-0.8deg); }
.prog-chip-slate { background: var(--slate); transform: rotate(0.6deg); }
.prog-chip-sand { background: var(--sand); transform: rotate(-0.5deg); }
.prog-chip-clay { background: var(--clay); transform: rotate(0.7deg); }
.prog-chip-lilac { background: var(--lilac); transform: rotate(-0.6deg); }

@media (max-width: 760px) {
  .prog-split { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Webdesign: Leistungs-Grid + Site-Previews ───────────── */
/* Bento statt 2x2. Vorher vier gleich grosse weisse Karten nebeneinander
   — keine Rangfolge, keine Farbe, und damit austauschbar.
   Gleiche Bauweise wie .ie-bento auf der Entwicklungs-Seite: 12er Raster,
   ungleiche Spalten, je ein eigener Farbschimmer auf eigener Ebene.
   Vier Elemente statt drei, darum 7/5 in der ersten und 5/7 in der
   zweiten Zeile: der Rhythmus kippt, statt sich zu wiederholen. */
.wd-grid {
  margin-top: clamp(24px, 3.4vw, 40px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 2vw, 20px);
}
.wd-grid-item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(33, 30, 26, 0.05);
}
.wd-grid-item:nth-child(1) { grid-column: span 7; --wd-glow: radial-gradient(130% 100% at 50% 115%, rgba(201, 236, 201, 0.85), transparent 70%); }
.wd-grid-item:nth-child(2) { grid-column: span 5; --wd-glow: radial-gradient(130% 100% at 50% 115%, rgba(191, 226, 255, 0.85), transparent 70%); }
.wd-grid-item:nth-child(3) { grid-column: span 5; --wd-glow: radial-gradient(130% 100% at 50% 115%, rgba(227, 218, 242, 0.9), transparent 70%); }
.wd-grid-item:nth-child(4) { grid-column: span 7; --wd-glow: radial-gradient(130% 100% at 50% 115%, rgba(255, 207, 168, 0.75), transparent 70%); }
/* Schimmer auf eigener Ebene, damit der Hover ihn verstaerken kann,
   ohne den Text anzufassen. */
.wd-grid-item::before,
.wd-grid-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wd-glow, none);
  pointer-events: none;
}
.wd-grid-item::after { opacity: 0; transition: opacity 0.55s var(--ease); }
.wd-grid-item:hover::after { opacity: 0.85; }
.wd-grid-item h3 { font-size: 18px; letter-spacing: -0.014em; }
.wd-grid-item p { margin-top: 8px; color: var(--stone); font-size: 14.5px; line-height: 1.6; }
/* Der Schimmer steigt nach dem Einlaufen auf, nicht gleichzeitig. */
html.js .wd-grid[data-reveal] .wd-grid-item::before {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.8s var(--ease) calc(var(--reveal-delay, 0s) + 0.4s), translate 0.8s var(--ease) calc(var(--reveal-delay, 0s) + 0.4s);
}
html.js .wd-grid[data-reveal].is-revealed .wd-grid-item::before { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  html.js .wd-grid[data-reveal] .wd-grid-item::before { opacity: 1; translate: none; transition: none; }
  .wd-grid-item::after { transition: none; }
}
@media (max-width: 860px) {
  .wd-grid-item:nth-child(n) { grid-column: 1 / -1; }
}

.wd-shots {
  margin-top: clamp(24px, 3.4vw, 40px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px) clamp(16px, 2.2vw, 26px);
}
.wd-shot { display: block; color: inherit; text-decoration: none; }
.wd-shot-frame {
  display: block;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(33, 30, 26, .07);
  transition: translate .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.wd-shot:hover .wd-shot-frame {
  translate: 0 -4px;
  border-color: var(--slate-line);
  box-shadow: 0 18px 44px rgba(33, 30, 26, .12);
}
.wd-shot-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
}
.wd-shot-bar i { width: 8px; height: 8px; border-radius: 999px; background: var(--hairline-strong); }
.wd-shot-bar b {
  margin-left: 8px;
  font-family: var(--font-brand);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--stone);
  letter-spacing: .02em;
}
.wd-shot-frame img { display: block; width: 100%; height: auto; }
.wd-shot-meta {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--stone);
}
@media (max-width: 860px) {
  .wd-shots { grid-template-columns: 1fr; }
}

/* ── Startseite: Veranstaltungs-Band unter dem Hero ─────── */
.home-event-sec {
  padding-top: clamp(30px, 4vw, 54px);
  padding-bottom: clamp(30px, 4vw, 54px);
}
.home-event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 40%);
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(33, 30, 26, 0.1);
}
.home-event-body {
  min-width: 0;
  padding: clamp(26px, 3.4vw, 46px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center; /* Textspalte mittig zur Bildhoehe */
}
.home-event-body .ev-kicker { margin-bottom: 12px; }
.home-event-badge {
  font-family: var(--font-brand);
  font-size: 12px;
  font-weight: 580;
  letter-spacing: 0.01em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 5px 12px 6px;
}
.home-event-body h2 {
  margin-top: 14px;
  font-size: clamp(30px, 4.2vw, 46px);
  letter-spacing: -0.026em;
  line-height: 1.05;
  text-wrap: balance;
}
.home-event-lede {
  margin-top: 10px;
  font-family: var(--font-brand);
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 540;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}
.home-event-copy {
  margin-top: 12px;
  max-width: 58ch;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-soft);
}
.home-event-dates {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.home-event-date {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  padding: 12px 18px 13px;
  border: 1px solid rgba(23, 20, 17, 0.07);
  box-shadow: 0 8px 18px rgba(33, 30, 26, 0.05);
}
.home-event-date-lime { background: linear-gradient(180deg, rgba(217, 242, 142, 0.4), rgba(217, 242, 142, 0.75)); }
.home-event-date-sky { background: linear-gradient(180deg, rgba(191, 226, 255, 0.4), rgba(191, 226, 255, 0.75)); }
.home-event-day {
  font-family: var(--font-brand);
  font-size: 30px;
  font-weight: 620;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.home-event-when { font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.home-event-place {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 18px;
  color: var(--stone);
}
.home-event-place svg { flex: none; margin-top: 2px; color: var(--stone); }
.home-event-place b {
  display: block;
  font-family: var(--font-brand);
  font-size: 14.5px;
  font-weight: 560;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.home-event-place i { font-style: normal; font-size: 13.5px; color: var(--stone); }
.home-event-cta {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.home-event-visual {
  margin: 0;
  position: relative;
  min-height: 320px;
  background: var(--paper-deep);
}
.home-event-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
}
@media (max-width: 900px) {
  .home-event { grid-template-columns: 1fr; }
  .home-event-visual { order: -1; min-height: 0; }
  .home-event-visual img { aspect-ratio: 16 / 9; height: auto; }
}
@media (max-width: 480px) {
  .home-event-visual img { aspect-ratio: 4 / 3; }
  .home-event-dates { gap: 10px; }
  .home-event-date { flex: 1 1 100%; }
  .home-event-cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* ── Regionale Landingpage: Termin-Zeile ─────────────────
   Termine als typografische Liste statt als Kacheln: eine Zeile je
   Termin, Haarlinien statt Karten, ein CTA pro Zeile. Trägt auch
   einen einzelnen Termin, ohne dass ein Block allein steht. */
.termin-list {
  margin-top: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--hairline-strong);
}
.termin-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  padding: clamp(16px, 2.2vw, 24px) clamp(6px, 1.4vw, 16px);
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
}
.termin-when {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.termin-day {
  font-family: var(--font-brand);
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 620;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  /* Der Akzent bleibt eine Markierung unter der Zahl, keine Kachel. */
  box-shadow: inset 0 -0.2em 0 rgba(217, 242, 142, 0.9);
}
.termin-month {
  font-family: var(--font-brand);
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 560;
  letter-spacing: -0.012em;
  color: var(--ink);
  white-space: nowrap;
}
.termin-month span { color: var(--stone); font-weight: 500; }
.termin-month span::before { content: "· "; }
.termin-where {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.termin-where b {
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.termin-where i { font-style: normal; font-size: 13.5px; color: var(--stone); }
.termin-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--font-brand);
  font-size: 13.5px;
  font-weight: 560;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 9px 16px 10px;
}
@media (max-width: 700px) {
  .termin-line {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding-left: 0;
    padding-right: 0;
  }
  .termin-go { justify-self: start; margin-top: 2px; }
}