/* ==========================================================================
   NOC Grove · Sektions-Baukasten
   Ein System, viele Buehnen. Jedes Pattern wird site-weit identisch gebaut.
   Referenz und A11y-Regeln: .claude/section-playbook.md
   ========================================================================== */

/* ==========================================================================
   A5 · Duo-Kacheln
   ========================================================================== */

.duo { display: grid; gap: var(--s-5); }
@media (min-width: 800px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo__tile {
  position: relative;
  border: 1px solid var(--rule);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-height: 18rem;
  background: var(--c-white);
  transition: border-color var(--d-fast) var(--e-out);
}
.t-ink .duo__tile, .t-blue .duo__tile { background: var(--c-ink-800); }
.duo__tile:has(a:hover) { border-color: var(--c-orange); }
.duo__tile:has(a:focus-visible) { outline: var(--focus); outline-offset: var(--focus-off); }
.duo__tile a::after { content: ''; position: absolute; inset: 0; }
.duo__tile a { text-decoration: none; color: inherit; }
.duo__foot { margin-block-start: auto; }

/* ==========================================================================
   B1 · Scrollytelling mit gepinnter Buehne
   ========================================================================== */

.scrolly { position: relative; }
.scrolly__grid { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) {
  .scrolly__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-9); align-items: start; }
}
.scrolly__stage { position: relative; }
.scrolly__stage-in {
  border: 1px solid var(--rule);
  background: var(--c-white);
  padding: var(--s-4);
  display: grid;
  place-items: center;
}
.stagewrap { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.stagewrap__f { position: absolute; inset: 0; width: 100%; height: 100%; }
.schema .fr-n { font-size: 12px; }
/* Beschriftung der Ablauf-Buehne: Titel in der Textschrift, nicht in Mono */
.schema .fr-t {
  font-family: var(--f-sans);
  font-size: 19px;
  font-weight: 700;
  fill: var(--fg);
}
.schema .fr-b {
  font-family: var(--f-sans);
  font-size: 13px;
  fill: var(--fg-muted);
}
.t-ink .scrolly__stage-in, .t-blue .scrolly__stage-in { background: var(--c-ink-800); }
.scrolly__steps { counter-reset: step; display: grid; gap: var(--s-5); }
.scrolly__step {
  border-inline-start: 2px solid var(--rule);
  padding: var(--s-2) 0 var(--s-5) var(--s-5);
  position: relative;
  transition: border-color var(--d-base) var(--e-out), opacity var(--d-base) var(--e-out);
}
.scrolly__step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  inset-inline-start: calc(-1 * var(--s-5) - 1px);
  inset-block-start: var(--s-2);
  width: var(--s-5);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  color: var(--fg-label);
  background: var(--bg);
  padding-block-end: var(--s-1);
}
.js .scrolly--pinned .scrolly__step { opacity: .42; }
.js .scrolly--pinned .scrolly__step.is-active { opacity: 1; border-inline-start-color: var(--c-orange); }
.js .scrolly--pinned .scrolly__step.is-active::before { color: var(--c-orange); }

/* Ohne JS und bei reduzierter Bewegung: normale Liste, Buehne steht oben */
@media (max-width: 999px) { .scrolly__stage { position: static !important; } }

/* ==========================================================================
   B3 · Horizontale Karten-Schiene
   ========================================================================== */

.rail { position: relative; }
.rail__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4); }
.rail__nav { display: none; gap: var(--s-2); }
@media (min-width: 800px) { .js .rail__nav { display: flex; } }
.rail__btn {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}
.rail__btn:hover:not(:disabled) { border-color: var(--fg); }
.rail__btn:disabled { opacity: .35; cursor: default; }
.rail__btn svg { width: 1.1rem; height: 1.1rem; }
.rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 22rem);
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--s-3);
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.rail__track > * { scroll-snap-align: start; }
.rail__track:focus-visible { outline: var(--focus); outline-offset: var(--focus-off); }
.rail.is-dragging .rail__track { cursor: grabbing; scroll-snap-type: none; }

