/* pulsmin · Fassung „Dunkel mit Messung“
   Liegt über site.css. Farbwelt und alles Übrige exakt wie „Dunkel“; dazu:
   - --valve-theme: dark-draft: Im Einstieg steht das Ventil zuerst als Strichzeichnung da und
     wird beim Scrollen zum Edelstahlteil (valve3d.js, wie in der Blaupause).
   - Zwei Abschnitte mit den Messungen (DE/EN, erzeugt mit website/werkzeuge/messkurven):
     „Die Wirkung“ nach dem Prinzip (Diagramm 2 aus dem Fachbeitrag 2016, ein Stift schreibt beim
     Scrollen) und „Messung“ nach der Stückliste (Messprotokoll Kötter, Abb. 3 und 4).
   Die Diagramme stehen auf dunklen Messanzeigen; Signalrot für die Kurve ohne Dämpfer bzw. vor
   dem Ventil (P1), helles Stahlweiß für die Kurve mit Dämpfer bzw. nach dem Ventil (P2). */

:root {
  --valve-theme: dark-draft;

  --chart-grid:       rgba(201, 206, 212, 0.055);
  --chart-grid-major: rgba(201, 206, 212, 0.13);
  --trace-hot:  var(--cw-accent);   /* ohne PDV, P1 vor dem Ventil */
  --trace-cool: #e6eaee;            /* mit PDV, P2 nach dem Ventil */
  --trace-net:  #a08a76;            /* P3 Netzdruck, braun wie im Messprotokoll, gedämpft */
  --display-edge: color-mix(in oklab, var(--cw-ink) 11%, transparent);
}

