/* laundrify website-v2 — /plus (laundrify plus) page (page-specific)
   Layered on home.css, the shared component library (tokens, header/footer, .btn, .kicker, .grad,
   .sub, .sec/.sec-head, .sec-divider, .hero, .faq + .more). This file adds only what /plus needs.

   Full page: §1 Hero (Jahresübersicht-mit-Limit viz) + §2 "Was plus freischaltet" (highlight cards
   with mini-viz) + §3 Free-vs-plus comparison/price table + §4 FAQ (home .faq band) + §5 cross-link
   + §6 slim closing. The §3 matrix + §5 .xref + §6 .cta-slim mirror the locked leaf patterns
   (/features/integrations + the other leaves) — duplicated here since /plus doesn't load their CSS.

   Severity scale (low/mid/high) = the softened brand green→amber→red, ported from features-statistics
   so the year-chart bars match the Statistiken viz they're adapted from. */
:root{
  --sev-low:#83c393;  --sev-mid:#f0b24f;  --sev-high:#ec7c74;
  --sev-low-t:#3f9e62; --sev-mid-t:#c2870f; --sev-high-t:#d65a51;
}

/* ============================================================================
   §1 HERO — split: copy left, Jahresübersicht-mit-Limit viz right (no CTA: leaf rule)
   ============================================================================ */
.hero-plus{padding-bottom:64px}
.hero-plus h1{font-size:clamp(33px,4.6vw,54px)}
.hero-plus .lede{max-width:42ch}
.hero-viz{display:flex;justify-content:center}

/* the viz card = the locked white screen-mirror treatment (gradient border + soft shadow), the
   Statistiken .vy-card DNA. Holds a stacked-severity year chart where the recent 3 months are free
   and the older months are locked behind a dashed wall that laundrify plus lifts. */
.hj-card{position:relative;width:100%;max-width:430px;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 26px 60px -34px rgba(44,65,91,.5),0 2px 8px rgba(44,65,91,.04);padding:20px}
.hj-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.hj-title{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--ink)}
.hj-mach{font-size:11.5px;color:var(--mut);margin-top:2px}
/* metric toggle = the segmented control DNA (.vy-toggle), restrained icons */
.hj-toggle{display:inline-flex;gap:3px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:3px}
.hj-vt{width:32px;height:26px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--faint)}
.hj-vt svg{width:13px;height:13px;display:block}
.hj-vt.on{background:#fff;color:var(--active);box-shadow:0 1px 2px rgba(44,65,91,.14)}

.hj-chart{position:relative;height:150px;margin-top:18px;padding-right:30px}
.hj-grid{position:absolute;inset:0 30px 0 0;display:flex;flex-direction:column;justify-content:space-between}
.hj-grid span{display:block;border-top:1px dashed var(--line)}
.hj-yax{position:absolute;right:0;top:-5px;bottom:-5px;width:28px;display:flex;flex-direction:column;
  justify-content:space-between;font-size:8px;color:var(--faint);text-align:right}
.hj-bars{position:absolute;inset:0 30px 0 0;display:flex;align-items:flex-end;justify-content:space-between;gap:5px}
/* narrow-ish bars (space-between distributes the gaps; NO auto margin, so the first/last bars sit
   flush to the plot edges — no empty strip for the frost to smear into) + even whitespace between
   the rounded stacked parts */
.hj-col{flex:1;max-width:23px;display:flex;flex-direction:column-reverse;gap:1px}
.hj-col i{display:block;border-radius:2px}
.hj-col .lo{background:var(--sev-low)} .hj-col .mi{background:var(--sev-mid)} .hj-col .hi{background:var(--sev-high)}
/* locked history (Jan–Jul) stays in FULL colour; a transparent frosted overlay sits on top and blurs
   everything beneath it (instead of blurring each bar) — spans from the chart's left edge to the wall.
   The frost has no soft edge to fade into on the left (bars are flush) or bottom (the baseline caps it). */
.hj-lock{position:absolute;left:-20px;top:-6px;bottom:0;width:calc(58.3% - 18px + 20px);pointer-events:none;
  transition:opacity .4s ease;
  backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);
  /* white veil over the blur: near-opaque across the top third, fading down — washes out the bar tops */
  background:linear-gradient(rgba(255,255,255,1) 0%,rgba(255,255,255,.92) 32%,rgba(255,255,255,.35) 100%)}