/* ==========================================================================
   B4 · Gestapelte Karten (reines CSS via sticky)
   ========================================================================== */

.stack { display: grid; gap: var(--s-5); }
@media (min-width: 900px) {
  .stack { gap: var(--s-6); }
  .stack__item { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .stack__item:nth-child(1) { top: calc(var(--header-h) + var(--s-5)); }
  .stack__item:nth-child(2) { top: calc(var(--header-h) + var(--s-5) + 2.5rem); }
  .stack__item:nth-child(3) { top: calc(var(--header-h) + var(--s-5) + 5rem); }
  .stack__item:nth-child(4) { top: calc(var(--header-h) + var(--s-5) + 7.5rem); }
  .stack__item:nth-child(5) { top: calc(var(--header-h) + var(--s-5) + 10rem); }
}
@media (prefers-reduced-motion: reduce) { .stack__item { position: static !important; } }
.stack__item {
  border: 1px solid var(--rule);
  background: var(--c-white);
  padding: var(--s-6);
  display: grid;
  gap: var(--s-4);
}
@media (min-width: 800px) { .stack__item { grid-template-columns: minmax(0, 4rem) minmax(0, 1fr); gap: var(--s-6); } }
.t-ink .stack__item, .t-blue .stack__item { background: var(--c-ink-800); }
.stack__no { font-family: var(--f-mono); font-size: var(--t-h3); color: var(--c-orange); line-height: 1; }

/* ==========================================================================
   B5 · Sticky-Split
   ========================================================================== */

.sticky-split { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) {
  .sticky-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-9); align-items: start; }
  .sticky-split__aside { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}
@media (prefers-reduced-motion: reduce) { .sticky-split__aside { position: static !important; } }

/* ==========================================================================
   B7 · Zahlenband mit Kontext (nur belegte Zahlen, kein Counter)
   ========================================================================== */

.figures { display: grid; gap: var(--s-6); }
@media (min-width: 640px) { .figures { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .figures { grid-template-columns: repeat(4, 1fr); } }
.figures > div { border-top: 2px solid var(--c-orange); padding-block-start: var(--s-4); }
.figures dt {
  font-size: clamp(2.5rem, 1.4rem + 3.2vw, 4rem);
  line-height: .95;
  font-weight: 800;
  font-variation-settings: 'wdth' 118;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.figures dd { margin: var(--s-3) 0 0; font-size: var(--t-small); color: var(--fg-muted); }
.figures dd b { display: block; color: var(--fg); font-weight: 700; margin-block-end: var(--s-1); }

/* ==========================================================================
   C1 · Tabs
   ========================================================================== */

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  border-bottom: 1px solid var(--rule);
  margin-block-end: var(--s-6);
}
.tabs__tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--s-3) var(--s-4);
  font-weight: 700;
  font-size: var(--t-small);
  color: var(--fg-muted);
  cursor: pointer;
  margin-block-end: -1px;
}
.tabs__tab:hover { color: var(--fg); }
.tabs__tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--c-orange); }
.js .tabs__panel[hidden] { display: none; }
/* Ohne JS: alle Panels sichtbar, Tab-Leiste wird zur Sprungmarkenliste */
html:not(.js) .tabs__list { border-bottom: 0; }
html:not(.js) .tabs__panel { display: block !important; margin-block-end: var(--s-6); }
html:not(.js) .tabs__panel::before {
  content: attr(data-title);
  display: block;
  font-size: var(--t-h3);
  font-weight: 700;
  margin-block-end: var(--s-3);
}

/* ==========================================================================
   C2 · Akkordeon (Basis natives details/summary)
   ========================================================================== */

