.hnf{--hnf-line: rgba(255, 255, 255, .12);--hnf-surface: rgba(255, 255, 255, .035);--hnf-surface-2: rgba(255, 255, 255, .06);--hnf-purple: #A29AE0;--hnf-teal: #7FCBD3;--hnf-rose: #D193C1;margin:8px 0 4px;padding:clamp(18px,3vw,28px);border:1px solid var(--hnf-line);border-radius:20px;background:var(--hnf-surface);backdrop-filter:blur(6px)}.hnf-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.hnf-field{display:flex;flex-direction:column;gap:6px}.hnf-field label{font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;opacity:.62}.hnf-field select,.hnf-search input{width:100%;padding:10px 12px;border:1px solid var(--hnf-line);border-radius:12px;background:var(--hnf-surface-2);color:inherit;font:inherit;font-size:.92rem;appearance:none;cursor:pointer;transition:border-color .18s ease,background .18s ease}.hnf-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A29AE0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}.hnf-field select:hover,.hnf-search input:hover{border-color:#a29ae080}.hnf-field select:focus-visible,.hnf-search input:focus-visible{outline:none;border-color:var(--hnf-purple);background:#a29ae01a}.hnf-field select option{color:#10121c}.hnf-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:14px}.hnf-search{flex:1 1 240px;display:flex;flex-direction:column;gap:6px}.hnf-search input{cursor:text}.hnf-actions{display:flex;gap:10px}.hnf-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:999px;border:1px solid var(--hnf-line);background:var(--hnf-surface-2);color:inherit;font:inherit;font-size:.88rem;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .12s ease}.hnf-btn svg{width:16px;height:16px}.hnf-btn:hover{border-color:#a29ae08c;background:#a29ae01f}.hnf-btn:active{transform:translateY(1px)}.hnf-btn-primary{border-color:transparent;background:linear-gradient(120deg,#a29ae0e6,#d193c1e6);color:#0c0e16;font-weight:500}.hnf-btn-primary:hover{background:linear-gradient(120deg,#a29ae0,#d193c1)}.hnf-resultbar{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:20px 0 12px;padding-top:16px;border-top:1px solid var(--hnf-line)}.hnf-count{font-size:.9rem;opacity:.7}.hnf-hint{font-size:.78rem;opacity:.5}.hnf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.hnf-card{padding:14px 15px;border:1px solid var(--hnf-line);border-radius:14px;background:var(--hnf-surface-2);transition:border-color .18s ease,transform .12s ease,box-shadow .18s ease}.hnf-card:hover{border-color:#a29ae073;transform:translateY(-2px)}.hnf-card.is-pick{border-color:var(--hnf-rose);box-shadow:0 0 0 1px #d193c180,0 10px 30px -12px #d193c199;animation:hnf-pop .5s ease}@keyframes hnf-pop{0%{transform:scale(.96)}60%{transform:scale(1.02)}to{transform:scale(1)}}.hnf-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.hnf-name{font-family:Cormorant Garamond,Georgia,serif;font-size:1.5rem;font-weight:500;line-height:1.1}.hnf-gender{font-size:.66rem;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap}.hnf-g-m{background:#7fcbd329;color:var(--hnf-teal)}.hnf-g-w{background:#d193c129;color:var(--hnf-rose)}.hnf-g-u{background:#a29ae029;color:var(--hnf-purple)}.hnf-bed{margin:4px 0 0;font-size:.84rem;opacity:.72;font-style:italic}.hnf-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.hnf-tag{font-size:.7rem;padding:3px 8px;border-radius:999px;border:1px solid var(--hnf-line);opacity:.82}.hnf-tag.hnf-stil{border-color:#a29ae066}.hnf-tag.hnf-zeichen{border-color:#7fcbd366}.hnf-chars{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.hnf-chip{font-size:.68rem;opacity:.55}.hnf-chip:before{content:"#";opacity:.6}.hnf-empty{padding:28px 16px;text-align:center;border:1px dashed var(--hnf-line);border-radius:14px;opacity:.7;font-size:.92rem}.hnf-more{display:flex;justify-content:center;margin-top:22px}.hnf-more-btn{padding:11px 26px}.hnf-more-btn[hidden]{display:none}@media(max-width:520px){.hnf-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.hnf-actions{width:100%}.hnf-btn{flex:1;justify-content:center}.hnf-more-btn{width:100%}}