/* crisp 0-axis baseline, painted ON TOP of the frost so it cleanly terminates the blurred bars at the
   bottom (the horizontal counterpart of the wall on the right) */
.hj-base{position:absolute;left:0;right:30px;bottom:0px;height:1px;background:#c4d0de}
/* the "Wand": dashed boundary at the 7/12 gap (Jan–Jul locked | Aug–Okt free window) */
.hj-wall{position:absolute;top:-6px;bottom:0;left:calc(58.3% - 16px);border-left:1px dashed var(--faint);transition:opacity .4s ease}
.hj-xax{display:flex;justify-content:space-between;margin-top:7px;padding-right:30px;font-size:8.5px;color:var(--faint)}
/* reveal the locked history on hover (desktop) or tap (.unlocked, set by JS on touch): lift frost + wall */
.hj-card{cursor:default}
.hj-card:hover .hj-lock,.hj-card.unlocked .hj-lock,
.hj-card:hover .hj-wall,.hj-card.unlocked .hj-wall{opacity:0}

/* ============================================================================
   §2 WAS PLUS FREISCHALTET — highlight cards with mini-viz
   ============================================================================ */
.unlock-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
/* card = the locked subtle grey gradient border (lit from above-left), hover lift — WITHOUT the
   feature-grid's cursor-ring signature (the .intg-card recipe). Clickable into its leaf. */
.uc{display:flex;flex-direction:column;color:var(--ink);overflow:hidden;
  border:1px solid transparent;border-radius:var(--r-lg);
  background:linear-gradient(#fff,#fff) padding-box,
    linear-gradient(168deg,#eaeef4 0%,#dde4ec 55%,#d2dbe6 100%) border-box;
  box-shadow:0 2px 8px rgba(44,65,91,.04);transition:transform .18s,box-shadow .18s}
.uc:hover{transform:translateY(-2px);box-shadow:0 24px 52px -30px rgba(44,65,91,.45)}
.uc-viz{position:relative;flex:none;height:172px;display:grid;place-items:center;padding:20px;
  background:var(--paper);border-bottom:1px solid var(--line-2);overflow:hidden}
.uc-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.uc-body h3{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.015em;color:var(--ink);margin:0}
.uc-body p{margin:8px 0 0;font-size:14px;color:var(--mut);line-height:1.55}
.uc .more{margin-top:auto;padding-top:16px;font-size:13.5px}
/* solo closer card (notification): same vertical layout as the others, but it's alone in its row —
   span the grid and centre it at one column's width instead of stretching full-width */
.uc.solo{grid-column:1/-1;justify-self:center;width:calc(50% - 11px)}

/* ---- shared mini screen-mirror card (white, hairline + soft shadow) ---- */
.uv-card{width:100%;max-width:300px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 12px 30px -20px rgba(44,65,91,.4);padding:13px 15px;transition:transform .25s ease}
.uv-label{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);margin-bottom:10px;white-space:nowrap}

/* ---- 2-state mini-viz: default = "ohne plus" (locked content blurred); hover/focus (desktop) or
   tap (.unlocked, set by JS on touch) reveals the plus payoff and grows the card a touch ---- */
.uc:not(.solo):hover .uv-card,.uc:not(.solo):focus-visible .uv-card,.uc:not(.solo).unlocked .uv-card{transform:scale(1.04)}
/* generic locked value (€, −21 %, action buttons): blurred at rest, sharp when unlocked */
.uv-blur{filter:blur(5px);transition:filter .3s ease}
.uc:hover .uv-blur,.uc:focus-visible .uv-blur,.uc.unlocked .uv-blur{filter:blur(0)}

/* Kosten — KPI trio; the € value is the plus payoff (blurred at rest like the others, same colours) */
.uv-kpis{max-width:330px}   /* a touch wider so the three KPIs get more breathing room */
.uv-kpi-row{display:flex}
.uv-kpi{flex:1;display:flex;align-items:center;gap:8px;padding:4px 11px}
.uv-kpi+.uv-kpi{border-left:1px solid var(--line-2)}
.uv-kpi .ico{color:var(--active);font-size:15px;flex:none}
.uv-kpi .k{font-size:9px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.uv-kpi .v{font-family:var(--disp);font-weight:900;font-size:14px;color:var(--deep);line-height:1.15;white-space:nowrap}

/* Statistiken — October snapshot: Jan–Jul locked (frosted), Aug–Okt free, Nov/Dez no data yet */
/* extra top + left padding: the data + the frost (which bleeds up/left) sit in the top-left, while the
   empty Nov/Dez months + the x-axis leave the bottom-right open — this evens out the whitespace */
.uv-bars-card{padding:21px 15px 13px 23px}
.uv-bars{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:0;height:64px;
  border-bottom:1px solid var(--line)}
/* same treatment as the hero bars (.hj-col), scaled down: thicker bars (space-between widens the
   gaps), rounded stacked segments with a 1px gap between them — subtle at this size, but keeps the
   design language consistent */
.uv-bar{flex:1;max-width:16px;display:flex;flex-direction:column-reverse;gap:1px}
.uv-bar i{display:block;border-radius:1.5px}
.uv-bar .lo{background:var(--sev-low)} .uv-bar .mi{background:var(--sev-mid)} .uv-bar .hi{background:var(--sev-high)}
/* frost over the locked history (Jan–Jul); extends left of the first bar so the blur fades OUT
   into the card instead of stopping abruptly (the hero .hj-lock approach, scaled) */
.uv-lock{position:absolute;left:-12px;top:-8px;bottom:0;width:calc(58.3% + 12px);pointer-events:none;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .3s ease;
  /* white veil over the blur: strongest at the top, fades to transparent — washes out the bar tops */
  background:linear-gradient(rgba(255,255,255,1) 0%,rgba(255,255,255,.92) 32%,rgba(255,255,255,.35) 100%)}
/* very thin, subtle boundary where the frost ends (Jul | Aug) */
.uv-wall{position:absolute;left:58.8%;top:-2px;bottom:0;border-left:1px dashed #cdd8e4;transition:opacity .3s ease}
.uc:hover .uv-lock,.uc:focus-visible .uv-lock,.uc.unlocked .uv-lock,
.uc:hover .uv-wall,.uc:focus-visible .uv-wall,.uc.unlocked .uv-wall{opacity:0}
.uv-x{display:flex;justify-content:space-between;margin-top:6px;font-size:8.5px;color:var(--faint)}

/* Historie — programme rows reaching far back (skeleton KPI line; values needn't be legible) */
.uv-rows-card .uv-label{margin-bottom:4px}
.uv-row{padding:8px 0}
.uv-row+.uv-row{border-top:1px solid var(--line-2)}
.uv-row .r1{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.uv-row .n{font-size:12px;font-weight:600;color:var(--ink)}
.uv-row .d{font-size:10px;color:var(--faint);white-space:nowrap}
.uv-row .r2{display:flex;justify-content:space-between;margin-top:6px;padding:0 2px;white-space:nowrap}
.uv-row .r2>span{display:inline-flex;align-items:center;gap:4px}
.uv-row .r2 .ico{font-size:10px;color:var(--mut)}
.uv-row .r2 .sk{width:24px;height:7px;border-radius:4px;background:var(--line-2)}
/* the 4-week free-window cut-off + the locked (blurred) row beyond it */
.uv-cut{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:8.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.uv-cut::before,.uv-cut::after{content:"";flex:1;border-top:1px dashed var(--faint);opacity:.5}
.uv-row.lk{filter:blur(4px);opacity:.85;transition:filter .3s ease,opacity .3s ease}
.uc:hover .uv-row.lk,.uc:focus-visible .uv-row.lk,.uc.unlocked .uv-row.lk{filter:blur(0);opacity:1}

/* Vergleich — −21 % delta (down = less = green, app semantics) */
.uv-comp{text-align:left}
.uv-delta{display:inline-flex;align-items:center;gap:5px;font-family:var(--disp);font-weight:900;
  font-size:30px;line-height:1;color:var(--sev-low-t);font-variant-numeric:tabular-nums}
.uv-delta .tr{display:inline-flex;line-height:0}
.uv-delta .tr svg{width:20px;height:20px;display:block}
.uv-comp p{margin:8px 0 0;font-size:11.5px;color:var(--mut);line-height:1.45;max-width:24ch}

/* Aktions-Buttons — push notification (overflow:hidden clips the flush action row to the card radius) */
.uv-note{max-width:280px;overflow:hidden}
.uv-note-head{display:flex;align-items:center;gap:11px}
.uv-note-head img{width:32px;height:32px;border-radius:8px;display:block}
.uv-note-head .t{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--ink);line-height:1.2}
.uv-note-head .s{font-size:11px;color:var(--mut);margin-top:1px}
/* iOS-style divided action row mirroring the /features/notifications hero (.np-actions/.np-act):
   no fills, hairline top + centre dividers, primary in blue. The plus payoff GROWS in (height 0 →
   auto) on unlock instead of un-blurring; the separator hairline lives on the buttons so nothing
   shows while collapsed (it's clipped). margin breaks the row out flush to the card's side edges. */
.uv-actions{display:grid;grid-template-columns:1fr 1fr;height:0;overflow:hidden;margin:0 -15px;
  interpolate-size:allow-keywords;transition:height .35s ease,margin .35s ease}
/* on reveal: grow + add top breathing room + pull flush to the card's bottom edge (negative bottom
   margin cancels .uv-card's bottom padding, so no dead white space under the buttons). Animated, so
   the collapsed card keeps its normal symmetric padding. */
.uc:hover .uv-actions,.uc:focus-visible .uv-actions,.uc.unlocked .uv-actions{height:auto;margin-top:11px;margin-bottom:-13px}
.uv-act{padding:10px 8px;text-align:center;font-family:var(--body);font-weight:700;font-size:12px;
  color:var(--mut);border-top:1px solid var(--line-2)}
.uv-act.primary{color:var(--active)}
.uv-act+.uv-act{border-left:1px solid var(--line-2)}

/* ============================================================================
   §3 FREE vs. PLUS — comparison + price table (white band; datasheet voice)
   ============================================================================ */
/* overflow-x:clip contains the fixed-width table (else a sized <table> leaks its width into the
   document scroll region → phantom horizontal page scrollbar). Same gotcha as the integrations matrix. */
.matrix-sec{background:#fff;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  padding:90px 0;position:relative;overflow-x:clip}

/* monthly/yearly toggle — the rounded-rect segmented control (NOT a pill: design-system controls
   use .vy-toggle/.cmp-toggle DNA), centred above the table */
.bill-toggle{display:flex;width:fit-content;margin:0 auto 30px;gap:3px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:4px}
.bt{font-family:var(--body);font-weight:600;font-size:13px;color:var(--mut);cursor:pointer;
  background:none;border:0;border-radius:var(--r-sm);padding:8px 16px;display:inline-flex;align-items:center;gap:7px;transition:.18s}
.bt.on{background:#fff;color:var(--active);box-shadow:0 1px 2px rgba(44,65,91,.14)}
.bt-save{font-size:10.5px;font-weight:700;color:var(--sev-low-t);background:rgba(118,199,133,.16);
  border-radius:var(--r-sm);padding:2px 6px}

.cm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 3 columns (label + Free + plus); fixed layout, compact width, centred (scrolls on narrow viewports) */
.cap-matrix{border-collapse:collapse;font-family:var(--body);text-align:center;table-layout:fixed;width:640px;margin:0 auto}
.cap-matrix th,.cap-matrix td{padding:15px 14px;vertical-align:middle}
.cap-matrix thead th{vertical-align:bottom;padding-bottom:14px}
.cap-matrix thead tr{border-bottom:2px solid var(--line)}
.cap-matrix tbody tr+tr{border-top:1px solid var(--line)}
.cap-matrix .cap{text-align:left;width:44%;padding-right:24px}
.cap-matrix th.cap{font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.3}
.cap-sub{display:block;font-size:11.5px;font-weight:500;color:var(--faint);margin-top:3px}
/* plus column = the highlighted baseline (the more complete view) */
.cap-matrix .col-plus{background:rgba(113,174,248,.07)}
.cap-matrix thead .col-plus{border-bottom-color:var(--active)}
.cap-matrix thead th:nth-child(n+2){width:28%}
/* header cells: label + (plus) the "empfohlen" base tag */
.cm-h{display:flex;flex-direction:column;align-items:center;gap:5px}
.cm-base{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--deep)}
/* the gradient 'laundrify plus' mark, sized for the plus column header */
.cm-h .plus-wm{height:24px}
/* base tier: an intentionally plain, muted uppercase label — quiet foil to the gradient plus mark */
.cm-h .cm-std{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
/* single-line Standard label centers against the taller plus stack (mark + EMPFOHLEN) */
.cap-matrix thead th:has(.cm-std){vertical-align:middle}
/* cells: yes = soft green disc + check (the integrations .cm-yes DNA); no = quiet dash;
   limited value = muted text; unbegrenzt = emphasised ink */
.cm-yes{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:rgba(118,199,133,.16);color:#4fa863}
.cm-yes svg{width:13px;height:13px;display:block}
.cm-no{display:inline-block;color:var(--faint);font-weight:700;font-size:17px;line-height:1}
.cm-lim{font-size:13.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.cm-unl{font-size:13.5px;font-weight:700;color:var(--active)}
/* price row — big Overlock numerals */
.price-row td{padding-top:18px;padding-bottom:18px}
.pr-amt{font-family:var(--disp);font-weight:900;font-size:24px;letter-spacing:-.01em;color:var(--deep);
  display:block;line-height:1;font-variant-numeric:tabular-nums}
.pr-per{display:block;font-size:11px;color:var(--mut);margin-top:5px}

.cm-notes{margin:22px auto 0;max-width:64ch;font-size:12.5px;color:var(--mut);line-height:1.55;text-align:center}
.cm-ph{color:var(--faint)}

/* ============================================================================
   §5 CROSS-LINK — single "back to the hub" card (shared .xref pattern)
   ============================================================================ */
.xref{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px;
  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-solo{max-width:560px;margin:0 auto}
.xref-eyebrow{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.xref h3{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.015em;margin:4px 0 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}

/* ============================================================================
   §6 SLIM CLOSING — dark sign-off, button-less (shared .cta-slim pattern)
   ============================================================================ */
.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 (matches the other leaves). */
  .hero-plus{padding-bottom:20px}
  .hero-viz{order:-1;margin-bottom:4px}
  .hj-card{max-width:420px}
  .sec-divider{margin-top:8px}
  /* §2 cards stack 1-col; the solo card fills the row like the rest (no centred half-width) */
  .unlock-grid{grid-template-columns:1fr;gap:18px}
  .uc.solo{width:auto;justify-self:stretch}
}
/* matrix on mobile: compact + the label column pinned while Free/plus scroll under it */
@media (max-width:600px){
  .matrix-sec{padding:68px 0}
  .cap-matrix{width:420px}
  .cap-matrix .cap{width:40%;padding-right:12px;position:sticky;left:0;background:#fff;box-shadow:1px 0 0 var(--line)}
  .cap-matrix thead .cap{z-index:2;background:#fff}
  .cap-matrix tbody .cap{z-index:1}
  .cap-matrix th,.cap-matrix td{padding:12px 10px}
  .cap-matrix th.cap{font-size:13px}
  .pr-amt{font-size:21px}
}