.accordion { border-top: 1px solid var(--rule); }
.accordion > details { border-bottom: 1px solid var(--rule); }
.accordion summary {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--t-h4);
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--c-blue); }
.accordion summary:focus-visible { outline: var(--focus); outline-offset: var(--focus-off); }
.accordion__ico {
  flex: none;
  width: 1.25rem; height: 1.25rem;
  margin-block-start: .2em;
  stroke: var(--c-orange);
  stroke-width: 2;
  fill: none;
  transition: transform var(--d-base) var(--e-out);
}
.accordion details[open] .accordion__ico { transform: rotate(45deg); }
.accordion__body { padding-block-end: var(--s-5); max-width: var(--w-prose); }
.js .accordion__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-base) var(--e-out); }
.js details[open] .accordion__wrap { grid-template-rows: 1fr; }
.js .accordion__wrap > div { overflow: hidden; }

/* ==========================================================================
   C3 · Hotspot-Grafik
   ========================================================================== */

.hotspots { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) { .hotspots { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; } }
.hotspots__stage { position: relative; }
.hotspots__pin {
  position: absolute;
  width: 2rem; height: 2rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--c-orange);
  background: var(--c-ink);
  color: var(--c-orange);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  display: none;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: transform var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.js .hotspots__pin { display: grid; }
.hotspots__pin:hover { transform: translate(-50%, -50%) scale(1.18); }
.hotspots__pin[aria-expanded="true"] { background: var(--c-orange); color: var(--c-ink); }
.hotspots__list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.hotspots__list > div { border-bottom: 1px solid var(--rule); padding: var(--s-4) 0; transition: background-color var(--d-fast); }
.hotspots__list > div.is-active { background: rgba(236, 114, 4, .07); }
.hotspots__list dt { font-weight: 700; display: flex; gap: var(--s-3); align-items: baseline; }
.hotspots__list dt span { font-family: var(--f-mono); font-size: var(--t-label); color: var(--c-orange); }
.hotspots__list dd { margin: var(--s-2) 0 0; font-size: var(--t-small); color: var(--fg-muted); max-width: 52ch; }

/* --------------------------------------------------------------------------
   E8 · Schema und Liste beim Scrollen synchron (Playbook E8)
   --------------------------------------------------------------------------
   Was die Bewegung sagt: Wer ueber eine Schicht liest, sieht zugleich, wo sie
   im Aufbau sitzt. Das ist der eigentliche Punkt der Sektion, denn die These
   lautet "Ausfaelle entstehen nicht dort, wo man sie vermutet".

   Das Stehenbleiben der Grafik ist reines CSS. Die Hervorhebung kommt aus
   main.js und braucht kein GSAP; ohne JavaScript bleiben Grafik und Liste
   vollstaendig und gleichrangig lesbar.
   -------------------------------------------------------------------------- */

@media (min-width: 1000px) {
  .hotspots { align-items: start; }
  .hotspots__stage { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .js [data-hot-sync] .hotspots__list > div {
    min-height: clamp(6.5rem, 14vh, 10rem);
    display: flex; flex-direction: column; justify-content: center;
  }
}

/* Der gerade gelesene Eintrag */
.hotspots__list > div { border-inline-start: 2px solid transparent; padding-inline-start: 0;
                        transition: background-color var(--d-fast), border-color var(--d-fast),
                                    padding var(--d-fast); }
.js .hotspots__list > div.is-lit { border-inline-start-color: var(--c-orange); padding-inline-start: var(--s-4); }

/* Der zugehoerige Punkt in der Grafik */
.hotspots__pin.is-lit { background: var(--c-orange); color: var(--c-ink);
                        box-shadow: 0 0 0 6px rgba(236, 114, 4, .16); }

/* Der zugehoerige Knoten im Schema. Die uebrigen treten zurueck, ohne
   unleserlich zu werden: 0.62 haelt die 10-px-Beschriftungen lesbar, waehrend
   der orange Rahmen den gemeinten Knoten sofort auffindbar macht. */
.schema .nd { transition: opacity var(--d-base) var(--e-out); }
.schema .nd .bx { transition: stroke var(--d-base) var(--e-out), stroke-width var(--d-base) var(--e-out); }
.js .hotspots .schema.is-sync .nd { opacity: .62; }
.js .hotspots .schema.is-sync .nd.is-lit { opacity: 1; }
.js .hotspots .schema .nd.is-lit .bx { stroke: var(--c-orange); stroke-width: 2.5; }
.js .hotspots .schema .nd.is-lit .lb { fill: var(--c-orange); }

@media (prefers-reduced-motion: reduce) {
  .hotspots__list > div, .schema .nd, .hotspots__pin { transition: none; }
}

/* ==========================================================================
   C4 · Filterbare Liste
   ========================================================================== */

.filterbar { display: none; }
.js .filterbar { display: grid; gap: var(--s-4); }
.filterbar__row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.filterbar__lab {
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-label); min-width: 6.5rem;
}
.chip {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-small);
  cursor: pointer;
  color: var(--fg);
}
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
.filter-count { font-size: var(--t-small); color: var(--fg-muted); }

