/* =========================================================================
   Novemcore · Fallstudien (/fallstudien)
   Built ON TOP of the shared Ressourcen CMS component system.
   ressourcen.css carries header, footer, buttons, tokens, reveal, mobile
   menu, the resource card/grid/filter primitives, the newsletter + final CTA
   modules — reused 1:1, not redesigned.
   This file adds ONLY the case-study specific components:
     · hero proof artifact board
     · proof guardrail / case-status strip + status taxonomy
     · featured case studies (2-up large)
     · related resources row
     · case detail template layout
   ========================================================================= */
@import url("ressourcen.css");

/* =========================================================================
   Shared · case status taxonomy (pills)
   Public/approved = progress-green (status only). In Freigabe = amber/copper
   (pending). Anonymisiert = cobalt. Platzhalter = neutral ink.
   ========================================================================= */
.cstatus {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 10px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 11px 5px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid; background: #fff;
}
.cstatus::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex: 0 0 auto; }
.cstatus--public      { color: #2e7d44; border-color: rgba(112,201,119,0.42); background: rgba(112,201,119,0.10); }
.cstatus--anon        { color: #2a3f7a; border-color: rgba(30,58,138,0.26); background: rgba(30,58,138,0.07); }
.cstatus--review      { color: #8c4326; border-color: rgba(184,87,48,0.30); background: rgba(184,87,48,0.08); }
.cstatus--placeholder { color: var(--fg-2); border-color: var(--border-strong); background: rgba(11,15,23,0.035); }
.cstatus--impl        { color: #0c6160; border-color: rgba(14,124,123,0.30); background: rgba(14,124,123,0.08); }
/* on dark surfaces */
.cstatus--ondark.cstatus--review { color: var(--pulse-amber); border-color: rgba(217,119,87,0.42); background: rgba(217,119,87,0.12); }
.cstatus--ondark.cstatus--anon   { color: #9db4ee; border-color: rgba(157,180,238,0.32); background: rgba(157,180,238,0.10); }
.cstatus--ondark.cstatus--public { color: #8fd79a; border-color: rgba(112,201,119,0.4); background: rgba(112,201,119,0.12); }

/* PULSE-enabled badge (used on cards + board tiles) */
.pulse-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 9.5px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: #8c4326; background: rgba(184,87,48,0.08);
  border: 1px solid rgba(184,87,48,0.24); border-radius: 999px; padding: 4px 9px 4px 7px;
  white-space: nowrap;
}
.pulse-badge::before {
  content: ""; width: 14px; height: 14px; border-radius: 999px; flex: 0 0 auto;
  background: var(--pulse-cta-gradient) center/cover no-repeat;
  background-image: url("assets/pulse-mark.png");
  box-shadow: inset 0 0 0 1px rgba(255,245,234,0.35), 0 0 0 2px rgba(184,87,48,0.12);
}
.pulse-badge--ondark { color: var(--pulse-cream); background: rgba(217,119,87,0.14); border-color: rgba(217,119,87,0.4); }

/* delivery badge · Novemcore-only / Partner (PULSE uses .pulse-badge) */
.deliv {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 9.5px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 9px 4px 7px; white-space: nowrap; background: #fff;
}
.deliv::before { content: ""; width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.deliv--nc { color: #2a3f7a; background: rgba(30,58,138,0.06); border: 1px solid rgba(30,58,138,0.22); }
.deliv--nc::before { background: var(--nc-cobalt); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); }
.deliv--partner { color: #6b5320; background: rgba(184,144,72,0.08); border: 1px solid rgba(184,144,72,0.30); }
.deliv--partner::before { background: var(--nc-gold); }
.deliv--ondark { background: rgba(255,245,234,0.06); }
.deliv--ondark.deliv--nc { color: #9db4ee; border-color: rgba(157,180,238,0.32); }

/* =========================================================================
   Case card artifact previews  (category-specific, schematic, no numbers)
   Sit inside .rcard__viz (16 / 8.4). Short labels only.
   ========================================================================= */
.cviz { position: absolute; inset: 0; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 9px; }
.cviz__tag { position: absolute; font: 600 7.5px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; }

/* — Prozesse & Automation: steps + bottleneck + PULSE overlay + priority chips — */
.cviz--proc { background: linear-gradient(162deg, #F4F0E7 0%, #E8E1D2 100%); }
.cflow { display: flex; align-items: center; gap: 5px; }
.cflow__n { width: 30px; height: 21px; border-radius: 5px; background: rgba(14,124,123,0.13); border: 1px solid rgba(14,124,123,0.4); flex: 0 0 auto; }
.cflow__n--hot { background: rgba(184,87,48,0.18); border-color: rgba(184,87,48,0.55); position: relative; }
.cflow__n--hot::after { content: ""; position: absolute; top: -5px; right: -3px; width: 7px; height: 7px; border-radius: 999px; background: var(--pulse-orange); box-shadow: 0 0 0 2px rgba(217,119,87,0.2); }
.cflow__ln { flex: 1; height: 1px; background: var(--border-strong); opacity: 0.45; }
.coverlay { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(184,87,48,0.24); border-radius: var(--r-sm); padding: 5px 9px; box-shadow: 0 4px 12px -6px rgba(11,15,23,0.28); }
.coverlay__d { width: 8px; height: 8px; border-radius: 999px; background: var(--pulse-cta-gradient); flex: 0 0 auto; }
.coverlay__l { font: 600 8px var(--font-mono); letter-spacing: 0.1em; color: #8c4326; }
.cchips { display: flex; gap: 5px; margin-top: auto; }
.cchip { font: 600 7.5px var(--font-mono); letter-spacing: 0.08em; padding: 3px 8px; border-radius: 999px; background: rgba(14,124,123,0.1); border: 1px solid rgba(14,124,123,0.3); color: #0c6160; }
.cchip--1 { background: rgba(184,87,48,0.14); border-color: rgba(184,87,48,0.36); color: #8c4326; }

/* — Software & Requirements: table + stakeholder cols + fit/gap + summary strip — */
.cviz--req { background: linear-gradient(162deg, #EEF1F6 0%, #E2E7F0 100%); }
.creq { display: grid; grid-template-columns: 1fr repeat(3, 30px); gap: 5px; align-items: center; }
.creq__h { font: 600 7px var(--font-mono); letter-spacing: 0.08em; color: var(--fg-3); text-align: center; }
.creq__h:first-child { text-align: left; }
.creq__lbl { height: 8px; border-radius: 3px; background: rgba(11,15,23,0.1); }
.creq__c { height: 13px; border-radius: 3px; background: rgba(30,58,138,0.08); border: 1px solid rgba(30,58,138,0.18); }
.creq__c.fit { background: rgba(112,201,119,0.24); border-color: rgba(112,201,119,0.5); }
.creq__c.gap { background: rgba(184,87,48,0.18); border-color: rgba(184,87,48,0.46); }
.csumstrip { margin-top: auto; display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.82); border: 1px solid var(--border-1); border-radius: var(--r-sm); padding: 5px 9px; }
.csumstrip__d { width: 7px; height: 7px; border-radius: 999px; background: var(--nc-cobalt); flex: 0 0 auto; }
.csumstrip__l { font: 600 8px var(--font-mono); letter-spacing: 0.09em; color: #2a3f7a; }

/* — Finance & BI: KPI cards + dashboard wireframe + steering line — */
.cviz--bi { background: linear-gradient(162deg, #E9EEF0 0%, #DCE6E9 100%); }
.ckpis { display: flex; gap: 6px; }
.ckpi { flex: 1; height: 24px; border-radius: var(--r-sm); background: rgba(255,255,255,0.78); border: 1px solid var(--border-1); padding: 4px 6px; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.ckpi i { height: 3px; border-radius: 2px; background: rgba(0,194,209,0.4); display: block; }
.ckpi i:last-child { width: 60%; background: rgba(30,58,138,0.28); }
.cdash { flex: 1; display: flex; align-items: flex-end; gap: 5px; position: relative; padding-bottom: 2px; }
.cdash b { flex: 1; border-radius: 3px 3px 0 0; background: rgba(30,58,138,0.14); border: 1px solid rgba(30,58,138,0.26); border-bottom: 0; display: block; }
.cdash b:nth-child(2) { background: rgba(0,194,209,0.22); border-color: rgba(0,194,209,0.42); }
.cdash__line { position: absolute; left: 0; right: 0; bottom: 14px; height: 0; border-top: 1.5px dashed rgba(184,144,72,0.5); }

/* — Transformation: roadmap lanes + barrier themes + PMO priority — */
.cviz--trans { background: linear-gradient(162deg, #EFEAE0 0%, #E5DCCB 100%); }
.croad { display: flex; flex-direction: column; gap: 5px; }
.clane { display: flex; align-items: center; gap: 6px; }
.clane__bar { height: 9px; border-radius: 999px; background: rgba(14,124,123,0.18); border: 1px solid rgba(14,124,123,0.36); }
.clane__bar--a { width: 64%; }
.clane__bar--b { width: 46%; background: rgba(30,58,138,0.14); border-color: rgba(30,58,138,0.3); }
.clane__bar--c { width: 78%; background: rgba(184,144,72,0.18); border-color: rgba(184,144,72,0.4); }
.clane__p { font: 600 7px var(--font-mono); letter-spacing: 0.06em; color: var(--fg-3); }
.cbarriers { display: flex; gap: 5px; margin-top: auto; }
.cbarrier { font: 600 7.5px var(--font-mono); letter-spacing: 0.07em; padding: 3px 8px; border-radius: 999px; background: rgba(11,15,23,0.045); border: 1px solid var(--border-2); color: var(--fg-2); }

/* delivery badge anchored top-right of card viz */
.rcard__deliv { position: absolute; top: 12px; right: 12px; z-index: 2; }
.rcard__viz .cviz { transition: filter var(--dur-slow) var(--ease-standard); }
.rcard:hover .rcard__viz .cviz, .rcard:focus-visible .rcard__viz .cviz { filter: brightness(1.04); }
/* status label stays legible on hover — it lives in the footer, unaffected */

/* =========================================================================
   1 · HERO  (proof artifact board)
   ========================================================================= */
.fhero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 56px; padding-top: 72px; padding-bottom: 80px; align-items: center; }
.fhero__eyebrow { display: inline-block; margin-bottom: 18px; }
.fhero__h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -0.004em; margin: 0 0 22px; color: var(--nc-ink); text-wrap: balance; }
.fhero__sub { font-size: 19px; line-height: 1.62; color: var(--fg-2); max-width: 600px; margin-bottom: 30px; }
.fhero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* proof board — contained dark panel with a 2×2 tile grid */
.pboard { position: relative; min-height: 440px; display: flex; }
.pboard__plate { position: absolute; inset: 0; border-radius: var(--r-xl); background: linear-gradient(165deg, #0B1B33 0%, #07090D 100%); box-shadow: var(--shadow-pop); overflow: hidden; }
.pboard__plate::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,245,234,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,245,234,0.05) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(82% 78% at 60% 26%, black 12%, transparent 88%); -webkit-mask-image: radial-gradient(82% 78% at 60% 26%, black 12%, transparent 88%); }
.pboard__platelbl { position: absolute; right: 18px; bottom: 14px; z-index: 3; font: 500 9.5px var(--font-mono); letter-spacing: 0.16em; color: rgba(255,245,234,0.5); }
.pboard__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; align-content: center; padding: 26px 24px 40px; }

/* small inline contact CTA hint below case grid */
.cases-hint { font-size: 14px; color: var(--fg-2); margin-top: 26px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ptile {
  position: relative; background: #fff; border: 1px solid var(--border-1);
  border-radius: var(--r-lg); box-shadow: 0 16px 34px -22px rgba(7,9,13,0.55);
  padding: 16px 16px 15px; display: flex; flex-direction: column; gap: 10px;
}
.ptile__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ptile__type { font: 600 9px var(--font-mono); letter-spacing: 0.14em; display: inline-flex; align-items: center; gap: 6px; color: var(--fg-2); }
.ptile__type::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--tc, var(--nc-cobalt)); }
.ptile__title { font-family: var(--font-display); font-weight: 500; font-size: 14.5px; line-height: 1.18; color: var(--nc-ink); text-wrap: pretty; }
.ptile__foot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 1px; }
.ptile .cstatus { font-size: 8.5px; letter-spacing: 0.1em; padding: 4px 9px 4px 8px; }
.ptile .pulse-badge { font-size: 8.5px; padding: 3px 8px 3px 6px; }
.ptile .pulse-badge::before { width: 11px; height: 11px; }

/* tile accents — one accent family per Leistungsbereich */
.ptile--proc { --tc: var(--pulse-copper); border-color: rgba(184,87,48,0.26); box-shadow: 0 18px 38px -20px rgba(7,9,13,0.6), 0 0 0 1px rgba(184,87,48,0.10); }
.ptile--proc .ptile__type { color: var(--pulse-copper); }
.ptile--req { --tc: var(--nc-cobalt); }
.ptile--req .ptile__type { color: var(--nc-cobalt); }
.ptile--bi { --tc: var(--nc-teal); }
.ptile--bi .ptile__type { color: #0c6160; }
.ptile--trans { --tc: var(--nc-gold); }
.ptile--trans .ptile__type { color: #8a6a2a; }

/* mini process map */
.pmap { display: flex; align-items: center; gap: 6px; }
.pmap__node { width: 15px; height: 15px; border-radius: 4px; background: rgba(14,124,123,0.16); border: 1px solid rgba(14,124,123,0.42); flex: 0 0 auto; }
.pmap__node--hot { background: rgba(184,87,48,0.18); border-color: rgba(184,87,48,0.5); }
.pmap__ln { flex: 1; height: 1px; background: var(--border-strong); opacity: 0.4; }
.pmap__auto { margin-left: auto; font: 600 8px var(--font-mono); letter-spacing: 0.08em; color: var(--pulse-copper); background: rgba(184,87,48,0.08); border: 1px solid rgba(184,87,48,0.22); border-radius: 999px; padding: 2px 7px; }

/* mini requirements matrix */
.pmatrix { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.pmatrix span { height: 13px; border-radius: 3px; background: rgba(30,58,138,0.09); border: 1px solid rgba(30,58,138,0.16); }
.pmatrix span.fit { background: rgba(112,201,119,0.22); border-color: rgba(112,201,119,0.46); }
.pmatrix span.gap { background: rgba(184,87,48,0.18); border-color: rgba(184,87,48,0.44); }

/* mini BI / steering */
.pbi { display: flex; align-items: flex-end; gap: 6px; height: 46px; padding-top: 2px; }
.pbi i { flex: 1; border-radius: 3px 3px 0 0; background: rgba(30,58,138,0.16); border: 1px solid rgba(30,58,138,0.28); border-bottom: 0; }
.pbi i:nth-child(2) { background: rgba(0,194,209,0.20); border-color: rgba(0,194,209,0.4); }
.pbi i:nth-child(4) { background: rgba(184,87,48,0.18); border-color: rgba(184,87,48,0.42); }

/* board entrance — staggered 3-tile reveal, one-shot */
.has-js .pboard .ptile { opacity: 0; transform: translate(16px, 22px); }
.has-js .pboard .pboard__plate { opacity: 0; transform: translateY(14px); }
.has-js .pboard.is-in .pboard__plate { opacity: 1; transform: none; transition: opacity 760ms var(--ease-emphasized), transform 760ms var(--ease-emphasized); }
.has-js .pboard.is-in .ptile { opacity: 1; transform: none; transition: opacity 820ms var(--ease-emphasized), transform 820ms var(--ease-emphasized); }
.has-js .pboard.is-in .ptile--proc  { transition-delay: 180ms; }
.has-js .pboard.is-in .ptile--req   { transition-delay: 300ms; }
.has-js .pboard.is-in .ptile--bi    { transition-delay: 420ms; }
.has-js .pboard.is-in .ptile--trans { transition-delay: 540ms; }
@media (prefers-reduced-motion: reduce) {
  .has-js .pboard .ptile, .has-js .pboard .pboard__plate { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================================
   2 · PROOF GUARDRAIL / CASE STATUS STRIP
   ========================================================================= */
/* compact, contained, non-dominant trust card on paper */
.guardrail { padding: 8px 0 4px; }
.guardrail__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 22px 28px; background: #fff; border: 1px solid var(--border-1); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.guardrail__copy { display: flex; flex-direction: column; gap: 5px; max-width: 62ch; }
.guardrail__title { font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.2; color: var(--nc-ink); }
.guardrail__text { font-size: 13.5px; line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.guardrail__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.guardrail__chips .cstatus { font-size: 9px; }
@media (max-width: 760px) { .guardrail__inner { grid-template-columns: 1fr; gap: 16px; padding: 20px; } }

/* =========================================================================
   3 · FEATURED CASE STUDIES  (2-up large, equal)
   ========================================================================= */
.fcases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: stretch; }
.fcase {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border-1); border-radius: var(--r-lg);
  text-decoration: none; box-shadow: var(--shadow-card); overflow: hidden;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.fcase:hover, .fcase:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: var(--border-strong); }
.fcase__viz { position: relative; aspect-ratio: 16 / 7.4; overflow: hidden; border-bottom: 1px solid var(--border-2); }
.fcase__viz .fviz { transition: transform var(--dur-slow) var(--ease-standard); }
.fcase:hover .fcase__viz .fviz { transform: scale(1.012); }
.fcase__badges { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; z-index: 2; }
.fcase__body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.fcase__type { margin-bottom: 12px; }
.fcase__title { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.16; color: var(--nc-ink); margin-bottom: 12px; text-wrap: pretty; }
.fcase__desc { font-size: 15.5px; line-height: 1.56; color: var(--fg-2); margin-bottom: 18px; text-wrap: pretty; }
.fcase__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.fcase__cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--pulse-copper); margin-top: auto; }
.fcase:hover .fcase__cta .arrow, .fcase:focus-visible .fcase__cta .arrow { transform: translateX(4px); }

/* featured viz: requirements / fit-gap variant on the 2nd card */
.fcase__viz--proc { background: linear-gradient(162deg, #F4F0E7 0%, #E8E1D2 100%); }
.fcase__viz--req  { background: linear-gradient(162deg, #EEF1F6 0%, #E3E8F1 100%); }

/* fit-gap matrix used in featured req card */
.fgmatrix { position: absolute; inset: 0; padding: 30px 30px 24px; display: flex; flex-direction: column; gap: 10px; }
.fgmatrix__row { display: grid; grid-template-columns: 96px repeat(4, 1fr); gap: 8px; align-items: center; }
.fgmatrix__lbl { height: 12px; border-radius: 3px; background: rgba(11,15,23,0.10); }
.fgmatrix__cell { height: 18px; border-radius: 4px; background: rgba(30,58,138,0.08); border: 1px solid rgba(30,58,138,0.16); }
.fgmatrix__cell.fit { background: rgba(112,201,119,0.22); border-color: rgba(112,201,119,0.46); }
.fgmatrix__cell.gap { background: rgba(184,87,48,0.18); border-color: rgba(184,87,48,0.44); }
.fgmatrix__head { display: grid; grid-template-columns: 96px repeat(4, 1fr); gap: 8px; margin-bottom: 2px; }
.fgmatrix__h { font: 600 8px var(--font-mono); letter-spacing: 0.1em; color: var(--fg-3); text-align: center; }
.fgmatrix__h:first-child { text-align: left; }

@media (max-width: 880px) { .fcases { grid-template-columns: 1fr; } }

/* =========================================================================
   6 · RELATED RESOURCES  (3-up, reuses .rcard)
   ========================================================================= */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1024px) { .related { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .related { grid-template-columns: 1fr; } }

/* =========================================================================
   5 · CASE DETAIL TEMPLATE  (/fallstudien/[slug])
   ========================================================================= */
/* detail hero — LIGHT editorial surface with one dark evidence panel */
.dhero { background: var(--nc-paper); position: relative; overflow: hidden; border-bottom: 1px solid var(--border-1); }
.dhero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: 56px; align-items: center; padding: 52px 0 58px; }
.dhero__bread { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--font-mono); letter-spacing: 0.06em; color: var(--fg-2); text-decoration: none; margin-bottom: 20px; }
.dhero__bread:hover { color: var(--pulse-copper); }
.dhero__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.dhero__type { margin-bottom: 16px; }
.dhero__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.004em; color: var(--nc-ink); margin: 0 0 18px; text-wrap: balance; }
.dhero__sub { font-size: 18px; line-height: 1.62; color: var(--fg-2); max-width: 54ch; margin-bottom: 24px; }
.dhero__tags { display: flex; flex-wrap: wrap; gap: 7px; }

/* dark evidence panel (the single dark element in the light hero) */
.dpanel { position: relative; background: linear-gradient(160deg, #1E1009 0%, #120B07 100%); border: 1px solid rgba(217,119,87,0.28); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.dpanel__lbl { font: 600 9.5px var(--font-mono); letter-spacing: 0.14em; color: var(--pulse-amber); display: inline-flex; align-items: center; gap: 8px; }
.dpanel__lbl::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--pulse-orange); }
.dpanel__bars { display: flex; flex-direction: column; gap: 10px; }
.dpanel__row { display: grid; grid-template-columns: 128px 1fr; gap: 12px; align-items: center; }
.dpanel__rowlbl { font: 500 11px var(--font-mono); letter-spacing: 0.03em; color: var(--d-fg-2); }
.dpanel__bar { height: 8px; border-radius: 4px; background: rgba(255,245,234,0.10); overflow: hidden; }
.dpanel__bar i { display: block; height: 100%; border-radius: 4px; background: var(--pulse-cta-gradient); }
.dpanel__note { font: 500 10.5px var(--font-mono); letter-spacing: 0.02em; color: var(--d-fg-3); padding-top: 4px; border-top: 1px solid rgba(255,245,234,0.10); }

/* shared detail section primitives */
.dnarrow { max-width: 860px; }
.deyebrow { display: inline-block; margin-bottom: 14px; }
.dh { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.14; color: var(--nc-ink); margin: 0 0 18px; }
.dlead { font-size: 17px; line-height: 1.66; color: var(--fg-2); margin: 0 0 16px; max-width: 66ch; text-wrap: pretty; }
.dlead:last-child { margin-bottom: 0; }
.dlead strong { color: var(--nc-ink); font-weight: 600; }

/* 2 · case summary row */
.csum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--border-1); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.csum__cell { padding: 20px 22px; border-right: 1px solid var(--border-2); display: flex; flex-direction: column; gap: 9px; }
.csum__cell:last-child { border-right: 0; }
.csum__lbl { font: 600 10px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.csum__val { font-family: var(--font-display); font-weight: 500; font-size: 15.5px; line-height: 1.28; color: var(--nc-ink); }
.csum__badges { display: flex; flex-wrap: wrap; gap: 7px; }
@media (max-width: 760px) { .csum { grid-template-columns: 1fr 1fr; } .csum__cell:nth-child(2) { border-right: 0; } .csum__cell:nth-child(1), .csum__cell:nth-child(2) { border-bottom: 1px solid var(--border-2); } }
@media (max-width: 440px) { .csum { grid-template-columns: 1fr; } .csum__cell { border-right: 0; border-bottom: 1px solid var(--border-2); } .csum__cell:last-child { border-bottom: 0; } }

/* 4 · Fragestellung bullets */
.qlist { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 12px; max-width: 64ch; }
.qlist li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; font-size: 16.5px; line-height: 1.5; color: var(--fg-1); }
.qlist__m { width: 26px; height: 26px; border-radius: var(--r-xs); background: rgba(184,87,48,0.08); border: 1px solid rgba(184,87,48,0.24); display: flex; align-items: center; justify-content: center; color: var(--pulse-copper); flex: 0 0 auto; }

/* 5 · Vorgehen — horizontal 4-step process */
.vflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 8px; }
.vstep { position: relative; border-radius: var(--r-lg); padding: 20px 18px; border: 1px solid; display: flex; flex-direction: column; gap: 10px; }
.vstep__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vstep__n { width: 30px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font: 600 13px var(--font-mono); flex: 0 0 auto; }
.vstep__tag { font: 600 8px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.vstep__t { font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 1.18; color: var(--nc-ink); }
.vstep__d { font-size: 13.5px; line-height: 1.5; color: var(--fg-2); }
.vstep:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -12px; transform: translateY(-50%); font: 600 13px var(--font-mono); color: var(--border-strong); z-index: 2; }
.vstep--nc { background: #fff; border-color: var(--border-1); box-shadow: var(--shadow-card); }
.vstep--nc .vstep__n { background: rgba(30,58,138,0.08); border: 1px solid rgba(30,58,138,0.26); color: var(--nc-cobalt); }
.vstep--nc .vstep__tag { color: #2a3f7a; background: rgba(30,58,138,0.07); border: 1px solid rgba(30,58,138,0.2); }
.vstep--pulse { background: linear-gradient(160deg, #1E1009 0%, #120B07 100%); border-color: rgba(217,119,87,0.32); }
.vstep--pulse .vstep__t { color: var(--pulse-cream); }
.vstep--pulse .vstep__d { color: var(--d-fg-2); }
.vstep--pulse .vstep__n { background: rgba(217,119,87,0.16); border: 1px solid rgba(217,119,87,0.42); color: var(--pulse-amber); }
.vstep--pulse .vstep__tag { color: var(--pulse-cream); background: rgba(217,119,87,0.18); border: 1px solid rgba(217,119,87,0.42); }
@media (max-width: 900px) { .vflow { grid-template-columns: 1fr 1fr; } .vstep:not(:last-child)::after { display: none; } }
@media (max-width: 520px) { .vflow { grid-template-columns: 1fr; } }

/* 6 · role split (Wer macht was?) */
.drole { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.drolecard { border-radius: var(--r-lg); padding: 24px; border: 1px solid; }
.drolecard--pulse { background: linear-gradient(158deg, #1E1009 0%, #120B07 100%); border-color: rgba(217,119,87,0.32); }
.drolecard--nc { background: #fff; border-color: var(--border-1); box-shadow: var(--shadow-card); }
.drolecard__lbl { font: 600 10px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.drolecard--pulse .drolecard__lbl { color: var(--pulse-amber); }
.drolecard--nc .drolecard__lbl { color: var(--nc-cobalt); }
.drolecard__lbl::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.drolecard__t { font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.18; margin-bottom: 4px; }
.drolecard--pulse .drolecard__t { color: var(--pulse-cream); }
.drolecard--nc .drolecard__t { color: var(--nc-ink); }
.rolelist { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 11px; }
.rolelist li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.45; }
.rolelist li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 2px; }
.drolecard--pulse .rolelist li { color: var(--d-fg-2); }
.drolecard--pulse .rolelist li::before { background: var(--pulse-orange); }
.drolecard--nc .rolelist li { color: var(--fg-2); }
.drolecard--nc .rolelist li::before { background: var(--nc-cobalt); }
@media (max-width: 680px) { .drole { grid-template-columns: 1fr; } }

/* 7 · outputs — qualitative artifact cards */
.outs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.outc { display: flex; align-items: center; gap: 13px; padding: 16px 18px; background: #fff; border: 1px solid var(--border-1); border-radius: var(--r-md); box-shadow: var(--shadow-card); }
.outc__ic { width: 36px; height: 36px; border-radius: var(--r-sm); background: rgba(30,58,138,0.07); border: 1px solid rgba(30,58,138,0.16); display: flex; align-items: center; justify-content: center; color: var(--nc-cobalt); flex: 0 0 auto; }
.outc__t { font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.18; color: var(--nc-ink); }
.outc__d { font-size: 12.5px; line-height: 1.4; color: var(--fg-2); margin-top: 2px; }
@media (max-width: 760px) { .outs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .outs { grid-template-columns: 1fr; } }

/* 8 · Wirkung guardrail (no approved numbers) */
.dimpact { display: flex; align-items: flex-start; gap: 16px; padding: 24px 26px; border-radius: var(--r-lg); background: var(--nc-offwhite); border: 1px solid var(--border-1); max-width: 760px; }
.dimpact__ic { width: 40px; height: 40px; border-radius: 999px; background: rgba(184,87,48,0.08); border: 1px solid rgba(184,87,48,0.24); display: flex; align-items: center; justify-content: center; color: var(--pulse-copper); flex: 0 0 auto; }
.dimpact__t { font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 1.25; color: var(--nc-ink); margin-bottom: 6px; }
.dimpact__d { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.dimpact__d .mono { color: var(--fg-1); }
/* approved-metric variant (CMS toggles this on when numbers are released) */
.dmetrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 760px; }
.dmetric { background: #fff; border: 1px solid var(--border-1); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: 20px; }
.dmetric__v { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1; color: var(--nc-ink); }
.dmetric__l { font-size: 13.5px; line-height: 1.4; color: var(--fg-2); margin-top: 8px; }
.dmetric__src { font: 500 9.5px var(--font-mono); letter-spacing: 0.06em; color: var(--fg-3); margin-top: 10px; display: block; }
@media (max-width: 620px) { .dmetrics { grid-template-columns: 1fr; } }

@media (max-width: 920px) {
  .dhero__inner { grid-template-columns: 1fr; gap: 36px; padding: 44px 0 52px; }
}

/* =========================================================================
   Filter row · tablet wrap-safe, mobile horizontal scroll chips
   ========================================================================= */
.qfilter { row-gap: 10px; }
.qfilter-wrap { margin: 0 -4px; padding: 0 4px; }
@media (max-width: 760px) {
  .qfilter-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); }
  .qfilter-wrap::-webkit-scrollbar { display: none; }
  .qfilter { flex-wrap: nowrap; padding: 2px 18px 4px 4px; }
  .qchip { flex: 0 0 auto; padding: 9px 15px; font-size: 13px; }
}

/* =========================================================================
   Responsive · hero
   ========================================================================= */
@media (max-width: 940px) {
  .fhero { grid-template-columns: 1fr; gap: 36px; padding-top: 52px; padding-bottom: 60px; }
  .fhero__visual { order: 2; }
  .pboard { min-height: 400px; max-width: 520px; }
}
@media (max-width: 680px) {
  .fhero__h1 { font-size: clamp(32px, 9vw, 44px); }
  .pboard { min-height: 0; }
  .pboard__grid { padding: 20px 18px 38px; gap: 12px; }
}
@media (max-width: 430px) {
  .pboard__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   INTERNAL HANDOFF ANNOTATION  (listing + detail template reference only)
   Names the Sanity type, the field map, and conditional/optional fields.
   Strip the entire .hnote block + .optflag chips in production.
   (Mirrors blog-papers.css so the Ressourcen templates read identically.)
   ========================================================================= */
.hnote {
  max-width: 860px; margin: 0 auto 6px; display: grid; grid-template-columns: auto 1fr; gap: 14px;
  align-items: start; background: rgba(184,144,72,0.06); border: 1px dashed rgba(184,144,72,0.4);
  border-radius: var(--r-md); padding: 16px 20px;
}
.hnote__eye { font: 600 9px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--nc-gold); padding-top: 3px; white-space: nowrap; }
.hnote__body { font-size: 13px; line-height: 1.6; color: var(--fg-2); }
.hnote__body strong { color: var(--nc-ink); font-weight: 600; }
.hnote__body code { font: 500 12px var(--font-mono); color: #8a6a25; background: rgba(184,144,72,0.1); border-radius: 4px; padding: 1px 5px; }
.hnote__body ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.hnote__body li { position: relative; padding-left: 16px; }
.hnote__body li::before { content: "\00b7"; position: absolute; left: 4px; color: var(--nc-gold); font-weight: 700; }
.hnotewrap { padding-top: 34px; padding-bottom: 0; }

/* small inline "optional field" marker for handoff-reference sections */
.optflag {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; margin-left: 10px;
  font: 600 9px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: #8a6a25; background: rgba(184,144,72,0.08); border: 1px solid rgba(184,144,72,0.32);
  border-radius: 999px; padding: 3px 9px; line-height: 1;
}
.optflag::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--nc-gold); }

/* =========================================================================
   Listing empty state  (Prompt 05 · shown when 0 approved cases exist)
   Mirrors podcast .epempty — warm PULSE accent, clipboard medallion.
   CMS renders EITHER the cases grid OR this block. Preview: ?empty=cases.
   ========================================================================= */
.csempty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 56px 28px 60px; border: 1px dashed rgba(184,87,48,0.3);
  border-radius: var(--r-xl); background: rgba(184,87,48,0.04); margin-top: 12px;
}
.csempty__medallion {
  width: 64px; height: 64px; border-radius: 999px; margin-bottom: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--pulse-copper); background: rgba(184,87,48,0.08);
  border: 1px solid rgba(184,87,48,0.26);
}
.csempty__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.14; color: var(--nc-ink); margin: 0 0 12px; text-wrap: balance; }
.csempty__text { font-size: 16.5px; line-height: 1.6; color: var(--fg-2); max-width: 48ch; margin: 0 0 24px; text-wrap: pretty; }
.csempty[hidden] { display: none; }

/* =========================================================================
   9 · RELATED SERVICES  (detail · links into the single Leistungen page)
   Calm 2-up link cards, no fake metrics — pure navigation.
   ========================================================================= */
.svclinks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 860px; margin-top: 6px; }
.svclink {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; background: #fff; border: 1px solid var(--border-1);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card); text-decoration: none;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.svclink:hover, .svclink:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-pop); border-color: var(--border-strong); }
.svclink__lead { display: flex; flex-direction: column; gap: 6px; }
.svclink__kick { font: 600 9.5px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--nc-cobalt); display: inline-flex; align-items: center; gap: 7px; }
.svclink__kick::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--nc-cobalt); }
.svclink__t { font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.18; color: var(--nc-ink); text-wrap: pretty; }
.svclink__arrow { font: 600 16px var(--font-mono); color: var(--fg-3); flex: 0 0 auto; transition: transform var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); }
.svclink:hover .svclink__arrow, .svclink:focus-visible .svclink__arrow { transform: translateX(4px); color: var(--pulse-copper); }
.svclink--proc  .svclink__kick { color: var(--pulse-copper); } .svclink--proc  .svclink__kick::before { background: var(--pulse-copper); }
.svclink--bi    .svclink__kick { color: #0c6160; } .svclink--bi    .svclink__kick::before { background: var(--nc-teal); }
.svclink--trans .svclink__kick { color: #8a6a2a; } .svclink--trans .svclink__kick::before { background: var(--nc-gold); }
@media (max-width: 680px) { .svclinks { grid-template-columns: 1fr; } }