/* laundrify website-v2 — /features/cycle-details leaf (page-specific)
   Layered on home.css, the shared component library (tokens, header/footer, .btn, .kicker,
   .grad, .curve heartbeat, .sec/.sec-head, .eyebrow). This file adds only what this leaf needs.

   Scope so far: §1 Hero (split — copy left + KPIs-only "program card" right; the power curve
   is saved for §3 Live per the approved structure) and §2 Programm-KPIs (3 explanatory tiles +
   the severity-coloured energy-classification strip). §3–§6 + slim CTA: TODO. */

/* ============ §1 HERO — split, medium (no CTA: leaf-page rule) ============ */
/* reuses .hero (pull-under-header + radial wash anchored top-right, which lights the card)
   and .hero-grid (1.05fr .95fr, centred). The leaf hero is a touch smaller than /home. */
/* no heartbeat divider here — /home keeps it (it needs a lot of vertical room); the hero→§2
   transition is plain generous whitespace, so the hero carries its own bottom padding */
.hero-cd{padding-bottom:46px}
.hero-cd h1{font-size:clamp(33px,4.5vw,53px)}
.hero-cd .lede{max-width:40ch}

/* program card = the hero artifact: a believable in-app "letztes Programm" card.
   Lifted off the paper by a soft radial glow (hero is the one place glow is sanctioned,
   DESIGN.md §6) — the halo sits BEHIND the card, never inside it. */
.cd-prog{position:relative;display:grid;place-items:center;padding:8px 0}
.cd-prog::before{content:"";position:absolute;z-index:0;width:84%;height:82%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(113,174,248,.20),transparent 72%);filter:blur(6px)}
.cd-card{position:relative;z-index:1;width:100%;max-width:430px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px 18px;
  box-shadow:0 28px 64px -34px rgba(44,65,91,.5),0 2px 8px rgba(44,65,91,.04)}

/* card header: machine + "letztes Programm" eyebrow on the left, energy chip on the right */
.cd-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.cd-card-head .eb{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);margin-bottom:3px}
.cd-card-head .mach{font-family:var(--body);font-weight:600;font-size:14px;color:var(--ink)}

/* the three KPIs — the hero statement. Cells divided by hairlines (live-stat band DNA).
   These carry the app's KPI icon family (Sanduhr/Blitz/Münze) — hero-only; §2 stays icon-free. */
.cd-kpirow{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px}
.cd-kpi{text-align:center;padding:2px 8px;position:relative}
.cd-kpi+.cd-kpi::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;
  background:var(--line)}
.cd-kpi .ico{color:var(--active);font-size:19px}
.cd-kpi .v{font-family:var(--disp);font-weight:900;letter-spacing:-.01em;color:var(--deep);
  font-size:27px;line-height:1;margin-top:9px;display:flex;align-items:baseline;justify-content:center;
  gap:3px;white-space:nowrap}
.cd-kpi .u{font-family:var(--body);font-size:13px;font-weight:700;color:var(--active);letter-spacing:0}
.cd-kpi .k{font-size:11.5px;color:var(--mut);margin-top:8px}

/* ---- energy-classification chip (severity scale) — shared by the hero card + §2 strip ---- */
.eclass{display:inline-flex;align-items:center;gap:7px;flex:none;
  font-family:var(--body);font-size:12px;font-weight:600;color:var(--deep);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 10px}
.eclass .dot{width:7px;height:7px;border-radius:50%;flex:none}
.eclass.low .dot{background:var(--green);box-shadow:0 0 0 3px rgba(118,199,133,.18)}
.eclass.mid .dot{background:var(--orange);box-shadow:0 0 0 3px rgba(254,186,45,.18)}
.eclass.high .dot{background:var(--red);box-shadow:0 0 0 3px rgba(255,112,112,.18)}

/* ============ §2 PROGRAMM-KPIs — 3 explanatory tiles + classification strip ============ */
.kpi-sec{padding-top:78px}
.kpi-sec .sec-head{margin-bottom:34px;max-width:54ch}