/* ==========================================================================
   C5 · Bento
   ========================================================================== */

.bento { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(11rem, auto);
  }
  .bento__a { grid-column: span 3; grid-row: span 2; }
  .bento__b { grid-column: span 3; grid-row: span 2; }
  .bento__c { grid-column: span 2; }
  .bento__d { grid-column: span 2; }
  .bento__e { grid-column: span 2; }
  .bento__f { grid-column: span 3; }
  .bento__g { grid-column: span 3; }
}
.bento__cell {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--c-white);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.t-ink .bento__cell, .t-blue .bento__cell { background: var(--c-ink-800); }
.bento__cell:has(a:hover) { border-color: var(--c-orange); }
.bento__cell:has(a:focus-visible) { outline: var(--focus); outline-offset: var(--focus-off); }
.bento__cell a { text-decoration: none; color: inherit; }
.bento__cell a::after { content: ''; position: absolute; inset: 0; }
.bento__cell p { color: var(--fg-muted); font-size: var(--t-small); }
.bento__cell .dim { margin-block-end: var(--s-1); }
.bento__cell--accent { background: var(--c-blue-900); color: var(--c-text-inv); border-color: var(--c-blue-700); }
.bento__cell--accent p { color: #C2D6E6; }
.bento__cell--accent .dim { color: var(--c-blue-300); }
.bento__more { margin-block-start: auto; font-family: var(--f-mono); font-size: var(--t-label);
               letter-spacing: .08em; text-transform: uppercase; color: var(--c-orange); }

/* ==========================================================================
   C6 · Marquee (nur Text, kein Logo)
   ========================================================================== */

.marquee { overflow: clip; border-block: 1px solid var(--rule); padding-block: var(--s-4); }
.marquee__track { display: flex; width: max-content; gap: var(--s-6); animation: mq 46s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee span {
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-label); white-space: nowrap;
  display: flex; gap: var(--s-6); align-items: center;
}
.marquee span::after { content: '+'; color: var(--c-orange); }
@keyframes mq { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ==========================================================================
   C7 · Anfrage-Wizard und Formulare
   ========================================================================== */

.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field > label { font-weight: 600; font-size: var(--t-small); }
.field .req { color: var(--c-err); }
.field .hint { font-size: var(--t-label); color: var(--fg-muted); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field select, .field textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-1);
  background: var(--c-white);
  color: var(--c-text);
  transition: border-color var(--d-fast) var(--e-out);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field :is(input, select, textarea):hover { border-color: var(--c-slate-400); }
.field :is(input, select, textarea):focus-visible { outline: var(--focus); outline-offset: 1px; border-color: var(--c-blue); }
.field [aria-invalid="true"] { border-color: var(--c-err); border-width: 2px; }
.field__err { font-size: var(--t-small); color: var(--c-err); font-weight: 600; }
.field--2 { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .field--2 { grid-template-columns: 1fr 1fr; } }

.choices { display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .choices { grid-template-columns: repeat(2, 1fr); } }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice label {
  display: block;
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-2);
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.choice label b { display: block; font-weight: 700; }
.choice label span { display: block; font-size: var(--t-small); color: var(--fg-muted); margin-block-start: var(--s-1); }
.choice label:hover { border-color: var(--c-slate-400); }
.choice input:checked + label { border-color: var(--c-orange); border-width: 2px; padding: calc(var(--s-4) - 1px) calc(var(--s-5) - 1px); background: rgba(236, 114, 4, .05); }
.choice input:focus-visible + label { outline: var(--focus); outline-offset: var(--focus-off); }

.check { display: flex; gap: var(--s-3); align-items: start; font-size: var(--t-small); }
.check input { margin-block-start: .3em; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--c-blue); }

fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-5); }
legend { font-size: var(--t-h3); font-weight: 700; padding: 0; margin-block-end: var(--s-2); }

