.kf-wrap{--blue-800:#123a5c;--primary:#A6C9E4;--accent:#e8a84a;--gray-700:#3f4a55;
      --gray-400:#8a94a0;--gray-100:#f2f5f8;--gray-200:#e2e8ee}
.kf-wrap{max-width:1060px;margin:0 auto;padding:2rem 1.25rem 4rem}
.kf-head{background:linear-gradient(135deg,#eaf3fa 0%,#dcebf7 100%);border-radius:14px;
         padding:2rem 1.75rem;margin-bottom:2rem}
.kf-head h1{margin:0 0 .5rem;font-size:1.85rem;font-weight:600;color:var(--blue-800)}
.kf-head p{margin:0;font-size:.98rem;max-width:64ch}
.kf-langs{display:flex;gap:.4rem;margin-bottom:1.25rem}
.kf-langs button{border:1px solid var(--gray-200);background:#fff;border-radius:999px;
  padding:.35rem .95rem;font:inherit;font-size:.82rem;cursor:pointer;color:var(--gray-700)}
.kf-langs button[aria-pressed="true"]{background:var(--blue-800);color:#fff;border-color:var(--blue-800)}
.kf-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:820px){.kf-grid{grid-template-columns:1fr}}
.kf-q{border:1px solid var(--gray-200);border-radius:12px;padding:1.1rem 1.15rem;background:#fff}
.kf-q h2{margin:0 0 .1rem;font-size:.95rem;font-weight:600;color:var(--blue-800)}
.kf-hint{font-size:.78rem;color:var(--gray-400);margin:0 0 .7rem}
.kf-opts{display:flex;flex-wrap:wrap;gap:.4rem}
.kf-opts button{border:1px solid var(--gray-200);background:var(--gray-100);border-radius:8px;
  padding:.45rem .8rem;font:inherit;font-size:.85rem;cursor:pointer;color:var(--gray-700)}
.kf-opts button:hover{border-color:var(--primary)}
.kf-opts button[aria-pressed="true"]{background:var(--blue-800);color:#fff;border-color:var(--blue-800)}
.kf-q input[type=text]{width:100%;border:1px solid var(--gray-200);border-radius:8px;
  padding:.55rem .7rem;font:inherit;font-size:.9rem}
.kf-sug{list-style:none;margin:.4rem 0 0;padding:0;max-height:210px;overflow:auto;
  border:1px solid var(--gray-200);border-radius:8px;display:none}
.kf-sug.open{display:block}
.kf-sug li{padding:.45rem .7rem;font-size:.85rem;cursor:pointer;border-bottom:1px solid var(--gray-100)}
.kf-sug li:hover{background:var(--gray-100)}
.kf-sug li:last-child{border-bottom:0}
.kf-ind{color:var(--gray-400);font-size:.75rem}
.kf-actions{margin-top:1.6rem;display:flex;gap:.6rem;flex-wrap:wrap}
.kf-wrap .btn{display:inline-block;border:0;border-radius:8px;padding:.75rem 1.5rem;font:inherit;
  font-size:.92rem;font-weight:500;cursor:pointer;text-decoration:none}
.kf-wrap .btn--accent{background:var(--accent);color:#1c1c1c}
.kf-wrap .btn--outline{background:#fff;color:var(--blue-800);border:1px solid var(--blue-800)}
.kf-res{margin-top:2rem;display:none}
.kf-res.open{display:block}
.kf-res h2{font-size:1.3rem;color:var(--blue-800);margin:0 0 1rem;font-weight:600}
.kf-card{border:1px solid var(--gray-200);border-left:4px solid var(--primary);
  border-radius:10px;padding:1.1rem 1.25rem;margin-bottom:.85rem;background:#fff}
.kf-card--1{border-left-color:var(--accent)}
.kf-rank{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--gray-400);font-weight:600}
.kf-card h3{margin:.2rem 0 .1rem;font-size:1.05rem;color:var(--blue-800);font-weight:600}
.kf-series{font-size:.8rem;color:var(--gray-400);margin:0 0 .5rem}
.kf-card p{margin:0;font-size:.9rem}
.kf-note{background:var(--gray-100);border-radius:10px;padding:1rem 1.15rem;margin-bottom:.85rem}
.kf-note h3{margin:0 0 .35rem;font-size:.9rem;color:var(--blue-800);font-weight:600}
.kf-note p{margin:0 0 .4rem;font-size:.88rem}
.kf-meta{font-size:.82rem;color:var(--gray-700);margin:0 0 .25rem}
.kf-meta b{color:var(--blue-800);font-weight:600}
.kf-src{font-size:.76rem;color:var(--gray-400);margin:.4rem 0 0}
.kf-warn{border-left:4px solid var(--accent);background:#fdf7ec;border-radius:10px;
  padding:1rem 1.15rem;margin-bottom:.85rem}
.kf-warn p{margin:0;font-size:.88rem}
.kf-foot{margin-top:1.6rem;font-size:.8rem;color:var(--gray-400);max-width:72ch}
/* Bind finderens egne farver til sitets palette, saa den foelger med,
   naar Piotrs farveskema laegges ind i brand.css. */
.kf-wrap{
  --blue-800: var(--brand-blue);
  --primary:  var(--accent-blue);
  --accent:   var(--cta-primary);
  --gray-700: var(--text-soft);
  --gray-400: var(--text-meta);
  --gray-100: var(--bg-muted);
  --gray-200: var(--border-light);
  font-family: var(--font);
  color: var(--text-soft);
  max-width: none;
  padding: 0;
}
/* Finderens egen sprogvaelger skjules. Sitets egen staar i headeren, og to
   sprogvaelgere paa samme side forvirrer. Knapperne bliver i markup'en, saa
   scriptet ikke fejler, men de vises ikke. */
.kf-wrap .kf-langs{display:none}
/* Paa forsiden er finderen en sektion blandt flere og skal ikke have sin
   egen store overskriftsboks. */
.kf-wrap--indlejret .kf-head{display:none}
.kf-wrap .kf-head h1,.kf-wrap .kf-head h2{color:var(--text-main)}


/* ====================================================================
   Produktvaelgeren, ny udformning.
   Blaat baand, hvide symptomkort, graat felt med segmenterede grupper
   og et hvidt anbefalingskort, der opdaterer sig ved hvert klik.
   Alle farver kommer fra sitets variabler, saa den foelger med, naar
   Piotrs palette laegges ind i brand.css.
   ==================================================================== */
.kf2-band{background:var(--brand-blue);color:#fff;padding:3.5rem 0}
.kf2__head{max-width:760px;margin:0 auto 2rem;text-align:center}
.kf2__eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;
 text-transform:uppercase;color:var(--accent-blue);margin-bottom:.6rem}
.kf2__h{color:#fff;margin:0 0 .6rem}
.kf2-band .kf2__head h2,.kf2-band .kf2__head h3{color:#fff}
.kf2__lead{color:rgba(255,255,255,.85);margin:0}
/* Linjen, der siger hvad familien er til. Den staar over why-teksten,
   fordi den er den korte graense og why'en er begrundelsen. */
.kf2__til{font-size:.86rem;font-weight:600;color:var(--brand-blue);
 margin:0 0 .45rem}
.kf-til{font-size:.86rem;font-weight:600;color:var(--blue-800);margin:0 0 .4rem}
.kf2__layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(310px,1fr);
 gap:1.75rem;align-items:start}
@media (max-width:1000px){.kf2__layout{grid-template-columns:minmax(0,1fr)}}

/* --- symptomkortene --- */
.kf2__diag{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.85rem;margin-bottom:1.75rem}
@media (max-width:900px){.kf2__diag{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.kf2__diag{grid-template-columns:minmax(0,1fr)}}
.kf2__kort{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;
 padding:1.1rem .7rem .9rem;background:#fff;border:2px solid transparent;
 border-radius:var(--r-lg);cursor:pointer;font:inherit;color:var(--text-main);
 transition:border-color .15s,box-shadow .15s,transform .12s}
.kf2__kort:hover{border-color:var(--accent-blue);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.kf2__kort[aria-pressed="true"]{border-color:var(--cta-primary);box-shadow:0 0 0 3px rgba(229,141,37,.35)}
.kf2__kort b{font-size:.92rem;font-weight:600;line-height:1.3}
.kf2__kort span{font-size:.78rem;color:var(--text-soft);line-height:1.45}
.kf2-ik{width:74px;height:74px;display:block;color:var(--text-main)}
.kf2-ik__skal{fill:none;stroke:currentColor;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.kf2-ik__mat{fill:var(--accent-blue);opacity:.55}
.kf2-ik__doed{fill:var(--text-meta);opacity:.3}
.kf2-ik__problem{fill:none;stroke:var(--cta-primary);stroke-width:3;stroke-linecap:round}
.kf2-ik__korn{fill:var(--text-soft)}
.kf2-ik__belaeg{fill:var(--cta-primary);opacity:.3}
.kf2-ik__ur{stroke:var(--cta-primary);stroke-width:3;fill:#fff}
.kf2-ik__visere{stroke:var(--cta-primary);stroke-width:3;stroke-linecap:round;fill:none}

/* --- det graa felt med de segmenterede grupper --- */
.kf2__pr{background:var(--bg-muted);border-radius:var(--r-lg);padding:1.5rem 1.6rem 1.4rem;
 color:var(--text-main)}
.kf2__pr-h{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;
 color:var(--text-main);font-weight:700;margin:0 0 .25rem}
.kf2__pr-p{font-size:.88rem;color:var(--text-soft);margin:0 0 1.15rem}
.kf2__rk{display:flex;flex-wrap:wrap;gap:1.15rem 1.9rem}
.kf2__grp{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.kf2__grp--bred{flex:1 1 100%}
.kf2__lab{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
 color:var(--text-main);display:flex;align-items:center;gap:.45rem}
.kf2__lab::after{content:'';flex:1;height:1px;background:var(--border-medium);min-width:14px}
.kf2__hj{font-size:.82rem;line-height:1.45;color:var(--text-soft);margin:-.15rem 0 .1rem;
 max-width:46ch}
.kf2__res-atex{font-size:.86rem;line-height:1.5;margin:.85rem 0 0;padding:.6rem .75rem;
 border-left:3px solid var(--brand-blue);background:var(--bg-muted);color:var(--text-main)}
.kf2__seg{display:flex;flex-wrap:wrap;border:1.5px solid var(--text-soft);
 border-radius:var(--r-md);overflow:hidden;background:#fff;width:max-content;max-width:100%}
.kf2__seg button{border:0;border-radius:0;background:transparent;font:inherit;font-size:.88rem;
 font-weight:500;color:var(--text-main);padding:.52rem 1rem;cursor:pointer;
 box-shadow:1px 0 0 var(--border-medium),0 1px 0 var(--border-medium);
 transition:background .15s,color .15s}
.kf2__seg button:hover{background:var(--bg-soft)}
.kf2__seg button[aria-pressed="true"]{background:var(--brand-blue);color:#fff;font-weight:600}
.kf2__seg button:focus-visible{outline:2px solid var(--cta-primary);outline-offset:-2px}
.kf2__mat{position:relative}
.kf2__mat input{width:100%;padding:.6rem .85rem;font:inherit;font-size:.95rem;
 color:var(--text-main);background:#fff;border:1.5px solid var(--text-soft);
 border-radius:var(--r-md)}
.kf2__mat input:focus{outline:none;border-color:var(--brand-blue);
 box-shadow:0 0 0 3px rgba(23,94,148,.15)}
.kf2__mat .kf-sug{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;
 list-style:none;margin:0;padding:.25rem 0;background:#fff;border:1px solid var(--border-medium);
 border-radius:var(--r-md);box-shadow:var(--shadow-md);max-height:260px;overflow:auto;display:none}
.kf2__mat .kf-sug.open{display:block}
.kf2__mat .kf-sug li{margin:0;padding:.5rem .85rem;font-size:.92rem;cursor:pointer;
 display:flex;justify-content:space-between;gap:1rem}
.kf2__mat .kf-sug li:hover{background:var(--bg-soft)}
.kf2__mat .kf-ind{color:var(--text-meta);font-size:.82rem}
.kf2__akt{margin-top:1.25rem}

/* --- anbefalingskortet --- */
.kf2__res{background:#fff;color:var(--text-main);border-radius:var(--r-lg);
 padding:1.5rem 1.6rem;box-shadow:0 12px 32px rgba(0,0,0,.18);position:sticky;top:calc(var(--header-h) + 1rem)}
@media (max-width:1000px){.kf2__res{position:static}}
.kf2__res-mrk{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;
 text-transform:uppercase;color:var(--text-meta)}
.kf2__res h3{font-size:1.2rem;font-weight:700;margin:.4rem 0 .5rem;color:var(--text-main)}
.kf2__res p{font-size:.9rem;color:var(--text-soft);margin:0 0 1rem}
.kf2__serie{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .9rem}
.kf2__serie i{font-style:normal;font-size:.78rem;font-weight:600;background:var(--bg-soft);
 color:var(--brand-blue);padding:.25rem .55rem;border-radius:var(--r-sm)}
.kf2__maaler{height:6px;border-radius:3px;background:var(--bg-muted);overflow:hidden;margin-bottom:.4rem}
.kf2__maaler i{display:block;height:100%;background:var(--cta-primary);transition:width .25s}
.kf2__maaler-txt{font-size:.78rem;color:var(--text-meta);margin:0 0 1rem}
.kf2__res .btn{width:100%}
.kf2__foot{max-width:760px;margin:1.75rem auto 0;text-align:center;font-size:.85rem;
 color:rgba(255,255,255,.75)}
.kf2__vaerd{max-width:1000px;margin:2.5rem auto 0}

/* Den fulde anbefaling foldes ud under baandet. Kortene arver fra
   finderens egen CSS, saa de ser ud som paa den selvstaendige side. */
.kf2 .kf-wrap{margin-top:1.75rem;max-width:none;padding:0}
.kf2 .kf-res{display:none}
.kf2 .kf-res.open{display:block;background:#fff;border-radius:var(--r-lg);padding:1.5rem 1.75rem}
.kf2 .kf-res h2{color:var(--text-main)}