/* tiles: quiet white hairline cards anchored by the app's KPI icon (Sanduhr/Blitz/Münze)
   in a tint disc — the same icon family the hero card uses, carried through as the section's
   through-line. */
.kpi-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kt{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px 24px}
.kt-ico{width:50px;height:50px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--tint);border:1px solid #d6ebff;color:var(--active);font-size:25px;margin-bottom:17px}
.kt-name{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--ink);margin:0}
.kt-desc{margin:9px 0 0;font-size:14px;color:var(--mut);line-height:1.55}
.kt-desc .plus{color:var(--active);font-weight:600}

/* classification strip: one compact, centred caption beneath the tiles (the boxed stripe was
   rejected as too airy). Severity chips reuse .eclass; links to the aggregate on /statistics. */
.class-strip{margin:24px auto 0;max-width:60ch;text-align:center;font-size:14px;color:var(--mut);
  line-height:1.7;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:7px 9px}
.class-strip .eclass{font-size:11.5px;padding:4px 9px}
/* keep the three severity chips together on their own centred line, regardless of copy length */
.class-strip .eclass-row{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px 9px}
.class-strip a{color:var(--active);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.class-strip a:hover{color:#3369a8}

/* ============ §3 LIVE — copy+bullets left, live power-curve viz right ============ */
/* white band breaks the paper run (hero-wash → §2 paper → §3 band), matching /home's
   feats/faq bands; the hairline borders double as the section dividers, and the paper viz
   card gains contrast on white (DESIGN.md §6: white band, never tinted/flat-grey) */
.live-sec{background:#fff;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.live-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center}
.live-copy .sub{max-width:42ch}

/* live bullets */
.live-points{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:24px}
.live-points .t{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.015em;color:var(--ink)}
.live-points p{margin:6px 0 0;font-size:14px;color:var(--mut);line-height:1.55;max-width:42ch}

/* viz card = the locked viz-panel treatment (DESIGN.md §5): subtle grey gradient border +
   chart-paper dot raster under a top sheen, on the paper surface so the white KPI cards read.
   No interior glow (that is hero-only, §6). */
.live-viz{position:relative;border:1px solid transparent;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(var(--paper),var(--paper)) padding-box,
    linear-gradient(168deg,#eaeef4 0%,#dde4ec 55%,#d2dbe6 100%) border-box;
  box-shadow:0 28px 64px -36px rgba(44,65,91,.5),0 2px 8px rgba(44,65,91,.04)}
.live-viz::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 55%),
    radial-gradient(circle,rgba(44,65,91,.08) 1px,transparent 1.3px);
  background-size:auto,20px 20px;background-position:0 0,10px 12px}
.live-viz-in{position:relative;padding:20px 22px 18px}
.lv-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px}
.lv-mach{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--ink)}
/* live status tag — mirrors the app's running pill (state · realtime wattage). Live-tag DNA
   (tint pill + pulsing green dot); pills are sanctioned here (the live micro-label). The
   wattage tracks the curve's live point as it draws. */
.lv-status{display:inline-flex;align-items:center;gap:7px;flex:none;font-family:var(--body);
  font-size:12.5px;font-weight:700;letter-spacing:.01em;color:var(--active);
  background:var(--tint);border:1px solid rgba(113,174,248,.45);border-radius:999px;padding:6px 12px}
.lv-status .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 3px rgba(118,199,133,.2);animation:pulse 1.8s infinite}
.lv-status .lv-sep{color:var(--faint);font-weight:600}
.lv-status .lv-w{color:var(--deep);font-variant-numeric:tabular-nums}
.lv-chartwrap{margin-top:14px}
.lv-chart{display:block;width:100%;height:auto}
.live-viz .vz-kpis{margin-top:14px}
/* SVG text styles for the chart the script builds */
.lv-cap{font-family:var(--body);font-size:11px;font-weight:700;fill:var(--mut)}
.lv-axis{font-family:var(--body);font-size:11px;font-weight:600;fill:var(--faint)}
/* vertical ruler dropped from the playhead to the time axis */
.lv-ruler{stroke:var(--active);stroke-width:1;opacity:.32;stroke-dasharray:3 4}