.wizard__steps { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-block-end: var(--s-6); }
.wizard__steps li {
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-label);
  display: flex; align-items: center; gap: var(--s-2);
}
.wizard__steps li::before {
  content: counter(list-item, decimal-leading-zero);
  color: var(--c-slate-400);
}
.wizard__steps li[aria-current="step"] { color: var(--fg); }
.wizard__steps li[aria-current="step"]::before { color: var(--c-orange); }
.js .wizard__nav { display: flex; gap: var(--s-3); flex-wrap: wrap; }
html:not(.js) .wizard__steps, html:not(.js) .wizard__nav { display: none; }
html:not(.js) .wizard fieldset[hidden] { display: grid !important; }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: var(--s-4) var(--s-5); border-inline-start: 3px solid; font-size: var(--t-small); }
.alert--err { border-color: var(--c-err); background: #FDF1F0; color: #6E1710; }
.alert--ok  { border-color: var(--c-ok);  background: #EFF7F2; color: #10402C; }
.alert ul { margin-block-start: var(--s-2); padding-inline-start: var(--s-5); list-style: disc; }

/* ==========================================================================
   C8 · Scrollspy
   ========================================================================== */

.spy { font-size: var(--t-small); }
.spy ol { display: grid; gap: var(--s-1); border-inline-start: 1px solid var(--rule); }
.spy a {
  display: block;
  padding: var(--s-2) var(--s-4);
  margin-inline-start: -1px;
  border-inline-start: 2px solid transparent;
  text-decoration: none;
  color: var(--fg-muted);
}
.spy a:hover { color: var(--fg); }
.spy a[aria-current="true"] { color: var(--fg); font-weight: 700; border-inline-start-color: var(--c-orange); }

.article-grid { display: grid; gap: var(--s-7); }
@media (min-width: 1000px) {
  .article-grid { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--s-9); align-items: start; }
  .article-grid__aside { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}

/* ==========================================================================
   D1 · Referenz-Wand
   ========================================================================== */

.proofwall { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .proofwall { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .proofwall { grid-template-columns: repeat(3, 1fr); } }
.proofwall__item {
  border: 1px solid var(--rule);
  background: var(--c-white);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-2);
  align-content: start;
  transition: border-color var(--d-fast) var(--e-out);
}
.t-ink .proofwall__item, .t-blue .proofwall__item { background: var(--c-ink-800); }
.proofwall__item:hover { border-color: var(--c-slate-400); }
.proofwall__name { font-weight: 700; font-size: var(--t-h4); line-height: 1.25; }
.proofwall__meta {
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .06em;
  color: var(--fg-label); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
}
.proofwall__meta span { display: flex; gap: var(--s-3); align-items: center; }
.proofwall__meta span + span::before { content: '·'; color: var(--c-slate-200); }
.proofwall__note { font-size: var(--t-small); color: var(--fg-muted); }
.proofwall__tags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-block-start: var(--s-2); }
.proofwall__tags b {
  font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: .06em; font-weight: 500;
  text-transform: uppercase; border: 1px solid var(--rule); padding: 2px 6px; color: var(--fg-muted);
}

/* ==========================================================================
   D3 · Partner-Band
   ========================================================================== */

.partners { display: grid; gap: var(--s-4); }
@media (min-width: 620px) { .partners { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .partners { grid-template-columns: repeat(3, 1fr); } }
.partners__item { border: 1px solid var(--rule); padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
.partners__name { font-weight: 700; font-size: var(--t-h4); }
.partners__what { font-size: var(--t-small); color: var(--fg-muted); }
.partners__mean { font-size: var(--t-small); border-top: 1px solid var(--rule); padding-block-start: var(--s-3); }
.partners__mean b { display: block; font-family: var(--f-mono); font-size: var(--t-label);
                    letter-spacing: .1em; text-transform: uppercase; color: var(--fg-label); margin-block-end: var(--s-1); }

/* ==========================================================================
   D4 · Ansprechpartner (abteilungsbezogen, bis Namen freigegeben sind)
   ========================================================================== */

.person { display: grid; gap: var(--s-4); border: 1px solid var(--rule); padding: var(--s-5); }
@media (min-width: 560px) { .person { grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; } }
.person__ph {
  width: 4.5rem; height: 4.5rem;
  border: 1px dashed var(--c-slate-400);
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: var(--t-label); color: var(--c-slate-400);
}
.person__role { font-weight: 700; font-size: var(--t-h4); }

/* ==========================================================================
   D5 · Standort-Duo
   ========================================================================== */

.loc { display: grid; gap: var(--s-5); border: 1px solid var(--rule); padding: var(--s-6); background: var(--c-white); }
.t-ink .loc, .t-blue .loc { background: var(--c-ink-800); }
.loc address { font-style: normal; line-height: 1.7; }
.loc__map {
  border: 1px solid var(--rule);
  background: var(--c-slate-100);
  aspect-ratio: 16 / 9;
  display: grid; place-items: center; text-align: center; gap: var(--s-3);
  padding: var(--s-5);
}
.t-ink .loc__map, .t-blue .loc__map { background: rgba(255,255,255,.05); }

/* ==========================================================================
   D7 · Spec-Karte (technisches Datenblatt)
   ========================================================================== */

.specs { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .specs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .specs--3 { grid-template-columns: repeat(3, 1fr); } }
.spec {
  border: 1px solid var(--rule);
  background: var(--c-white);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-3);
  align-content: start;
  position: relative;
}
.t-ink .spec, .t-blue .spec { background: var(--c-ink-800); }
/* Eckmarken: Blueprint-Anmutung */
.spec::before, .spec::after {
  content: ''; position: absolute; width: 9px; height: 9px; border: 1px solid var(--c-orange);
  opacity: .8;
}
.spec::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.spec::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.spec__t { font-weight: 700; font-size: var(--t-h4); }
.spec dl { display: grid; gap: var(--s-2); font-size: var(--t-small); }
.spec dt { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .08em;
           text-transform: uppercase; color: var(--fg-label); }
.spec dd { margin: 0 0 var(--s-2); }
.spec dd:last-child { margin-block-end: 0; }

/* ==========================================================================
   E2/E4 · Schema-Grafiken und Betriebs-Ring
   ========================================================================== */

.schema { width: 100%; height: auto; display: block; }
.schema .ln { fill: none; stroke: var(--c-blue-300); stroke-width: 1.5; }
.schema .ln--acc { stroke: var(--c-orange); stroke-width: 2; }
.schema .bx { fill: var(--c-ink-800); stroke: var(--c-blue-300); stroke-width: 1.5; }
.schema .bx--acc { stroke: var(--c-orange); }
.schema .fc { fill: var(--c-blue-300); }
.schema .fc--acc { fill: var(--c-orange); }
.schema .lb {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; fill: #A9BAC6;
}
.schema .lb--acc { fill: var(--c-orange); }
.schema .gr { stroke: var(--c-ink-700); stroke-width: 1; fill: none; }

/* Helle Variante fuer helle Baender */
.schema--light .bx { fill: var(--c-white); stroke: var(--c-blue); }
.schema--light .ln { stroke: var(--c-blue); }
.schema--light .fc { fill: var(--c-blue); }
.schema--light .lb { fill: var(--c-slate-600); }
.schema--light .gr { stroke: var(--c-slate-200); }

.js .schema--draw .draw { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.js .schema--draw.is-in .draw { animation: draw 1.4s var(--e-out) forwards; }
.js .schema--draw.is-in .draw:nth-of-type(2) { animation-delay: .12s; }
.js .schema--draw.is-in .draw:nth-of-type(3) { animation-delay: .24s; }
.js .schema--draw.is-in .draw:nth-of-type(4) { animation-delay: .36s; }
.js .schema--draw.is-in .draw:nth-of-type(5) { animation-delay: .48s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .js .schema--draw .draw { stroke-dashoffset: 0 !important; animation: none !important; }
}

.loop { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .loop { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-8); align-items: center; } }
.loop__list { counter-reset: lp; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.loop__list > li {
  counter-increment: lp;
  border-bottom: 1px solid var(--rule);
  padding: var(--s-4) 0 var(--s-4) var(--s-7);
  position: relative;
}
.loop__list > li::before {
  content: counter(lp, decimal-leading-zero);
  position: absolute; inset-inline-start: 0; inset-block-start: var(--s-4);
  font-family: var(--f-mono); font-size: var(--t-label); color: var(--c-orange);
}
.loop__list b { display: block; font-weight: 700; }
.loop__list span { font-size: var(--t-small); color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   E7 · Betriebs-Ring, mit der Liste synchronisiert (Playbook E7)
   --------------------------------------------------------------------------
   Was die Bewegung sagt: Der Kreislauf wird nicht behauptet, er wird beim
   Lesen nachgezogen. Wer den dritten Schritt liest, sieht den Ring bis zum
   dritten Punkt geschlossen. Die Grafik bleibt dabei stehen, damit der
   Zusammenhang zwischen Text und Stelle im Kreis sichtbar bleibt.

   Technik: Das Stehenbleiben ist reines CSS (position: sticky) und braucht
   kein JavaScript. Nur die Abstufung kommt aus der Scroll-Choreografie.
   Ohne JavaScript ist der Ring vollstaendig gezeichnet, alle fuenf Schritte
   sind gleichrangig lesbar.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .loop--stage { align-items: start; }
  .loop--stage .loop__stage {
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
  }
}
/* Jeder Schritt bekommt Scrollweg, sonst wandert der Ring in einem Ruck durch
   alle fuenf Stationen. Nur dort, wo die Choreografie auch laeuft: ohne
   JavaScript und bei reduzierter Bewegung waere die zusaetzliche Hoehe
   leerer Weg ohne Gegenwert. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .js .loop--stage .loop__list > li {
    min-height: clamp(8rem, 21vh, 12.5rem);
    display: flex; flex-direction: column; justify-content: center;
  }
}

.loop--stage .loop__list > li { transition: opacity var(--d-base) var(--e-out); }
.js .loop--stage.is-sync .loop__list > li { opacity: .4; }
.js .loop--stage.is-sync .loop__list > li.is-done { opacity: .62; }
.js .loop--stage.is-sync .loop__list > li.is-on { opacity: 1; }
.js .loop--stage.is-sync .loop__list > li.is-on::before { font-weight: 700; }

/* Spur und Fortschritt des Rings */
.schema--sync .lp-track { stroke: var(--c-slate-200); stroke-width: 1.5; }
.schema--sync .lp-arc {
  stroke: var(--c-blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  /* Ohne JavaScript und bei reduzierter Bewegung vollstaendig gezeichnet.
     Den Startwert setzt erst die Choreografie. */
  stroke-dasharray: var(--len, 804);
  stroke-dashoffset: 0;
}
.schema--sync:not(.schema--light) .lp-track { stroke: var(--c-ink-700); }
.schema--sync:not(.schema--light) .lp-arc { stroke: var(--c-blue-300); }

/* Abstufung der Knoten: erst mit JavaScript, sonst bleibt alles gleichrangig.
   Punkte duerfen deutlich zuruecktreten, Beschriftungen nicht: 10-px-Text
   faellt bei 0.3 Deckkraft auf 2,3:1 Kontrast. Die Beschriftungen folgen
   deshalb derselben Abstufung wie .scrolly__step, und jede von ihnen erreicht
   im Lauf des Scrollens vollen Kontrast. Ohne JavaScript und bei reduzierter
   Bewegung steht ohnehin alles auf voller Staerke. */
.schema--sync [data-step] { transition: opacity var(--d-base) var(--e-out), fill var(--d-fast) var(--e-out); }
.schema--sync.is-sync circle[data-step] { opacity: .28; }
.schema--sync.is-sync circle[data-step].is-done { opacity: .8; }
.schema--sync.is-sync circle[data-step].is-on { opacity: 1; fill: var(--c-orange); }
.schema--sync.is-sync text[data-step] { opacity: .57; }
.schema--sync.is-sync text[data-step].is-done { opacity: .8; }
.schema--sync.is-sync text[data-step].is-on { opacity: 1; fill: var(--c-orange); font-weight: 700; }

/* ==========================================================================
   Signalimpuls auf den Schema-Grafiken
   --------------------------------------------------------------------------
   Warum es diese Bewegung gibt: Ein Network Operation Center ueberwacht
   laufenden Betrieb. Der Impuls zeigt Datenverkehr auf den Hauptstrecken und
   den umlaufenden Betriebskreislauf. Damit ist die Animation inhaltlich
   begruendet und faellt nicht unter das Verbot bedeutungsloser Dauerbewegung
   (.claude/anti-slop.md, Abschnitt 1.4).

   Technik: stroke-dasharray bildet einen kurzen Strich plus eine Luecke von
   doppelter Pfadlaenge. Der Versatz wird um genau eine Musterperiode
   verschoben, dadurch wiederholt sich die Bewegung nahtlos ohne Sprung. Die
   Dauer waechst mit der Pfadlaenge, sodass alle Impulse gleich schnell laufen.
   Der Impuls ist nur etwa ein Drittel der Zeit sichtbar; dazwischen ist Ruhe.
   ========================================================================== */

.schema .sig,
.schema .sig-ring {
  fill: none;
  stroke: var(--c-blue-300);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
}
.schema--light .sig,
.schema--light .sig-ring { stroke: var(--c-blue); }
.schema .sig--acc { stroke: var(--c-orange); }

.js .schema .sig {
  /* Luecke absolut statt proportional: sonst pulsieren kurze Strecken deutlich
     haeufiger als lange und das Bild wirkt nervoes. So ueberquert ein Impuls
     jede Verbindung etwa alle sechs bis acht Sekunden, bei konstanter
     Geschwindigkeit von rund 170 Einheiten je Sekunde. */
  stroke-dasharray: 24 calc(var(--len, 300) + 900);
  stroke-dashoffset: 24;
  opacity: .9;
  animation: sig-lauf calc((var(--len, 300) + 924) * 6ms) linear infinite;
  animation-delay: var(--sig-d, 0s);
}
.js .schema .sig-ring {
  stroke-dasharray: 46 var(--len, 800);
  stroke-dashoffset: 46;
  opacity: .85;
  stroke: var(--c-orange);
  animation: sig-ring calc(var(--len, 800) * 13ms) linear infinite;
}
@keyframes sig-lauf { to { stroke-dashoffset: calc(-1 * (var(--len, 300) + 900)); } }
@keyframes sig-ring { to { stroke-dashoffset: calc(-1 * var(--len, 800)); } }

/* Ruhige Variante: kein Impuls, das Schema bleibt vollstaendig lesbar. */
@media (prefers-reduced-motion: reduce) {
  .js .schema .sig,
  .js .schema .sig-ring { animation: none; opacity: 0; }
}

/* Auf der Hotspot-Grafik kein Impuls: dort steht die Erkundung im Vordergrund,
   und die Grafik baut sich ohnehin beim Scrollen auf. */
.schema--scrub .sig { display: none; }