/* /ratgeber tools & guides (spec 1.0, approved hub design 2026-10-09). Loaded after landing.css,
   which supplies the brand font, header, footer, breadcrumb, FAQ and table styles. */
:root{
  --r-ink:#1c1731;
  --r-violet:#6554a4;
  --r-violet-deep:#54458f;
  --r-lavender:#f3f0fa;
  --r-mint:#edf8f4;
  --r-mint-ink:#1f6b55;
  --r-canvas:#fcfbfd;
  --r-muted:#625e70;
  --r-border:#e6e3ec;
  --r-error:#b3261e;
  --r-error-soft:#fdeceb;
  --r-ok:#1f6b55;
  --r-radius:16px;
  --r-btn:9px;
}
.res{color:var(--r-ink)}
.res-section a:not(.rbtn),.r-note a,.res .fine a,.res-head a{color:var(--r-violet);font-weight:600}
.res .eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--r-muted)}
.res form{display:block;grid-template-columns:none;gap:0;background:transparent;padding:0}
.res [hidden]{display:none!important}
.res .sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:var(--r-btn);border:0;font:inherit;font-weight:600;font-size:16px;cursor:pointer;text-decoration:none;line-height:1.2}
.rbtn.primary{background:var(--r-violet);color:#fff}
.rbtn.primary:hover{background:var(--r-violet-deep)}
.rbtn.soft{background:#fff;color:var(--r-violet);box-shadow:inset 0 0 0 1px var(--r-border)}
.rbtn.soft:hover{background:var(--r-lavender)}
.rbtn.quiet{background:transparent;color:var(--r-violet);padding-inline:8px}
.rbtn[disabled]{opacity:.55;cursor:not-allowed}
.rbtn svg,.arrow-link svg{width:18px;height:18px;flex:none}
.arrow-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--r-violet);text-decoration:none}
.arrow-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- hub ---------- */
.hub-hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:32px;align-items:center;padding:28px 0 8px}
.hub-hero h1{font-size:clamp(36px,5vw,58px);font-weight:800;letter-spacing:-.04em;line-height:1.02;margin-top:14px}
.hub-hero .lead{margin-top:16px;font-size:clamp(17px,1.5vw,20px);color:var(--r-muted);max-width:52ch}
.hub-art{width:100%;max-width:380px;height:auto;justify-self:end;aspect-ratio:380/340}
.res .finder{margin-top:28px;display:grid;gap:18px}
/* Hidden until hub.js runs, but its space is kept, so the cards below do not shift (CLS) when it appears.
   visibility:hidden also keeps it out of the accessibility tree and the tab order without JavaScript. */
