/* ============================================================
   HERO V17 — heller Header, 42/58-Split, drei Produktkarten
   ============================================================ */

/* Header: durchgehend hell, ~92 px; blauer Bereich beginnt darunter */
.page-home .topbar { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.page-home .topbar-in { min-height: 92px; padding-block: 0; }
.page-home .topbar:not(.is-scrolled) .nav-link { color: var(--ink); }
.page-home .topbar:not(.is-scrolled) .nav-link::after { background: var(--ink); }
.page-home .topbar:not(.is-scrolled) .nav .btn--solid { background: var(--cobalt); color: #fff; }
.page-home .topbar:not(.is-scrolled) .nav .btn--solid:hover { background: var(--cobalt-deep); }

.hero--split { padding-top: 92px; min-height: 0; display: block; }

/* Hintergrundmotiv (Glas) — responsives Set, Wechsel per Media Query.
   Motive per tools/hero_bg.py auf Papierton F1EEE4 abgeglichen; der Verlauf
   unten blendet ins Papier, damit der Hero nahtlos in die Seite uebergeht. */
.hero--split {
  background-image:
    linear-gradient(180deg, rgba(241, 238, 228, 0) 58%, #F1EEE4 97%),
    url("../img/hero-bg-mobile.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 641px) {
  .hero--split {
    background-image:
      linear-gradient(180deg, rgba(241, 238, 228, 0) 58%, #F1EEE4 97%),
      url("../img/hero-bg-tablet.webp");
  }
}
@media (min-width: 1200px) {
  .hero--split {
    background-image:
      linear-gradient(180deg, rgba(241, 238, 228, 0) 58%, #F1EEE4 97%),
      url("../img/hero-bg-desktop.webp");
  }
}
.hero-split {
  display: grid;
  grid-template-columns: 36% 64%;
  align-items: stretch;
  min-height: 800px;
}
.hero-copy3 {
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(5.5rem, 7.4vw, 7rem) clamp(2rem, 3.4vw, 3.5rem) 3rem var(--pad);
}
.hero-copy3 .hero-kicker { margin-bottom: clamp(1.1rem, 2vw, 1.7rem); }
.hero-copy3 .hero-h1 {
  font-size: clamp(2.4rem, 3.3vw, 3.9rem);
  line-height: 0.98;
  letter-spacing: -0.032em;
  margin-top: 0;
}
.hero-copy3 .hero-h1 .hl { color: var(--cobalt); }
.hero-copy3 .mask-in { white-space: nowrap; }
.hero-copy3 .hero-lead {
  margin-top: clamp(1.4rem, 2.2vw, 2.1rem);
  max-width: 38ch;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
}
.hero-copy3 .hero-ctas { margin-top: clamp(1.6rem, 2.4vw, 2.3rem); }

/* Hero-Prozessgrafik (helle Fläche) */
.hero-flow {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(0.5rem, 1.4vw, 1.4rem) clamp(1rem, 1.8vw, 1.8rem) clamp(0.5rem, 1.4vw, 1.4rem) 0;
  min-width: 0;
}
.hf { width: 100%; height: auto; max-height: 760px; display: block; overflow: visible; }

/* Beschriftungen */
.hf-kick {
  font-family: var(--font-mono); font-size: 15px;
  letter-spacing: 0.17em; fill: var(--cobalt);
}
.hf-kick--ops { fill: var(--cobalt); }
.hf-note { font-family: var(--font-sans); font-size: 16px; fill: var(--ink-2); }

/* Icons */
.hf-circ { fill: #fff; stroke: rgba(18,21,28,0.13); stroke-width: 1.6;
  filter: drop-shadow(0 6px 14px rgba(11,14,27,0.09)); }
.hf-l { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hf-f { fill: var(--cobalt); }
.hf-f2 { fill: #7A93FF; }
.hf-ico--brand .hf-l { stroke: var(--cobalt); stroke-width: 1.7; }
.hf-ico--brand .hf-f { fill: var(--cobalt); }
.hf-ico--white .hf-l { stroke: #fff; stroke-width: 2; }
.hf-ico--white .hf-f { fill: #fff; }
.hf-ico--white .hf-f2 { fill: rgba(255,255,255,0.7); }

/* Leitungen */
.hf-pipe {
  fill: none; stroke: var(--cobalt); stroke-width: 10;
  stroke-linecap: round; stroke-linejoin: round;
}
.hf-spark { fill: #fff; opacity: 0.9; }
.hf-node { fill: #fff; stroke: var(--cobalt); stroke-width: 7; }

/* Systemkarte */
.hf-card { fill: #FCFBF6; stroke: rgba(18,21,28,0.1); stroke-width: 1.6; }
.hf-card-t {
  font-family: var(--font-mono); font-size: 18px;
  letter-spacing: 0.22em; fill: var(--ink);
}
.hf-sub-bg { fill: #fff; stroke: rgba(18,21,28,0.09); stroke-width: 1.4;
  filter: drop-shadow(0 10px 22px rgba(11,14,27,0.07)); }
.hf-badge { fill: #E9EEFE; }
.hf-sub-t { font-family: var(--font-sans); font-size: 18px; font-weight: 720; fill: var(--ink); }

/* Mini-Interfaces */
.hf-ui-frame { fill: #FAF9F4; stroke: rgba(18,21,28,0.07); stroke-width: 1.2; }
.hf-ui-side, .hf-ui-box { fill: #fff; stroke: rgba(18,21,28,0.12); stroke-width: 1.2; }
.hf-ui-chip { fill: rgba(18,21,28,0.11); }
.hf-ui-fill { fill: var(--cobalt); }
.hf-ui-line { fill: none; stroke: var(--cobalt); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hf-ui-conn { fill: none; stroke: rgba(18,21,28,0.2); stroke-width: 1.6; }
.hf-ui-ring { fill: none; stroke: rgba(18,21,28,0.13); stroke-width: 9; }
.hf-ui-arc { fill: none; stroke: var(--cobalt); stroke-width: 9; stroke-linecap: round; }

/* Produktivbetrieb */
.hf-ops { fill: var(--night); filter: drop-shadow(0 22px 44px rgba(11,14,27,0.26)); }
.hf-ops-badge { fill: rgba(255,255,255,0.08); stroke: rgba(255,255,255,0.15); stroke-width: 1.2; }
.hf-ops-dot { fill: #4ED07A; }
.hf-ops-t { font-family: var(--font-sans); font-size: 19px; font-weight: 720; fill: #fff; }
.hf-ops-s { font-family: var(--font-sans); font-size: 14.5px; fill: rgba(255,255,255,0.6); }
.hf-ops-sep { stroke: rgba(255,255,255,0.13); stroke-width: 1.2; }

.hf-dash { stroke: rgba(18,21,28,0.22); stroke-width: 1.6; stroke-dasharray: 6 7; }
.hf-foot { font-family: var(--font-sans); font-size: 17px; fill: var(--ink-2); }

/* Einmaliges Einzeichnen */
.js.is-loaded .hf-pipe { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: hf-draw 1.6s var(--ease) 150ms forwards; }
@keyframes hf-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .js.is-loaded .hf-pipe { animation: none; stroke-dashoffset: 0; }
  .hf-spark { display: none; }
}


/* ---- Kartenmotive: feine, einheitliche Konturen ---- */
.hf-win { fill: #fff; stroke: rgba(18, 21, 28, 0.20); stroke-width: 1.1; }
.hf-win--back { fill: #FCFBF8; stroke: rgba(18, 21, 28, 0.19); }
.hf-win-bar { stroke: rgba(18, 21, 28, 0.12); stroke-width: 1; }
.hf-win-dot { fill: rgba(18, 21, 28, 0.22); }
.hf-nav { fill: #FBFAF6; stroke: rgba(18, 21, 28, 0.12); stroke-width: 1; }
.hf-nav-dot { fill: rgba(18, 21, 28, 0.2); }
.hf-nav-dot--on { fill: var(--cobalt); }
.hf-flaeche { fill: #FBFAF6; stroke: rgba(18, 21, 28, 0.14); stroke-width: 1; }
.hf-flaeche--hell { fill: #fff; }
.hf-aktion { fill: var(--cobalt); }
.hf-ok { fill: #fff; stroke: #2FA463; stroke-width: 1.6; }
.hf-ico--ok .hf-l { stroke: #2FA463; stroke-width: 2.2; }

/* Modulkacheln und Leitungen */
.hf-tile { fill: #fff; stroke: rgba(18, 21, 28, 0.18); stroke-width: 1.1; }
.hf-mod-line { fill: none; stroke: var(--cobalt); stroke-width: 1.5; opacity: 0.5; }
.hf-mod-line--stark { opacity: 0.95; stroke-width: 1.9; }

/* Plattformkern: gestapelte Systemebenen */
.hf-ebene { fill: #fff; stroke: var(--night); stroke-width: 1.2; }
.hf-ebene--navy { fill: var(--night); stroke: var(--night); }
.hf-ebene--kobalt { fill: var(--cobalt); stroke: var(--cobalt); }
.hf-ebene-pkt { fill: rgba(18, 21, 28, 0.28); }
.hf-ebene-pkt--hell { fill: rgba(255, 255, 255, 0.92); }
.hf-ebene-schacht { fill: none; stroke: rgba(18, 21, 28, 0.28); stroke-width: 1.2; }

/* Prüf- und Strukturierungsknoten */
.hf-knoten { fill: #fff; stroke: var(--cobalt); stroke-width: 1.4; }
.hf-knoten-spur { stroke: rgba(18, 21, 28, 0.26); stroke-width: 1.4; stroke-linecap: round; }
.hf-knoten-pkt { fill: var(--cobalt); }

/* Datenbasis: hell mit Navy-Kontur */
.hf-zyl { fill: #fff; stroke: var(--night); stroke-width: 1.2; }
.hf-zyl-top { fill: #EDF0FB; stroke: var(--night); stroke-width: 1.2; }
.hf-zyl-linie { fill: none; stroke: rgba(18, 21, 28, 0.28); stroke-width: 1.1; }


.hf-achse { stroke: var(--cobalt); stroke-width: 1.6; stroke-linecap: round; }
.hf-achse-pkt { fill: #fff; stroke: var(--cobalt); stroke-width: 1.6; }
.hf-achse-pkt--jetzt { fill: var(--cobalt); stroke: var(--cobalt); }

/* KI: Kern und Prüfschritt */
.hf-kern { fill: var(--cobalt); }
.hf-kern-schatten { fill: rgba(11, 14, 27, 0.13); }
.hf-pruef { fill: #fff; stroke: var(--cobalt); stroke-width: 1.4; }
.hf-ico--pruef .hf-l { stroke: var(--cobalt); stroke-width: 2.2; }

/* Symbole in den Motiven: feiner als die Titelsymbole */
.hf-motiv .hf-l { stroke-width: 1.7; }
.hf-motiv .hf-ico--white .hf-l { stroke-width: 1.9; }

/* Mobilfassung */
.hf--mobil { display: none; }
.hf-pipe--m { stroke-width: 8; }
.hf-kick--m { font-size: 17px; letter-spacing: 0.12em; }
.hf-card-t--m { font-size: 17px; letter-spacing: 0.18em; }
.hf-ops-t--m { font-size: 20px; }
.hf-ops-s--m { font-size: 15px; }

/* Leistungsstreifen */
.hero-rail { border-top: 1px solid var(--line); background: var(--paper); }
.hero-rail-in {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 88px; padding-right: var(--pad);
}
.hero-tabs { position: relative; display: flex; align-self: stretch; }
/* durchgehende Grundlinie, auf der der Fortschritt läuft */
.hero-tabs::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: rgba(18, 21, 28, 0.09);
}
.hero-tab {
  position: relative; overflow: hidden;
  appearance: none; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
  padding: 0 clamp(1rem, 2.4vw, 2rem);
  transition: color 320ms var(--ease), background 320ms var(--ease);
}
.hero-tab + .hero-tab { border-left: 1px solid var(--line); }
.hero-tab-nr { color: var(--cobalt); opacity: 0.5; transition: opacity 320ms var(--ease); }
.hero-tab-name { transition: transform 420ms var(--ease); }
.hero-tab:hover { color: var(--ink); }
.hero-tab.is-active {
  color: var(--ink);
  background: linear-gradient(to bottom, transparent, rgba(18, 33, 238, 0.05));
}
.hero-tab.is-active .hero-tab-nr { opacity: 1; }

/* Fortschritt: läuft im aktiven Reiter durch und übergibt an den nächsten */
.hero-tab-fill {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--cobalt); transform: scaleX(0); transform-origin: left;
}
.hero-tab.is-active .hero-tab-fill { animation: rail-run var(--rail-dauer, 3.4s) linear forwards; }
.hero-tab.is-past .hero-tab-fill { transform: scaleX(1); opacity: 0; transition: opacity 620ms var(--ease); }
.hero-rail.is-paused .hero-tab.is-active .hero-tab-fill { animation-play-state: paused; }
@keyframes rail-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Station in der Grafik mitführen */
.hf-halo { fill: var(--cobalt); opacity: 0; transform-box: fill-box; transform-origin: center; }
.hf-station .hf-circ, .hf-station .hf-kick, .hf-station .hf-note {
  transition: fill 420ms var(--ease), stroke 420ms var(--ease);
}
.hf-station .hf-l, .hf-station .hf-f, .hf-station .hf-f2 {
  transition: stroke 420ms var(--ease), fill 420ms var(--ease);
}
.hf-station.is-on .hf-halo { opacity: 0.1; animation: hf-puls 2.6s var(--ease) infinite; }
.hf-station.is-on .hf-circ { fill: var(--cobalt); stroke: var(--cobalt); }
.hf-station.is-on .hf-l { stroke: #fff; }
.hf-station.is-on .hf-f { fill: #fff; }
.hf-station.is-on .hf-f2 { fill: rgba(255, 255, 255, 0.72); }
.hf-station.is-on .hf-kick { fill: var(--cobalt-deep); }
.hf-station.is-on .hf-note { fill: var(--ink); }
.hf-pipe { transition: stroke-width 420ms var(--ease), opacity 420ms var(--ease); }
.hf-pipe[data-st] { opacity: 0.42; }
.hf-pipe[data-st].is-on { opacity: 1; stroke-width: 13; }
@keyframes hf-puls { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) {
  .hero-tab.is-active .hero-tab-fill { animation: none; transform: scaleX(1); }
  .hf-station.is-on .hf-halo { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-status > span { animation: none; }
  .hero-stage .hs-card { opacity: 1 !important; transform: none !important; }
}

/* Sehr breite Displays: Inhalt begrenzen */
@media (min-width: 1700px) {
  .hero-split { max-width: 1880px; margin-inline: auto; }
  .hs-flow { max-width: 1040px; }
}

/* Responsive */
@media (max-width: 1100px) {
  .hero-flow { display: block; padding: 0 var(--pad) 1rem; }
  .hf { max-height: none; }
}
/* Schmale Geräte bekommen die eigens gesetzte Fassung, kein verkleinertes Desktopbild */
@media (max-width: 860px) {
  .hf { display: none; }
  .hf--mobil { display: block; max-height: none; margin-inline: auto; max-width: 460px; }
}
@media (max-width: 620px) {
  .hero-tab {
    flex-direction: column; align-items: flex-start; gap: 0.22rem;
    font-size: 0.56rem; letter-spacing: 0.1em;
    padding: 0.9rem clamp(0.5rem, 2.4vw, 0.9rem);
  }
  .hero-tab-name { white-space: nowrap; }
  .hero-rail-in { padding-right: 0; }
}
@media (max-width: 900px) {
  .hero--split { padding-top: 76px; }
  .page-home .topbar-in { min-height: 76px; }
  .hero-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-copy3 { padding: 2.8rem var(--pad) 2.4rem; }
  .hero-copy3 .hero-h1 { font-size: clamp(2.3rem, 8.4vw, 3.2rem); }
  .hero-copy3 .hero-ctas .btn { flex: 1 1 auto; justify-content: center; padding-block: 1rem; }
  .hero-stage { padding: 2rem var(--pad) 2.5rem; }
  .hs-flow { grid-template-columns: minmax(0, 1fr); gap: 1rem; max-height: none; }
  .hs-card { font-size: 0.82rem; padding: 1.1rem 1rem; }
  .hs-card--produkt { padding: 0; }
  .hs-card-title { font-size: 0.7rem; }
  .hs-prod-value { font-size: 2rem; }
  .hs-fact b { font-size: 0.74rem; }
  .hs-fact i, .hs-prod-label { font-size: 0.58rem; }
  .hs-rows li, .hs-mi li { font-size: 0.78rem; }
  .hs-tags span { font-size: 0.58rem; }
  .hero-stage .hs-card { opacity: 1 !important; transform: none !important; }
  .hero-rail-in { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero-tabs { overflow-x: auto; }
  .hero-tab { padding: 1.1rem; }
  .hero-rail .hero-scrollhint { display: none; }
}

/* ============================================================
   MAKLERINDEX — Case-Study-Hauptabschnitt
   ============================================================ */
.mi { padding-block: clamp(4.5rem, 10vh, 8rem); }
.mi-grid2 {
  display: grid;
  grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.mi-h2 { margin-top: 1rem; font-size: clamp(2rem, 3.2vw, 3.1rem); line-height: 1.02; }
.mi-lead { margin-top: 1.2rem; color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
.mi-keys {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; margin-top: clamp(1.6rem, 3vh, 2.4rem);
}
.mi-keys li {
  display: flex; align-items: flex-start; gap: 0.65rem;
  font-size: 1.02rem; font-weight: 700; line-height: 1.3;
  padding: 1rem 1.2rem 1rem 0;
  border-top: 1px solid var(--line);
}
.mi-keys li:nth-child(even) { padding-left: 1.2rem; border-left: 1px solid var(--line); }
.mi-keys li > i { width: 11px; height: 11px; background: var(--cobalt); flex: none; margin-top: 0.28rem; }

/* Blaue Produktfläche mit dunkler Quellenoberfläche */
.mi-stage {
  position: relative;
  background: var(--cobalt);
  border-radius: 14px;
  padding: clamp(1.4rem, 2.4vw, 2.4rem);
  padding-bottom: clamp(3.4rem, 5vw, 4.6rem);
}
.mi-panel {
  background: var(--night);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  box-shadow: 0 26px 60px rgba(3, 8, 40, 0.4);
  overflow: hidden;
  color: #fff;
}
.mi-panel-bar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.mi-panel-title { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }
.mi-panel-tabs { display: flex; gap: 0.9rem; margin-left: auto; font-size: 0.76rem; color: rgba(255, 255, 255, 0.6); }
.mi-panel-tabs .is-active { color: #fff; box-shadow: 0 2px 0 #6E8CFF; }
.mi-panel-body { padding: 0.4rem 1.1rem 2.2rem; overflow-x: auto; }
.mi-table { width: 100%; min-width: 560px; border-collapse: collapse; table-layout: auto; }
.mi-table th {
  font-family: var(--font-mono); font-size: 0.56rem; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5); text-align: left;
  padding: 0.8rem 0.55rem 0.6rem 0; white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.mi-table td {
  font-size: 0.76rem; color: rgba(255, 255, 255, 0.72);
  padding: 0.62rem 0.55rem 0.62rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  white-space: nowrap;
}
.mi-table td:first-child { color: #fff; font-weight: 600; }
.mi-table tr:last-child td { border-bottom: 0; }
.mi-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 0.56rem;
  letter-spacing: 0.06em; padding: 0.24rem 0.5rem; border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.8);
}
.mi-badge--ok { border-color: rgba(78, 208, 122, 0.5); color: #7BE3A2; }
.mi-badge--warn { border-color: rgba(240, 178, 60, 0.5); color: #F3C56E; }
.mi-badge--new { border-color: rgba(110, 140, 255, 0.6); color: #9DB2FF; }
.mi-src { color: #9DB2FF; font-family: var(--font-mono); font-size: 0.62rem; }
.mi-panel-foot {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-mono); font-size: 0.56rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.mi-move {
  position: absolute; right: clamp(0.8rem, 1.6vw, 1.6rem); bottom: -1.6rem;
  width: min(268px, 36%);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 20px 44px rgba(3, 8, 40, 0.3);
  padding: 1rem 1.1rem;
}
.mi-move-title {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--line);
}
.mi-move li {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.62rem 0; border-bottom: 1px solid var(--line);
  font-size: 0.88rem; font-weight: 560;
}
.mi-move li:last-child { border-bottom: 0; }
.mi-move li > i { font-style: normal; color: var(--ink-2); }

.mi-effects {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 3rem);
  margin-top: clamp(3.4rem, 6vh, 5rem);
  padding-top: clamp(1.6rem, 3vh, 2.4rem);
  border-top: 1px solid var(--line);
}
.mi-effects h3 { font-size: 1.05rem; font-weight: 790; letter-spacing: -0.015em; }
.mi-effects p { margin-top: 0.5rem; color: var(--ink-2); font-size: 0.94rem; line-height: 1.55; }
.mi-note { margin-top: clamp(1.6rem, 3vh, 2.4rem); }

/* 13 Kapitel — ohne Überlappung */
.report-chapters {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(64px, 7vw, 112px);
  align-items: start;
}
.report-chapters > * { min-width: 0; }
.report-chapters__intro { max-width: 460px; position: static; }
.report-chapters__title {
  font-size: clamp(32px, 2.8vw, 46px);
  line-height: 1.0;
  font-weight: 850; font-stretch: 106%; letter-spacing: -0.028em;
  margin-top: 1rem;
  max-width: 100%;
  overflow-wrap: break-word;
  hyphens: auto;
}
.report-chapters__intro { overflow: hidden; }
.report-chapters__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

@media (max-width: 1100px) {
  .mi-grid2 { grid-template-columns: minmax(0, 1fr); }
  .mi-move { position: static; width: 100%; margin-top: 1.2rem; }
  .mi-stage { padding-bottom: clamp(1.4rem, 2.4vw, 2.4rem); }
  .report-chapters { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .report-chapters__intro { max-width: none; }
  .mi-effects { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
}
@media (max-width: 720px) {
  .report-chapters__cards { grid-template-columns: minmax(0, 1fr); }
  .report-chapters__title { font-size: clamp(30px, 8.4vw, 40px); }
  .mi-keys { grid-template-columns: minmax(0, 1fr); }
  .mi-keys li:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* ============================================================
   RECHTSSEITEN
   ============================================================ */
.legal { padding-block: clamp(7rem, 13vh, 9.5rem) clamp(4rem, 9vh, 7rem); }
.legal-body { max-width: 74ch; }
.legal-body h2 {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 800; font-stretch: 108%; letter-spacing: -0.015em;
  margin-top: clamp(2.2rem, 4.5vh, 3rem);
  padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.legal-body h3 { font-size: 1rem; font-weight: 700; margin-top: 1.6rem; }
.legal-body p, .legal-body ul { margin-top: 0.9rem; color: var(--ink); line-height: 1.65; }
.legal-body li { position: relative; padding-left: 1.3rem; margin-top: 0.4rem; color: var(--ink-2); }
.legal-body li::before { content: ""; position: absolute; left: 2px; top: 0.62rem; width: 6px; height: 6px; border: 1.5px solid var(--cobalt); }
.legal-body a { color: var(--cobalt); border-bottom: 1px solid currentColor; }
.legal-body address { font-style: normal; margin-top: 0.9rem; line-height: 1.65; }
.legal-todo {
  background: color-mix(in srgb, var(--cobalt) 7%, transparent);
  border-left: 3px solid var(--cobalt);
  padding: 0.8rem 1rem; margin-top: 0.9rem;
  font-size: 0.95rem;
}

/* ============================================================
   ÜBER KIRAKI V15 — Vorstellung, Belege, Prinzipien
   ============================================================ */
.ueber-head { padding-top: clamp(7rem, 13vh, 9.5rem); padding-bottom: clamp(3rem, 7vh, 5rem); }
.ueber-grid {
  display: grid;
  grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.ueber-h1 { max-width: 15ch; font-size: clamp(2.1rem, 3.5vw, 3.5rem); line-height: 1.02; }
.ueber-h1 .hl { color: var(--cobalt); }
.ueber-copy .phead-lead { max-width: 44ch; }
.ueber-link { margin-top: clamp(1.4rem, 3vh, 2rem); }
.ueber-link a { color: var(--cobalt); font-weight: 560; }

.ueber-fig { position: relative; }
.ueber-fig::after {
  content: ""; position: absolute;
  right: -1.4rem; bottom: 3.6rem;
  width: 58%; height: 52%;
  background: var(--cobalt);
  z-index: 0;
}
.ueber-fig-in { position: relative; z-index: 1; }
.ueber-fig-in img {
  width: 100%; height: auto; display: block;
  filter: grayscale(1) contrast(1.06);
}
.ueber-fig figcaption {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 0.2rem;
  margin-top: 1.1rem; padding-left: 0.1rem;
}
.ueber-name { font-size: 1.15rem; font-weight: 800; font-stretch: 108%; letter-spacing: -0.015em; }
.ueber-role { font-size: 0.92rem; color: var(--ink-2); }

.belege { border-block: 1px solid var(--line); background: var(--panel); }
.belege-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.beleg {
  padding: clamp(1.6rem, 3.5vh, 2.4rem) clamp(1rem, 2vw, 2rem);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.beleg + .beleg { border-left: 1px solid var(--line); }
.beleg-num {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 830; font-stretch: 110%;
  letter-spacing: -0.025em; line-height: 1.05;
}
.beleg .mlabel a { color: var(--cobalt); }

@media (max-width: 1020px) {
  .ueber-grid { grid-template-columns: minmax(0, 1fr); }
  .ueber-fig { max-width: 460px; }
  .ueber-h1 { max-width: none; }
  .belege-grid { grid-template-columns: minmax(0, 1fr); }
  .beleg + .beleg { border-left: 0; border-top: 1px solid var(--line); }
}

/* ============================================================
   CASE STUDY V16
   ============================================================ */
.pcards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2rem, 4.5vh, 3rem);
}
.pcard {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel);
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  display: flex; flex-direction: column;
}
.pcard-head {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
}
.pcard-ico {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 0.9rem; color: var(--ink-2);
  flex: none;
}
.pcard-price {
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 850; font-stretch: 112%;
  letter-spacing: -0.035em; line-height: 1;
  margin-top: 1.2rem;
}
.pcard-time { color: var(--ink-2); margin-top: 0.5rem; font-size: 0.95rem; }
.pcard-content {
  margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.pcard--hl { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.pcard--hl .pcard-head, .pcard--hl .pcard-time { color: rgba(255, 255, 255, 0.82); }
.pcard--hl .pcard-ico { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.pcard--hl .pcard-content { border-top-color: rgba(255, 255, 255, 0.32); color: #fff; }

.chapgroups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.chapgroup { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 1.1rem 1.2rem 1.2rem; }
.chapgroup-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--line);
}
.chapgroup-head span { color: var(--cobalt); }
.chaplist { margin-top: 0.7rem; }
.chaplist li {
  display: grid; grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: 0.4rem; align-items: baseline;
  padding: 0.4rem 0; font-size: 0.93rem; line-height: 1.4;
}
.chaplist li > span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--cobalt); }

.cs-video { width: 100%; height: auto; display: block; border-radius: 8px; background: var(--paper-2); }
.cs-flow-fig figcaption { margin-top: 0.7rem; }
.csflow-steps { margin-top: 1.8rem; position: relative; }
.csflow-steps::before {
  content: ""; position: absolute; left: 5px; top: 12px; bottom: 12px;
  width: 1px; background: var(--line);
}
.csflow-steps li { position: relative; display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 1rem; padding: 0 0 1.6rem 1.6rem; }
.csflow-steps li:last-child { padding-bottom: 0; }
.csflow-steps li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper-2); border: 2px solid var(--cobalt);
}
.csflow-nr { font-size: 1.5rem; font-weight: 830; color: var(--cobalt); letter-spacing: -0.03em; }
.csflow-steps b {
  display: block;
  font-family: var(--font-mono); font-size: 0.76rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.csflow-steps p { margin-top: 0.4rem; color: var(--ink-2); font-size: 0.95rem; }

.cs-verantwortung { background: var(--night); color: var(--night-text); padding-block: clamp(4rem, 9vh, 7rem); }
.cs-vh2 { color: var(--night-text); margin-top: 1rem; }
.vgrid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin-top: clamp(2.2rem, 5vh, 3.4rem);
}
.vitem { padding: 0 clamp(1rem, 2vw, 1.8rem); }
.vitem:first-child { padding-left: 0; }
.vitem + .vitem { border-left: 1px solid var(--night-line); }
.vitem-nr { font-family: var(--font-mono); font-size: 0.8rem; color: #6E8CFF; margin-bottom: 1rem; }
.vitem-title { font-size: 1.05rem; font-weight: 780; font-stretch: 106%; letter-spacing: -0.015em; }
.vitem-text { margin-top: 0.6rem; color: var(--night-text-2); font-size: 0.92rem; line-height: 1.55; }
.cs-vnote { margin-top: clamp(2.2rem, 5vh, 3.4rem); }

.cs-betrieb { background: var(--night); color: var(--night-text); padding-block: clamp(4rem, 9vh, 7rem); }
.cs-betrieb-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.cs-betrieb-lead { margin-top: 1.2rem; color: var(--night-text-2); max-width: 42ch; }
.brows { display: flex; flex-direction: column; gap: 0.8rem; }
.brow {
  border: 1px solid var(--night-line); border-radius: 10px;
  padding: 1rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.25rem;
  transition: border-color 240ms var(--ease);
}
.brow:hover { border-color: rgba(110, 140, 255, 0.6); }
.brow b {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--night-text);
}
.brow span { color: var(--night-text-2); font-size: 0.94rem; }

.btn--ghost { border-color: rgba(241, 238, 228, 0.55); color: var(--paper); }
.btn--ghost:hover { background: rgba(241, 238, 228, 0.12); }

@media (max-width: 1020px) {
  .pcards { grid-template-columns: minmax(0, 1fr); }
  .chapgroups { grid-template-columns: minmax(0, 1fr); }
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .vitem { padding-left: 0; }
  .vitem:nth-child(odd) { border-left: 0; }
  .cs-betrieb-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .vgrid { grid-template-columns: minmax(0, 1fr); }
  .vitem + .vitem { border-left: 0; border-top: 1px solid var(--night-line); padding-top: 1.4rem; }
}

.bogen-hint { margin-top: 0.9rem; font-size: 0.85rem; color: var(--ink-2); line-height: 1.5; }
.bogen-hint a { color: var(--cobalt); border-bottom: 1px solid currentColor; }

/* Hero-Komposition mobil: gestapelt, Pro Report zuerst */
@media (max-width: 900px) {
  .hc { width: 100%; display: flex; flex-direction: column; gap: 1rem; }
  .hc-links { display: none; }
  .hc-report { width: 100%; margin-left: 0; order: 1; }
  .hc-ziel { position: static; translate: none; width: 100%; order: 2; }
  .hc-bdi { position: static; translate: none; width: 100%; order: 3; }
  .hc-steps li { font-size: 0.8rem; padding-bottom: 0.7rem; }
  .hc-cap { font-size: 0.68rem; }
  .hc-tbl td { font-size: 0.74rem; }
  .hc-tbl th { font-size: 0.58rem; }
  .hc-badge { font-size: 0.56rem; }
  .hc-bdi-foot { font-size: 0.58rem; }
  .hc-url { font-size: 0.66rem; }
}
/* Maklerindex-Tabelle mobil als Quellenkarten */
@media (max-width: 720px) {
  .mi-panel-body { padding: 0.6rem 0.9rem 1rem; overflow-x: visible; }
  .mi-table { min-width: 0; display: block; }
  .mi-table thead { display: none; }
  .mi-table tbody, .mi-table tr, .mi-table td { display: block; width: 100%; }
  .mi-table tr {
    border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px;
    padding: 0.8rem 0.9rem; margin-top: 0.7rem;
  }
  .mi-table td { border-bottom: 0; padding: 0.18rem 0; white-space: normal; }
  .mi-table td:first-child { font-size: 0.95rem; margin-bottom: 0.4rem; }
  .mi-table td:not(:first-child):not(:nth-child(2))::before {
    content: attr(data-label) " · "; color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em;
  }
  .mi-table td:nth-child(n+3):nth-child(-n+7) { display: inline-block; width: auto; margin-right: 0.9rem; }
}

/* ============================================================
   GROSSE SVG-VISUALS
   ============================================================ */
.viz { margin-top: clamp(2.6rem, 5vw, 4rem); }
.viz-svg { width: 100%; height: auto; display: block; overflow: visible; }

.viz-src, .viz-ev, .viz-doc, .viz-proc, .viz-out {
  fill: var(--panel); stroke: rgba(18, 21, 28, 0.22); stroke-width: 1;
}
.viz-bot { fill: var(--night); }
.viz-t { font-family: var(--font-sans); font-size: 15px; font-weight: 680; fill: var(--ink); }
.viz-t--light { fill: #fff; }
.viz-s { font-family: var(--font-sans); font-size: 13px; fill: rgba(255,255,255,0.72); }
.viz-cap {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; fill: var(--ink-2);
}
.viz-cap--light { fill: var(--ink-2); }
.viz-line {
  fill: none; stroke: rgba(18, 21, 28, 0.28); stroke-width: 1.5;
  stroke-dasharray: 6 7; vector-effect: non-scaling-stroke;
  animation: viz-flow 1.8s linear infinite;
}
.viz-line--strong { stroke: var(--cobalt); stroke-width: 2; }
@keyframes viz-flow { to { stroke-dashoffset: -13; } }
.viz-pin { fill: var(--cobalt); }
.viz-pin--new { fill: #2FA463; }
.viz-pin--chg { fill: var(--cobalt); }
.viz-pin--off { fill: #B4231A; }
.viz-db { fill: var(--night); }
.viz-db-top { fill: #1C2740; }
.viz-db-line { fill: none; stroke: rgba(255,255,255,0.22); stroke-width: 1.5; }

@media (prefers-reduced-motion: reduce) { .viz-line { animation: none; } }
@media (max-width: 720px) {
  .viz-svg { min-width: 0; }
  .viz-t { font-size: 22px; }
  .viz-s { font-size: 19px; }
  .viz-cap { font-size: 17px; }
}

/* Kapitelgruppen mit Symbol und Ornament */
.chapgroup { position: relative; overflow: hidden; }
.chapgroup-top {
  display: flex; align-items: center; gap: 0.7rem;
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--line);
}
.chapgroup-top .chapgroup-head { flex: 1; padding-bottom: 0; border-bottom: 0; }
.chapgroup-ico {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: #E9EEFE; color: var(--cobalt);
}
.chapgroup-orn {
  position: absolute; right: -34px; top: -26px;
  width: 172px; height: 172px; color: var(--cobalt);
  opacity: 0.07; pointer-events: none;
}
.chapgroup-orn svg { width: 100%; height: 100%; display: block; }
.chapgroup .chaplist { position: relative; z-index: 1; }

/* Live-Link im Case-Kopf */
.cs-visit { margin-top: 1.2rem; }
.cs-visit-link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  padding: 0.72rem 1.15rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  transition: background 240ms var(--ease), border-color 240ms var(--ease), transform 240ms var(--ease);
}
.cs-visit-link svg { transition: transform 240ms var(--ease); }
.cs-visit-link:hover { background: var(--cobalt); border-color: var(--cobalt); }
.cs-visit-link:hover svg { transform: translate(2px, -2px); }
a.cs-url { text-decoration: none; }
a.cs-url:hover { color: var(--ink); text-decoration: underline; }

/* Domainspalte bewusst unscharf */
.mi-dom {
  display: inline-block;
  filter: blur(3px);
  user-select: none; pointer-events: none;
  color: inherit;
}

/* ============================================================
   LEISTUNGEN — Kopf mit Prozess-Serpentine
   ============================================================ */
.phead--prozess {
  padding-top: clamp(7rem, 12vh, 8.6rem);
  padding-bottom: clamp(2rem, 4vh, 3.4rem);
}
.phead--prozess .phead-h1 {
  font-size: clamp(2.1rem, 2.85vw, 3.35rem);
  line-height: 1.02; max-width: none;
}
.phead--prozess .phead-h1 .mask-in { white-space: nowrap; }
.phead--prozess .phead-lead { font-size: clamp(1rem, 1.15vw, 1.12rem); max-width: 40ch; }
.phead-split2 {
  display: grid; grid-template-columns: 37% 63%;
  gap: clamp(1.6rem, 3vw, 3rem); align-items: center;
}
.phead-copy { min-width: 0; }
.phead-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: clamp(1.6rem, 3vh, 2.4rem); }
.phead-prozess { min-width: 0; }
.lh-kick { margin-bottom: 0.9rem; }
.lh-wrap { min-width: 0; }
.lh { width: 100%; height: auto; max-height: 720px; display: block; overflow: visible; }

.lh-card { fill: #fff; stroke: rgba(18, 21, 28, 0.1); stroke-width: 1.5;
  filter: drop-shadow(0 12px 26px rgba(11, 14, 27, 0.07)); }
.lh-badge { fill: #E9EEFE; }
.lh-ico { color: var(--cobalt); }
.lh-ico > * { transform: translate(-16px, -16px); }
.lh-ico--white { color: #fff; }
.lh-nr {
  font-family: var(--font-mono); font-size: 40px; font-weight: 400;
  fill: none; stroke: var(--cobalt); stroke-width: 1.1; opacity: 0.55;
}
.lh-t { font-family: var(--font-sans); font-size: 30px; font-weight: 800;
  font-stretch: 108%; letter-spacing: -0.02em; fill: var(--ink); }
.lh-s { font-family: var(--font-sans); font-size: 19px; fill: var(--ink-2); }
.lh-hair { stroke: rgba(18, 21, 28, 0.1); stroke-width: 1.2; }
.lh-chip { fill: var(--paper-2); }
.lh-chip-t {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em;
  fill: var(--ink); text-anchor: middle; text-transform: uppercase;
}

.lh-pipe { fill: none; stroke: var(--cobalt); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.lh-knot { fill: #fff; stroke: var(--cobalt); stroke-width: 5; }
.lh-knot-arrow { fill: none; stroke: var(--cobalt); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.lh-fin { fill: var(--night); filter: drop-shadow(0 22px 46px rgba(11, 14, 27, 0.26)); }
.lh-fin-badge { fill: rgba(255, 255, 255, 0.09); stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.2; }
.lh-fin-t { font-family: var(--font-sans); font-size: 28px; font-weight: 800;
  font-stretch: 108%; letter-spacing: -0.02em; fill: #fff; }
.lh-fin-s { font-family: var(--font-sans); font-size: 18px; fill: rgba(255, 255, 255, 0.62); }
.lh-fin-dot { fill: #4ED07A; }
.lh-fin-live {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; fill: rgba(255, 255, 255, 0.62);
}

.js.is-loaded .lh-pipe {
  stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: lh-draw 1.5s var(--ease) 200ms forwards;
}
@keyframes lh-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .js.is-loaded .lh-pipe { animation: none; stroke-dashoffset: 0; }
}

@media (max-width: 1180px) {
  .phead-split2 { grid-template-columns: minmax(0, 1fr); }
  .phead-prozess { margin-top: clamp(2rem, 4vh, 3rem); }
  .lh { max-height: none; }
}
.lh--mobil { display: none; max-width: 480px; margin-inline: auto; }
.lh-nr--m { font-size: 52px; stroke-width: 1.4; }
.lh-t--m { font-size: 38px; }
.lh-s--m { font-size: 23px; }
.lh-chip-t--m { font-size: 17px; }
.lh-fin-live--m { font-size: 17px; }

@media (max-width: 1000px) {
  .lh { display: none; }
  .lh--mobil { display: block; max-height: none; }
}
@media (max-width: 720px) {
  .phead-ctas .btn { flex: 1 1 auto; justify-content: center; }
}

/* Mittlere Breiten: Textspalte etwas grosszuegiger, damit die CTAs nebeneinander bleiben */
@media (min-width: 901px) and (max-width: 1520px) {
  .hero-split { grid-template-columns: 41% 59%; }
  .hero-copy3 .hero-h1 { font-size: clamp(2.3rem, 3.05vw, 3.5rem); }
  .phead--prozess .phead-h1 { font-size: clamp(2rem, 3vw, 3.1rem); }
  .hero-copy3 .hero-ctas .btn--lg,
  .phead-ctas .btn--lg { padding: 0.82rem 1.2rem; font-size: 0.98rem; }
}

/* ============================================================
   LEISTUNGEN — isometrisches Konstruktionsraster als Grund
   ============================================================ */
/* overflow: clip statt hidden — hidden würde das Sticky der Systemgrafik abschalten */
.lblock, .lfit, .system, .cases-index { position: relative; overflow: clip; }
.lblock > .wrap, .lfit > .wrap,
.system > .wrap, .cases-index > .wrap { position: relative; }   /* kein z-index: sonst neuer Stapelkontext */
.lblock::before, .lfit::before, .system::before, .cases-index::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(30deg,  rgba(18, 21, 28, 0.065) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(-30deg, rgba(18, 21, 28, 0.065) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg,  rgba(18, 21, 28, 0.045) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(100% 90% at 30% 50%, #000 35%, transparent 88%);
          mask-image: radial-gradient(100% 90% at 30% 50%, #000 35%, transparent 88%);
}
/* gespiegelte Sektionen: Verdichtung folgt der Grafik nach rechts */
.lblock--flip::before {
  -webkit-mask-image: radial-gradient(100% 90% at 70% 50%, #000 35%, transparent 88%);
          mask-image: radial-gradient(100% 90% at 70% 50%, #000 35%, transparent 88%);
}
.lfit::before, .cases-index::before {
  -webkit-mask-image: radial-gradient(90% 120% at 50% 50%, #000 30%, transparent 85%);
          mask-image: radial-gradient(90% 120% at 50% 50%, #000 30%, transparent 85%);
}
/* Landing: Verdichtung sitzt hinter der Explosionszeichnung */
.system::before {
  /* Zentrum nach unten verschoben: das Raster blendet oben langsam ein,
     der Übergang vom Hero läuft über die Punkte/Kreuze-Zone (::after) */
  -webkit-mask-image: radial-gradient(95% 72% at 28% 58%, #000 30%, transparent 86%);
          mask-image: radial-gradient(95% 72% at 28% 58%, #000 30%, transparent 86%);
}
/* Übergangszone: feine Punkte + Konstruktionskreuze führen vom Hero herüber */
.system::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: clamp(300px, 46vh, 480px);
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='400'%3E%3Cg stroke='%2312151C' stroke-opacity='0.2' stroke-width='1'%3E%3Cpath d='M60 44h14M67 37v14'/%3E%3Cpath d='M304 124h14M311 117v14'/%3E%3Cpath d='M148 296h14M155 289v14'/%3E%3Cpath d='M436 252h14M443 245v14'/%3E%3Cpath d='M40 208h132' stroke-opacity='0.09'/%3E%3C/g%3E%3Cg stroke='%231233EE' stroke-opacity='0.34' stroke-width='1'%3E%3Cpath d='M478 78h12M484 72v12'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(rgba(18, 21, 28, 0.12) 1px, transparent 1.35px);
  background-size: 520px 400px, 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 80px, #000 58%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 80px, #000 58%, transparent 100%);
}

/* Plattenzeichnung als bewusst gesetzte Tafel auf dem Raster */
.lblock .study {
  background: var(--panel);
  border: 1px solid rgba(18, 21, 28, 0.13);
  padding: clamp(0.9rem, 1.6vw, 1.6rem);
  box-shadow: 0 26px 54px rgba(11, 14, 27, 0.09);
}
.lblock .study .hero-obj-frame { display: none; }
.lblock .study::before, .lblock .study::after {
  content: ""; position: absolute; width: 9px; height: 9px;
  border: 1px solid var(--cobalt); background: var(--panel);
}
.lblock .study::before { left: -5px; top: -5px; }
.lblock .study::after { right: -5px; bottom: -5px; }

@media (prefers-reduced-motion: no-preference) {
  .lblock::before, .lfit::before { will-change: auto; }
}