/* ============ §4 VERLAUF — viz left, copy right (continues R/L/R; back to paper) ============ */
.verlauf-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:center}
.verlauf-viz{order:-1;display:flex;justify-content:center}   /* viz → left column (copy is DOM-first) */
.verlauf-copy .sub{max-width:46ch}
.verlauf-points{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.verlauf-points li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--mut);line-height:1.5}
.verlauf-points .ico{flex:none;color:var(--active);font-size:14px;margin-top:.16em}
/* Plus framing — a quiet box in the copy (the home plus-collage owns the blurred-history viz) */
.plus-box{margin-top:26px;display:flex;gap:14px;align-items:flex-start;border:1px solid #d6ebff;
  border-radius:var(--r-lg);padding:16px 18px;
  background:radial-gradient(460px 200px at 14% -10%,rgba(113,174,248,.10),transparent 70%),#fff}
.plus-box .ico{flex:none;width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--tint);border:1px solid #d6ebff;color:var(--active);font-size:18px}
.plus-box .t{font-family:var(--disp);font-weight:700;font-size:15.5px;letter-spacing:-.01em;color:var(--ink)}
.plus-box p{margin:3px 0 0;font-size:13.5px;color:var(--mut);line-height:1.5}
.plus-box .plus{color:var(--active);font-weight:600}

/* the Verlauf panel — clean white card (in-app screen mirror), gradient border + soft shadow */
.vh-card{width:100%;max-width:344px;position:relative;border:1px solid transparent;border-radius:var(--r-lg);
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(168deg,#eaeef4,#dde4ec 55%,#d2dbe6) border-box;
  box-shadow:0 30px 66px -36px rgba(44,65,91,.5),0 2px 8px rgba(44,65,91,.04);padding:18px 16px 16px}
.vh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:0 2px 15px}
.vh-title{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.vh-mach{font-size:12px;color:var(--mut);margin-top:2px}
.vh-year{font-size:12px;font-weight:600;color:var(--active);background:var(--tint);border:1px solid #d6ebff;
  border-radius:var(--r-sm);padding:3px 9px;white-space:nowrap}
/* month strip */
.vh-months{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:6px}
.vh-month{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 4px 9px;text-align:center;background:#fff}
.vh-month b{display:block;font-family:var(--body);font-weight:700;font-size:12px;color:var(--ink);margin-bottom:5px}
.vh-m-stat{display:flex;align-items:center;justify-content:center;gap:4px;font-size:9.5px;color:var(--mut);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.vh-m-stat+.vh-m-stat{margin-top:3px}
.vh-m-stat .ico{font-size:11px;flex:none}
.vh-month.sel{background:var(--deep);border-color:var(--deep)}
.vh-month.sel b{color:#fff}.vh-month.sel .vh-m-stat{color:rgba(255,255,255,.74)}
.vh-month.fut{opacity:.5;border-style:dashed}
/* day label */
.vh-day{font-family:var(--disp);font-weight:700;font-size:13.5px;color:var(--ink);margin:15px 2px 9px}
.vh-list{display:grid;gap:8px}
/* entry = accordion button */
.vh-entry{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:11px 13px;cursor:pointer;font-family:var(--body);color:var(--ink);
  transition:border-color .18s,box-shadow .18s}
.vh-entry:hover{border-color:var(--primary)}
.vh-entry.open{border-color:#d6ebff;box-shadow:0 12px 26px -20px rgba(44,65,91,.45)}
.vh-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vh-when{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
.ec-dot{width:8px;height:8px;border-radius:50%;flex:none}
.ec-dot.low{background:var(--green)}.ec-dot.mid{background:var(--orange)}.ec-dot.high{background:var(--red)}
.vh-chev{color:var(--faint);display:flex;flex:none;transition:transform .3s}
.vh-chev svg{width:16px;height:16px;display:block}
.vh-entry:hover .vh-chev{color:var(--mut)}
.vh-entry.open .vh-chev{transform:rotate(180deg);color:var(--active)}
.vh-kpis{display:flex;justify-content:space-evenly;gap:6px;margin-top:9px;padding-top:9px;
  border-top:1px dashed var(--line);font-size:11px;color:var(--mut);white-space:nowrap}
.vh-kpis .k{display:inline-flex;align-items:center;gap:5px}
.vh-kpis .k .ico{color:var(--active);font-size:12px;flex:none}
.vh-kpis .k b{font-weight:700;color:var(--ink);letter-spacing:-.01em}
/* curve reveal (grid-rows 0fr→1fr, like the home stepper accordion) */
.vh-curve{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.vh-entry.open .vh-curve{grid-template-rows:1fr}
.vh-curve-in{overflow:hidden;min-height:0}
.vh-cv{display:block;width:100%;height:auto;margin-top:11px}
.vh-cv-area{fill:rgba(113,174,248,.14)}
.vh-cv-line{fill:none;stroke:var(--active);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.vh-cv-grid{stroke:var(--line-2);stroke-width:1;vector-effect:non-scaling-stroke}

/* ============ §5 PROGRAMM-ERKENNUNG — white band; copy+points left, integrated config-card right ============ */
.erk-sec{background:#fff;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.erk-grid{display:grid;grid-template-columns:minmax(0,472px) 440px;gap:52px;justify-content:center;align-items:center}
.erk-copy .sub{max-width:42ch}
/* threshold explanations beside the card — same titled-point treatment as §3 Live's .live-points */
.erk-points{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:24px}
.erk-points .t{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.015em;color:var(--ink)}
.erk-points p{margin:6px 0 0;font-size:14px;color:var(--mut);line-height:1.55;max-width:42ch}
/* the config/preview card: white panel, subtle gradient border (no chart-paper raster — it's a UI card) */
.erk-card{position:relative;justify-self:center;border:1px solid transparent;border-radius:var(--r-lg);overflow:hidden;max-width:440px;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
    linear-gradient(168deg,#eaeef4,#dde4ec 55%,#d2dbe6) border-box;
  box-shadow:0 28px 64px -36px rgba(44,65,91,.5),0 2px 8px rgba(44,65,91,.04)}
.erk-in{padding:20px 22px 22px}
.erk-chartwrap{position:relative;margin-bottom:2px}
.erk-chart{display:block;width:100%;height:auto}
.erk-cap{font-family:var(--body);font-size:10.5px;font-weight:700;fill:var(--mut)}
.erk-axis{font-family:var(--body);font-size:10.5px;font-weight:600;fill:var(--faint)}
/* notification: translucent so the end marker shows through where they overlap */
.erk-note{position:absolute;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.92);
  border:1px solid var(--line);border-radius:var(--r);padding:8px 11px;white-space:nowrap;
  box-shadow:0 16px 36px -18px rgba(44,65,91,.5);backdrop-filter:blur(1px)}
.erk-note .chk{flex:none;width:24px;height:24px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#fff}
.erk-note .nt{font-family:var(--disp);font-weight:700;font-size:12.5px;color:var(--ink);line-height:1.15}
.erk-note .ns{font-size:10px;color:var(--mut);margin-top:1px}
/* detected end-time + its plain-language explanation form one unit directly under the chart */
.erk-end{display:flex;align-items:baseline;gap:8px;margin-top:14px}
.erk-end .l{font-size:13.5px;font-weight:600;color:var(--ink)}
.erk-end b{font-family:var(--body);font-weight:700;font-size:14px;color:var(--active);font-variant-numeric:tabular-nums}
.erk-divider{height:1px;background:var(--line-2);margin:18px 0}
/* parameter list (static — app-style steppers + toggle) */
.ep-title{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);margin-bottom:18px}
.ep-title .ico{color:var(--active);font-size:16px}
.ep-ctrl+.ep-ctrl{margin-top:16px}
.ep-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ep-name{font-family:var(--body);font-weight:600;font-size:14px;color:var(--ink)}
.ep-step{display:inline-flex;align-items:center;gap:9px}
.ep-step .sbtn{width:25px;height:25px;border:1px solid var(--line);border-radius:var(--r-sm);display:grid;
  place-items:center;color:var(--mut);font-size:15px;background:#fff}
.ep-step .sval{font-family:var(--disp);font-weight:900;font-size:15.5px;color:var(--deep);min-width:42px;
  text-align:center;font-variant-numeric:tabular-nums}
.ep-toggle{width:42px;height:24px;border-radius:999px;background:var(--active);border:1px solid var(--active);
  padding:2px;display:inline-flex;justify-content:flex-end}
.ep-toggle .knob{width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(44,65,91,.35)}
.erk-explain{margin:7px 0 0;font-size:12.5px;color:var(--mut);line-height:1.6}
.erk-explain .pill{font-family:var(--body);font-weight:700;font-size:11.5px;color:var(--active);
  background:var(--tint);border:1px solid #d6ebff;border-radius:var(--r-sm);padding:2px 7px;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ============ §6 CROSS-LINKS — two "what's next" cards (paper) ============ */
.xref-sec .kicker{margin-bottom:22px}
.xref-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.xref{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.xref:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 22px 48px -26px rgba(44,65,91,.4)}
.xref h3{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.015em;margin:0;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px}
.xref h3 .ico{color:var(--active);font-size:17px;transition:transform .18s}
.xref:hover h3 .ico{transform:translateX(3px)}
.xref p{margin:9px 0 0;font-size:14px;color:var(--mut);line-height:1.55}

/* ============ §7 SLIM CLOSING CTA (the leaf-page dark sign-off, button-less) ============ */
.cta-slim{position:relative;overflow:hidden;background:var(--deep);color:#fff}
.cta-slim::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 320px at 50% -45%,rgba(113,174,248,.18),transparent 64%)}
.cta-slim .wrap{position:relative;display:flex;justify-content:center;text-align:center;padding:42px 24px}
.cta-slim h2{font-size:clamp(23px,2.7vw,32px);font-weight:900;color:#fff;margin:0;letter-spacing:-.015em}
.cta-slim .grad{background:linear-gradient(96deg,#8cc0ff,var(--primary));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ============ responsive ============ */
@media (max-width:880px){
  /* .hero-grid stacks (home.css). Show the viz first on mobile: order the card above the copy. */
  .hero-cd .cd-prog{order:-1}
  .hero-cd{padding-bottom:6px}
  .cd-card{max-width:460px}
  .kpi-tiles{grid-template-columns:1fr;gap:16px}
  .kpi-sec .sec-head{max-width:none}
  /* §3: stack — copy first, viz below (natural reading order) */
  .live-grid{grid-template-columns:1fr;gap:34px}
  .live-copy .sub,.live-points p{max-width:none}
  .live-viz-wrap{max-width:520px}
  /* §4: stack; reset the order override so copy reads first, panel below */
  .verlauf-grid{grid-template-columns:1fr;gap:32px}
  .verlauf-viz{order:0}
  .verlauf-copy .sub{max-width:none}
  .vh-card{max-width:420px}
  /* §5: stack — copy first, card below */
  .erk-grid{grid-template-columns:1fr;gap:30px}
  .erk-copy .sub,.erk-points p{max-width:none}
  .erk-card{max-width:480px}
  /* §6: cross-link cards stack */
  .xref-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .cd-kpi{padding:2px 4px}
  .cd-kpi .v{font-size:23px}
  .cd-kpi .k{font-size:10.5px}
}