/* ============================================================ Diagramme */
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--cw-font-mono); font-size: 13px; fill: var(--cw-ink-soft); }
.chart .g { fill: none; stroke: var(--chart-grid); stroke-width: 0.8; }
.chart .g--major { stroke: var(--chart-grid-major); stroke-width: 1; }
.chart .axis { fill: none; stroke: color-mix(in oklab, var(--cw-ink) 38%, transparent); stroke-width: 1.2; }
.chart .ax-title { fill: var(--cw-ink-soft); }
.chart .tr { fill: none; stroke-linejoin: round; stroke-linecap: round; }
/* Kurven leuchten leicht, wie auf einem Messgerät */
.chart .tr--ohne { stroke: var(--trace-hot); stroke-width: 3.2; filter: drop-shadow(0 0 5px rgba(240, 69, 46, 0.55)); }
.chart .tr--mit  { stroke: var(--trace-cool); stroke-width: 3.2; filter: drop-shadow(0 0 4px rgba(230, 234, 238, 0.35)); }
.chart .tr--p1   { stroke: var(--trace-hot); stroke-width: 1.9; filter: drop-shadow(0 0 3px rgba(240, 69, 46, 0.5)); }
.chart .tr--p2   { stroke: var(--trace-cool); stroke-width: 1.8; }
.chart .tr--p3   { stroke: var(--trace-net); stroke-width: 1.6; }
.chart .tr--rate { stroke: var(--trace-hot); stroke-width: 2.8; filter: drop-shadow(0 0 4px rgba(240, 69, 46, 0.5)); }
.chart .tr-label { fill: var(--cw-ink); letter-spacing: 0.02em; }
.chart .tr-label--ohne { fill: var(--trace-hot); }
.chart .area { stroke: color-mix(in oklab, var(--cw-ink) 55%, transparent); stroke-width: 1; }
.chart .hatch-line { stroke: var(--cw-ink); stroke-width: 1.1; opacity: 0.42; }
.chart .lead { fill: none; stroke: var(--cw-ink-soft); stroke-width: 1.2; }
.chart .lead-head { fill: var(--cw-ink-soft); }
.chart .area-label text { fill: var(--cw-ink-soft); }
/* Schreibstift: heller Kern, rot glühend (wie der Laserpunkt auf dem Typenschild) */
.chart .pen { fill: #ffffff; stroke: var(--trace-hot); stroke-width: 3; opacity: 0; filter: drop-shadow(0 0 5px var(--trace-hot)) drop-shadow(0 0 12px rgba(240, 69, 46, 0.6)); }
.chart .ref { fill: none; stroke: color-mix(in oklab, var(--cw-ink) 34%, transparent); stroke-width: 0.9; }
.chart .dim { fill: none; stroke: var(--steel); stroke-width: 1.3; }
.chart .dim-t { fill: var(--cw-ink); font-weight: 600; }
.chart .side-t { fill: var(--cw-ink-soft); }
.chart .unit { fill: var(--cw-ink-soft); }
/* Schriftgrößen in Diagrammeinheiten: „Die Wirkung“ steht in der schmaleren rechten Spalte
   (rund 0,8-fach verkleinert), das Messdiagramm über die volle Breite (rund 1,25-fach) */
.chart--trace text { font-size: 17px; }
.chart--trace .tr-label { font-size: 19px; }
.chart--p text { font-size: 11.5px; }
.chart--p .dim-t { font-size: 12px; }
.chart--p .side-t { font-size: 11px; }
.chart--rate text { font-size: 15px; }
.chart--p-m { display: none; }   /* Handy-Ausschnitt, siehe unten */
.chart__cap { margin: 0.8rem 0 0; font-size: var(--cw-t-sm); color: var(--cw-ink-soft); max-width: 46rem; }
.chart__cap a { color: var(--cw-ink); white-space: nowrap; }

/* Messanzeige: dunkle Tafel mit feiner Kante */
.trace__fig, .measure__fig {
  margin: 0; min-width: 0; padding: clamp(1rem, 1.8vw, 1.5rem);
  background: linear-gradient(180deg, #11151a 0%, #0c0f13 100%);
  border: 1px solid var(--display-edge); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 34px 70px -34px rgba(0, 0, 0, 0.85);
}
.trace__label { display: block; margin-bottom: 0.7rem; }

/* --------------------------------------------------------- Die Wirkung */
.act--trace { background: radial-gradient(75% 85% at 64% 50%, #161a20 0%, #0b0d10 60%, #08090b 100%); }
.act--trace [data-cw-stage] {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem); box-sizing: border-box;
  padding: clamp(5rem, 11vh, 7.5rem) var(--cw-gutter) 12rem;   /* unten frei für das Schriftfeld */
}
.trace__steps { display: grid; position: relative; z-index: 2; }
.trace__step { grid-area: 1 / 1; }
.trace__step h2 { font-size: var(--cw-t-2xl); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 var(--cw-4); font-weight: 560; }
.trace__step p { margin: 0; color: var(--cw-ink-soft); font-size: var(--cw-t-lg); line-height: 1.5; }
/* Zustand wie im Prinzip: Punkt, rot für „ohne PDV“ */
.trace__step .state { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: var(--cw-4); font-family: var(--cw-font-mono); font-size: var(--cw-t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cw-ink-soft); }
.trace__step .state i { width: 8px; height: 8px; border-radius: 50%; background: var(--steel); display: inline-block; }
.trace__step .state i.red { background: var(--cw-accent); }

/* -------------------------------------------------------------- Messung */
.act--measure { background: linear-gradient(180deg, #07080a 0%, #0c0f13 16%, #0c0f13 100%); }
.measure { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 6vw, 6rem); align-items: start; }
.measure h2 { font-size: var(--cw-t-2xl); line-height: 1.02; letter-spacing: -0.025em; margin: 0; }
.measure__intro p { color: var(--cw-ink-soft); margin: var(--cw-5) 0 0; max-width: 30rem; }
/* Messaufbau wie ein Protokollkopf */
.measure__head { margin: 0; border-top: 1px solid var(--line-strong); font-size: 0.92rem; align-self: end; }
.measure__head div { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; gap: 1rem; padding: 0.62rem 0; border-bottom: 1px solid var(--line); }
.measure__head dt { font-family: var(--cw-font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel-dim); padding-top: 0.16rem; }
.measure__head dd { margin: 0; color: var(--cw-ink); }
.measure sup { font-size: 0.7em; line-height: 0; vertical-align: 0.45em; }
.measure__fig--p { grid-column: 1 / -1; }
.chart__legend { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.8rem; font-family: var(--cw-font-mono); font-size: 0.76rem; color: var(--cw-ink-soft); }
.chart__legend b { color: var(--cw-ink); font-weight: 600; margin-right: 0.2rem; }
.key { display: inline-block; width: 22px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 0.5rem; background: var(--trace-cool); }
.key--p1 { background: var(--trace-hot); box-shadow: 0 0 6px rgba(240, 69, 46, 0.6); }
.key--p3 { background: var(--trace-net); }
/* Kennwerte; die ersten beiden tragen die Farbe ihrer Kurve */
.measure__facts { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1rem, 3vw, 2.5rem); border-top: 1px solid var(--line-strong); }
.measure__facts div { padding: 1.1rem 0 0; }
.measure__facts dt { font-size: 0.86rem; color: var(--cw-ink-soft); }
.measure__facts div:nth-child(-n+2) dt::before { content: ""; display: block; width: 22px; height: 3px; border-radius: 2px; margin-bottom: 0.6rem; background: var(--trace-hot); box-shadow: 0 0 6px rgba(240, 69, 46, 0.6); }
.measure__facts div:nth-child(2) dt::before { background: var(--trace-cool); box-shadow: none; }
.measure__facts dd { margin: 0.35rem 0 0; font-family: var(--cw-font-display); font-stretch: 108%; font-size: clamp(1.8rem, 1rem + 2vw, 2.8rem); line-height: 1.05; letter-spacing: -0.02em; font-weight: 520; }
.measure__facts .num { font-family: inherit; font-variant-numeric: tabular-nums lining-nums; }
.measure__facts .unit { font-size: 0.5em; color: var(--cw-ink-soft); margin-left: 0.2em; letter-spacing: 0; }
.measure__facts small { display: block; margin-top: 0.45rem; font-family: var(--cw-font-text); font-stretch: 100%; font-size: 0.84rem; line-height: 1.45; font-weight: 400; letter-spacing: 0; color: var(--cw-ink-soft); }
.measure__fig--rate { grid-column: 1; }
.measure__quote { grid-column: 2; align-self: center; margin: 0; padding-left: clamp(1.2rem, 3vw, 2.4rem); border-left: 2px solid var(--cw-accent); }
.measure__quote p { margin: 0; font-family: var(--cw-font-display); font-stretch: 108%; font-size: var(--cw-t-2xl); line-height: 1.08; letter-spacing: -0.02em; font-weight: 560; }
.measure__quote footer { margin-top: var(--cw-4); font-size: 0.86rem; color: var(--cw-ink-soft); }
.measure__quote footer a { color: var(--cw-ink); }

/* ---------------------------------------------------------------- Handy */
@media (max-width: 860px) {
  .act--trace [data-cw-stage] { display: flex; flex-direction: column; justify-content: flex-start; gap: 1.1rem; padding: 4.5rem var(--cw-gutter) var(--tb-space); }
  .trace__step h2 { font-size: 1.6rem; margin-bottom: var(--cw-3); }
  .trace__step p { font-size: 0.95rem; line-height: 1.45; }
  .trace__step .state { margin-bottom: var(--cw-3); }
  /* Messanzeigen randlos */
  .trace__fig, .measure__fig { margin-inline: calc(-1 * var(--cw-gutter)); padding: 0.9rem var(--cw-gutter); border-inline: 0; border-radius: 0; }
  /* Leuchten auf dem Handy ohne Filter (spart Rechenzeit beim Scrollen) */
  .chart .tr { filter: none; }
  /* Schrift in Diagrammeinheiten größer (auf 390 px rund 10 bis 12 px) */
  .chart--trace text { font-size: 32px; }
  .chart--trace .tr-label { font-size: 34px; }
  .chart--trace .ax-title--y { display: none; }
  .chart--trace .tr { stroke-width: 6; }
  .chart--trace .pen { r: 9; }
  .chart--p text, .chart--p .dim-t { font-size: 24px; }
  .chart--p .tick--minor, .chart--p .side, .chart--p .dim-a { display: none; }
  .chart--p .tr { stroke-width: 3.4; }
  /* Messdiagramm: auf dem Handy der höhere Ausschnitt mit 0,1 s statt der ganzen 0,2 s */
  .measure__fig--p .chart--p:not(.chart--p-m) { display: none; }
  .chart--p-m { display: block; }
  .chart--p-m text, .chart--p-m .dim-t { font-size: 20px; }
  .chart--p-m .tr { stroke-width: 2.8; }
  .chart--rate text { font-size: 17px; }
  .measure { grid-template-columns: minmax(0, 1fr); }
  .measure__fig--p, .measure__facts, .measure__fig--rate, .measure__quote { grid-column: 1; }
  .measure__head div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .measure__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
  .measure__facts div { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
  .measure__quote p { font-size: 1.5rem; }
}
@media (max-width: 860px) and (max-height: 720px) {
  .act--trace [data-cw-stage] { padding-top: 3.8rem; gap: 0.7rem; }
  .trace__step h2 { font-size: 1.4rem; }
  .trace__step p { font-size: 0.9rem; }
}
/* Sehr niedrige Handys (iPhone SE mit Browserleisten): Überschrift, Diagramm und Quelle haben
   Vorrang, der Erklärsatz entfällt (die Überschrift trägt die Aussage) */
@media (max-width: 860px) and (max-height: 620px) {
  .trace__step p { display: none; }
}
@media (max-width: 420px) {
  .measure__facts { grid-template-columns: minmax(0, 1fr); }
}