.res .finder[hidden]{display:grid!important;visibility:hidden}
.search{position:relative;max-width:680px}
.search svg{position:absolute;left:18px;top:50%;width:22px;height:22px;transform:translateY(-50%);color:var(--r-muted);pointer-events:none}
.search input{width:100%;height:56px;border-radius:12px;border:1px solid #cfcad8;background:#fff;padding:0 18px 0 54px;font:inherit;font-size:17px;color:var(--r-ink)}
.search input::placeholder{color:var(--r-muted)}
.search input:focus-visible{outline:3px solid #8f80d6;outline-offset:2px}
.topics{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.topics label{position:relative;display:inline-flex}
.topics input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.topics span{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--r-border);background:#fff;font-size:15px;font-weight:500;color:var(--r-ink);cursor:pointer}
.topics input:checked+span{background:var(--r-violet);border-color:var(--r-violet);color:#fff}
.topics input:checked+span::before{content:"";width:6px;height:10px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin:-3px 9px 0 -2px}
.topics input:focus-visible+span{outline:3px solid #8f80d6;outline-offset:2px}
.results-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin:48px 0 20px}
.results-head h2{font-size:clamp(28px,3.2vw,40px);font-weight:800;letter-spacing:-.03em}
.results-head .count{color:var(--r-muted);font-size:16px}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.card{position:relative;grid-column:span 2;display:flex;gap:18px;padding:26px 24px;border-radius:var(--r-radius);background:#fff;border:1px solid var(--r-border);transition:border-color .2s,box-shadow .2s}
.card:hover{border-color:#cfc8e6;box-shadow:0 10px 28px -18px rgba(28,23,49,.35)}
.card:focus-within{outline:3px solid #8f80d6;outline-offset:2px}
.card[hidden]{display:none}
.card .ic{flex:none;width:64px;height:64px;border-radius:50%;background:var(--r-lavender);display:grid;place-items:center;color:var(--r-violet)}
.card .ic svg{width:30px;height:30px}
.card h3{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-top:8px;line-height:1.2}
.card p{margin-top:10px;color:var(--r-muted);font-size:16px}
.card .go{margin-top:16px}
/* the card's one link covers the whole card */
.card .go a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card .go a:focus-visible{outline:none}
.card.featured{grid-column:span 3;padding:32px 28px;align-items:center;justify-content:space-between}
.card.featured h3{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.03em;font-weight:800}
.card.featured .copy{max-width:300px}
.card.mint{background:var(--r-mint);border-color:#cfe9df}
.card.lavender{background:var(--r-lavender);border-color:#ddd6f0}
.card .art{flex:none;width:210px;height:auto;aspect-ratio:210/160}
.no-results{margin-top:8px;padding:32px;border-radius:var(--r-radius);background:var(--r-canvas);border:1px dashed #cfcad8;text-align:center}
.no-results[hidden]{display:none}
.no-results p{color:var(--r-muted);margin:8px 0 16px}
.cta-panel{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:32px clamp(24px,4vw,44px);border-radius:var(--r-radius);background:var(--r-ink);color:#fff}
.cta-panel h2{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.03em}
.cta-panel p{color:#d9d5e6;margin-top:6px}
.cta-panel .rbtn{background:#fff;color:var(--r-ink)}
.cta-panel .rbtn:hover{background:var(--r-lavender)}
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card,.card.featured{grid-column:span 1}
  .card.featured{flex-direction:column;align-items:flex-start}
  .card .art{width:180px}
}
@media (max-width:860px){
  .hub-hero{grid-template-columns:1fr}
  .hub-art{display:none}
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
  .card{padding:22px 20px;gap:14px}
  .card .ic{width:52px;height:52px}
  .card .ic svg{width:26px;height:26px}
  .card .art{display:none}
  .results-head{margin-top:36px}
}

/* ---------- resource page shell ---------- */
.res-head{padding:24px 0 8px;max-width:820px}
.res-head h1{font-size:clamp(32px,4.4vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1.04;margin-top:12px}
.res-head .outcome{margin-top:14px;font-size:clamp(17px,1.5vw,20px);color:var(--r-muted);max-width:60ch}
.res-head .byline{margin-top:14px;font-size:14px;color:var(--r-muted)}
.res-section{max-width:820px;margin-top:clamp(40px,5vw,64px)}
.res-section.wide{max-width:none}
.res-section>h2{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.03em;margin-bottom:12px}
.res-section>h3{font-size:19px;font-weight:700;margin:22px 0 6px}
.res-section>p,.res-section li{color:#3a3654;font-size:17px}
.res-section>p+p{margin-top:12px}
.res-section ul,.res-section ol{padding-left:22px;display:grid;gap:8px;margin:12px 0}
.r-note{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--r-canvas);border:1px solid var(--r-border);color:var(--r-muted);font-size:15px}
.r-note strong{color:var(--r-ink)}
.callout{margin-top:20px;padding:20px 22px;border-radius:var(--r-radius);background:var(--r-lavender)}
.callout.mint{background:var(--r-mint)}

/* ---------- tools ---------- */
.tool{margin-top:24px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start}
.panel{border-radius:var(--r-radius);border:1px solid var(--r-border);background:#fff;padding:clamp(20px,3vw,28px)}
.panel.out{background:var(--r-canvas);position:sticky;top:96px}
.panel>h2{font-size:21px;font-weight:700;letter-spacing:-.02em}
.panel .sub{color:var(--r-muted);font-size:15px;margin-top:4px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 16px;margin-top:18px}
.fields .full{grid-column:1/-1}
.field{display:grid;gap:6px;align-content:start}
.field label{font-weight:600;font-size:15px}
.field .opt{font-weight:400;color:var(--r-muted)}
.field .hint{font-size:13.5px;color:var(--r-muted);line-height:1.4}
.unit{display:flex;align-items:stretch;border:1px solid #cfcad8;border-radius:10px;background:#fff;overflow:hidden}
.unit:focus-within{outline:3px solid #8f80d6;outline-offset:1px}
.unit input,.unit select{flex:1;min-width:0;border:0;padding:12px 12px;font:inherit;font-size:17px;color:var(--r-ink);background:transparent}
.unit input:focus{outline:none}
.unit .u{display:grid;place-items:center;padding:0 12px;background:var(--r-canvas);color:var(--r-muted);font-size:14px;border-left:1px solid var(--r-border);white-space:nowrap}
.field.invalid .unit{border-color:var(--r-error);box-shadow:0 0 0 1px var(--r-error)}
.field .err{color:var(--r-error);font-size:14px;font-weight:500}
.field .err::before{content:"! ";font-weight:700}
.field .err[hidden]{display:none}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;align-items:center}
.summary-errors{margin-top:18px;padding:14px 16px;border-radius:12px;background:var(--r-error-soft);color:var(--r-error);border:1px solid #f3c4c0}
.summary-errors[hidden]{display:none}
.summary-errors h3{font-size:16px;font-weight:700}
.summary-errors ul{margin:8px 0 0;padding-left:20px}
.summary-errors a{color:var(--r-error);font-weight:600}
.empty-result{color:var(--r-muted);margin-top:12px}
.figures{display:grid;gap:0;margin-top:14px}
.figure{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--r-border)}
.figure:last-child{border-bottom:0}
.figure dt{color:#3a3654}
.figure dt small{display:block;color:var(--r-muted);font-size:13.5px;margin-top:2px}
.figure dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.figure.key dd{font-size:22px}
.figure.key dt{font-weight:600;color:var(--r-ink)}
.neg{color:var(--r-error)}
.neg::before{content:"▼ ";font-size:.7em;vertical-align:.15em}
.warn{margin-top:14px;padding:12px 14px;border-radius:10px;background:#fff6e5;border:1px solid #f0d9a8;color:#6b4a00;font-size:15px}
.warn[hidden]{display:none}
.scenarios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.scenario{border:1px solid var(--r-border);background:#fff;border-radius:12px;padding:14px 16px}
.scenario h3{font-size:16px;font-weight:700}
.scenario .meta{font-size:13.5px;color:var(--r-muted);margin-top:2px}
.scenario .figure{padding:8px 0}
.scenario .figure.key dd{font-size:19px}
.explain{margin-top:16px;font-size:15px;color:#3a3654}
.explain li+li{margin-top:6px}
.jump{display:none}
.example-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:#fff6e5;color:#6b4a00;font-size:12.5px;font-weight:600;vertical-align:middle}
.example-tag[hidden]{display:none}
@media (max-width:900px){
  .tool{grid-template-columns:1fr}
  .panel.out{position:static}
  .jump{display:inline-flex}
}
@media (max-width:520px){
  .fields{grid-template-columns:1fr}
  .scenarios{grid-template-columns:1fr}
}

/* ---------- download (JB-02) ---------- */
.download{margin-top:24px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:center;padding:clamp(22px,3vw,32px);border-radius:var(--r-radius);background:var(--r-mint);border:1px solid #cfe9df}
.download .meta{color:var(--r-muted);font-size:14px;margin-top:10px}
.download .art{width:100%;max-width:320px;height:auto;justify-self:center;aspect-ratio:210/160}
.sheet-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:14px}
.sheet-list div{padding:14px 16px;border-radius:12px;border:1px solid var(--r-border);background:#fff}
.sheet-list b{display:block}
.sheet-list span{color:var(--r-muted);font-size:15px}
@media (max-width:760px){.download{grid-template-columns:1fr}.download .art{display:none}}

/* ---------- comparison ---------- */
.cmp-wrap:focus-visible{outline:3px solid #8f80d6;outline-offset:2px}
.cmp caption{text-align:left;padding:12px 14px;color:var(--r-muted);font-size:14px}
.cmp .verified{font-weight:600;color:var(--r-mint-ink)}
.decide{display:grid;gap:12px;margin-top:14px}
.decide div{padding:16px 18px;border-radius:12px;border:1px solid var(--r-border);background:#fff}
.decide b{display:block}
.decide p{color:#3a3654;margin-top:4px}
.situations{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:14px}
.situations div{padding:16px 18px;border-radius:12px;background:var(--r-canvas);border:1px solid var(--r-border)}
.situations p{color:#3a3654;margin-top:6px;font-size:16px}

/* ---------- contextual CTA ---------- */
.next-step{margin-top:28px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:22px 24px;border-radius:var(--r-radius);background:var(--r-lavender);border:1px solid #ddd6f0}
.next-step h2,.next-step h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
.next-step p{color:#3a3654;margin-top:4px;max-width:58ch}
.next-step .acts{display:flex;gap:10px;flex-wrap:wrap}
.related-res{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:14px}
.related-res a{display:block;padding:18px 20px;border-radius:var(--r-radius);border:1px solid var(--r-border);background:#fff;text-decoration:none;color:var(--r-ink)}
.related-res a:hover{border-color:#cfc8e6}
.related-res .eyebrow{display:block}
.related-res b{display:block;margin-top:6px;font-size:17px}
.related-res span.s{display:block;color:var(--r-muted);margin-top:4px;font-size:15px}

/* ---------- notice generator (JB-07) ---------- */
.items{display:grid;gap:10px;margin-top:8px}
.item{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:end;padding:12px;border-radius:12px;background:var(--r-canvas);border:1px solid var(--r-border)}
.item .rbtn{min-height:46px}
@media (max-width:620px){.item{grid-template-columns:1fr 1fr}.item .field:first-child{grid-column:1/-1}}
.draft textarea{width:100%;min-height:280px;border:1px solid #cfcad8;border-radius:10px;padding:14px;font:inherit;font-size:16px;line-height:1.55;color:var(--r-ink);resize:vertical}
.draft textarea:focus-visible{outline:3px solid #8f80d6;outline-offset:1px}
.sheet-preview{margin-top:16px;border:1px solid var(--r-border);border-radius:12px;background:#fff;padding:12px}
.sheet-preview .paper{margin:0 auto;background:#fff;box-shadow:0 2px 14px -6px rgba(28,23,49,.35);padding:9% 8%;aspect-ratio:210/297;max-width:420px;overflow:auto}
.sheet-preview .paper.a5{max-width:300px}
.notice-print{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.55;color:#111}
.notice-print .n-title{font-size:1.5em;font-weight:800;margin-bottom:.6em;letter-spacing:-.01em;line-height:1.2}
.copy-fallback[hidden]{display:none}
.status-line{margin-top:10px;font-size:15px;font-weight:500}
.status-line.ok{color:var(--r-ok)}
.status-line.bad{color:var(--r-error)}

/* ---------- print ---------- */
@media print{
  body{padding:0;background:#fff}
  .hdr,.ft,.crumbs,.skip,.no-print,.next-step,.related-wrap,.faq-wrap,.actions,.jump{display:none!important}
  .tool{display:block}
  .panel{border:0;padding:0}
  .panel.out{position:static;background:#fff;margin-top:12px}
  .res-head h1{font-size:24pt}
  body.print-notice > *:not(.print-root){display:none!important}
  body.print-notice .print-root{display:block!important}
}
.print-root{display:none}
@media print{
  .print-root .notice-print{font-size:13pt;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
  .print-root .n-title{font-size:20pt}
}
@media (prefers-reduced-motion:reduce){.card{transition:none}}
.r-area{border:0;width:100%;padding:12px;font:inherit;font-size:17px;resize:vertical;color:var(--r-ink);background:transparent}
.r-area:focus{outline:none}
.item-set{margin:22px 0 0;border:0;padding:0}
.item-set legend{font-weight:700;font-size:18px;padding:0}
.item-set .hint{color:var(--r-muted);font-size:14px;margin-top:4px}
.items-err{margin-top:8px}
.add-item{margin-top:12px}
.r-copy{width:100%;margin-top:8px;border:1px solid #cfcad8;border-radius:10px;padding:10px;font:inherit}
.r-gap{margin-top:12px}
.size-pick{margin-top:16px}
.size-pick legend{font-weight:600;font-size:15px;margin-bottom:6px;padding:0}
.pre{white-space:pre-wrap}
.items-err{color:var(--r-error);font-size:14px;font-weight:500}
/* inline SVG chrome icons of the new resource pages (no icon-font download, Lighthouse R5) */
.ico{display:inline-block;width:20px;height:20px;flex:none;vertical-align:middle}
.ico.ico-sm{width:15px;height:15px}
.ft-col a .ico{color:var(--muted)}
.plus-ic .ico{width:18px;height:18px}