.lizenz-finder { --lf-brand:        var(--primary, #0000ff);
--lf-brand-strong: var(--primary-d-1, #0a0ad1);
--lf-on-brand:     var(--primary-fg, #fff);
--lf-brand-soft:   var(--primary-surface, hsla(240,100%,50%,.05));
--lf-accent:       var(--accent, #ff3b4e);
--lf-on-accent:    var(--accent-fg, #fff);
--lf-accent-soft:  var(--accent-surface, hsla(356,100%,62%,.05));
--lf-ink:          var(--text-body, #363636);
--lf-title:        var(--text-title, #00005e);
--lf-muted:        var(--muted, #5b6b7a);
--lf-line:         var(--border-primary, #dcd7cf);
--lf-surface:      var(--bg-body, #fff);
--lf-soft:         var(--bg-surface, #f7f5f0);
--lf-soft-hover:   var(--bg-surface-hover, #efece5);
--lf-radius:       var(--radius-m, 12px);
--lf-heading-font: var(--heading-font-family, inherit);
box-sizing: border-box;
max-width: 680px;
margin-inline: auto;
color: var(--lf-ink);
font-size: var(--text-m, 16px);
line-height: 1.5;
}
.lizenz-finder *, .lizenz-finder *::before, .lizenz-finder *::after { box-sizing: inherit; } .lf-progress { display: flex; gap: 6px; margin-bottom: var(--space-m, 24px); }
.lf-dot { flex: 1; height: 4px; border-radius: 999px; background: var(--lf-line); }
.lf-dot.is-active { background: var(--lf-brand); }
.lf-dot.is-done { background: var(--lf-brand-strong); } .lf-step__count { font-size: var(--text-s, 13px); letter-spacing: .04em; text-transform: uppercase; color: var(--lf-muted); }
.lf-step__q { font-family: var(--lf-heading-font); color: var(--lf-title); margin: 6px 0 18px; font-size: 1.4rem; line-height: 1.25; }
.lf-options { display: grid; gap: 10px; }
.lf-option {
display: flex; flex-direction: column; gap: 2px;
text-align: left; width: 100%;
padding: 14px 16px; border: 1.5px solid var(--lf-line); border-radius: var(--lf-radius);
background: var(--lf-surface); color: inherit; cursor: pointer;
font: inherit; transition: border-color .12s, background .12s;
}
.lf-option:hover { border-color: var(--lf-brand); }
.lf-option.is-selected { border-color: var(--lf-brand); background: var(--lf-brand-soft); }
.lf-option__t { font-weight: 600; }
.lf-option__s { font-size: var(--text-s, 14px); color: var(--lf-muted); } .lf-option.has-icon { align-items: center; text-align: center; gap: 4px; padding-block: 18px; }
.lf-option__icon {
width: 40px; height: 40px; margin-bottom: 4px; flex: none;
background-color: var(--lf-brand);
-webkit-mask: var(--lf-icon) center / contain no-repeat;
mask: var(--lf-icon) center / contain no-repeat;
}
.lf-option.is-selected .lf-option__icon { background-color: var(--lf-brand-strong); } .lf-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }
.lf-nav--result { margin-top: var(--space-m, 24px); flex-wrap: wrap; }
.lf-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 12px 22px; border-radius: var(--lf-radius); border: 1.5px solid transparent;
font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center;
}
.lf-btn--primary { background: var(--lf-brand); color: var(--lf-on-brand); }
.lf-btn--primary:hover { background: var(--lf-brand-strong); }
.lf-btn--ghost { background: transparent; color: var(--lf-muted); border-color: var(--lf-line); }
.lf-btn--ghost:hover { color: var(--lf-ink); border-color: var(--lf-muted); }
.lf-btn[disabled] { opacity: .45; cursor: not-allowed; }
.lf-btn[hidden] { display: none; } .lf-eyebrow { font-size: var(--text-s, 13px); letter-spacing: .06em; text-transform: uppercase; color: var(--lf-brand); font-weight: 600; }
.lf-result__h { font-family: var(--lf-heading-font); color: var(--lf-title); margin: 4px 0 8px; font-size: 1.6rem; line-height: 1.2; }
.lf-result__sub { margin: 0 0 20px; color: var(--lf-muted); }
.lf-block-h { font-size: var(--text-s, 13px); letter-spacing: .06em; text-transform: uppercase; margin: 20px 0 8px; }
.lf-block-h--primary { color: var(--lf-title); }
.lf-block-h--secondary { color: var(--lf-muted); } .lf-card {
display: flex; gap: 14px; align-items: flex-start;
padding: 14px 16px; margin-bottom: 10px;
border: 1px solid var(--lf-line); border-radius: var(--lf-radius);
background: var(--lf-surface); color: inherit; text-decoration: none;
transition: border-color .12s, box-shadow .12s;
}
.lf-card:hover { border-color: var(--lf-brand); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.lf-card--secondary { background: var(--lf-soft); }
.lf-card__body { display: flex; flex-direction: column; gap: 3px; }
.lf-card__name { font-weight: 700; color: var(--lf-title); }
.lf-card__desc { font-size: var(--text-s, 14px); color: var(--lf-muted); }
.lf-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; font-size: var(--text-s, 13px); color: var(--lf-muted); }
.lf-pill {
flex: none; align-self: flex-start;
padding: 4px 10px; border-radius: 999px;
background: var(--lf-brand); color: var(--lf-on-brand); font-size: 12px; font-weight: 700; white-space: nowrap;
} .lf-featured {
border: 1.5px solid var(--lf-accent); border-radius: var(--lf-radius);
background: var(--lf-accent-soft); padding: 14px 16px; margin-bottom: 22px;
}
.lf-featured__label {
font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
color: var(--lf-accent); font-weight: 700; margin-bottom: 8px;
}
.lf-featured__card { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: inherit; }
.lf-pill--featured { background: var(--lf-accent); color: var(--lf-on-accent); }
.lf-featured__note { margin-top: 6px; font-size: var(--text-s, 13px); color: var(--lf-muted); }
.lf-disclaimer { margin: 22px 0 0; font-size: 12px; color: var(--lf-muted); } @media (min-width: 520px) {
.lf-options { grid-template-columns: 1fr 1fr; }
} @media (min-width: 992px) {
.lizenz-finder { max-width: 860px; }
.lf-options[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
}