.dd { --sfx-dd-bg: var(--sfx-dd-bg--set, var(--neutral-ultra-light, #fff));
--sfx-dd-color: var(--sfx-dd-color--set, inherit);
--sfx-dd-transition-duration: var(--sfx-dd-transition-duration--set, .3s);
--sfx-dd-transition-easing: var(--sfx-dd-transition-easing--set, ease);
--sfx-dd-hover-transition-duration: var(--sfx-dd-hover-transition-duration--set, .15s); --sfx-dd-link-color: var(--sfx-dd-link-color--set, inherit);
--sfx-dd-link-color-hover: var(--sfx-dd-link-color-hover--set, var(--accent, #e11d48));
--sfx-dd-link-color-current: var(--sfx-dd-link-color-current--set, var(--accent, #e11d48));
--sfx-dd-link-bg-hover: var(--sfx-dd-link-bg-hover--set, transparent);
--sfx-dd-font-family: var(--sfx-dd-font-family--set, inherit);
--sfx-dd-font-size: var(--sfx-dd-font-size--set, inherit);
--sfx-dd-font-weight: var(--sfx-dd-font-weight--set, inherit);
--sfx-dd-letter-spacing: var(--sfx-dd-letter-spacing--set, normal);
--sfx-dd-text-transform: var(--sfx-dd-text-transform--set, none);
--sfx-dd-line-height: var(--sfx-dd-line-height--set, 1.3);
--sfx-dd-item-gap: var(--sfx-dd-item-gap--set, var(--space-s, .75rem));
--sfx-dd-pad-item-block: var(--sfx-dd-pad-item-block--set, var(--space-xs, .25rem));
--sfx-dd-pad-item-inline: var(--sfx-dd-pad-item-inline--set, var(--space-l, 1.25rem));
--sfx-dd-pad-label-block: var(--sfx-dd-pad-label-block--set, 0);
--sfx-dd-pad-label-inline: var(--sfx-dd-pad-label-inline--set, 0);
--sfx-dd-item-border-width: var(--sfx-dd-item-border-width--set, 1px);
--sfx-dd-item-border-color: var(--sfx-dd-item-border-color--set, var(--neutral-light, #e5e5e5)); --sfx-dd-main-color: var(--sfx-dd-main-color--set, var(--sfx-dd-link-color));
--sfx-dd-main-font-size: var(--sfx-dd-main-font-size--set, var(--sfx-dd-font-size));
--sfx-dd-main-font-weight: var(--sfx-dd-main-font-weight--set, var(--sfx-dd-font-weight));
--sfx-dd-main-link-color-hover: var(--sfx-dd-link-color-hover);
--sfx-dd-sub-color: var(--sfx-dd-sub-color--set, var(--sfx-dd-link-color));
--sfx-dd-sub-font-size: var(--sfx-dd-sub-font-size--set, var(--sfx-dd-font-size));
--sfx-dd-sub-font-weight: var(--sfx-dd-sub-font-weight--set, var(--sfx-dd-font-weight));
--sfx-dd-sub-link-color-hover: var(--sfx-dd-link-color-hover); --sfx-dd-chevron: var(--sfx-dd-chevron--set, currentColor);
--sfx-dd-chevron-size: var(--sfx-dd-chevron-size--set, .5rem);
--sfx-dd-chevron-thickness: var(--sfx-dd-chevron-thickness--set, 2px); --sfx-dd-back-bg: var(--sfx-dd-back-bg--set, var(--neutral-ultra-light, #f6f6f6));
--sfx-dd-back-color: var(--sfx-dd-back-color--set, inherit);
--sfx-dd-back-font-weight: var(--sfx-dd-back-font-weight--set, 600);
--sfx-dd-chevron-back: var(--sfx-dd-chevron-back--set, var(--accent, #e11d48));
--sfx-dd-pad-back-block: var(--sfx-dd-pad-back-block--set, var(--space-s, 1.25rem));
--sfx-dd-pad-back-inline: var(--sfx-dd-pad-back-inline--set, var(--space-l, 2.5rem));
--sfx-dd-back-border-color: var(--sfx-dd-back-border-color--set, var(--neutral-light, #e5e5e5));
--sfx-dd-back-color-hover: var(--sfx-dd-back-color-hover--set, var(--sfx-dd-link-color-hover)); --sfx-dd-overview-color: var(--sfx-dd-overview-color--set, inherit);
--sfx-dd-overview-font-weight: var(--sfx-dd-overview-font-weight--set, 600); flex: 1 1 auto;
min-inline-size: 0;
min-block-size: 0;
inline-size: 100%;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
background: var(--sfx-dd-bg);
color: var(--sfx-dd-color);
font-size: var(--sfx-dd-font-size);
} .dd__panel {
display: flex;
flex-direction: column;
min-block-size: 0;
background: var(--sfx-dd-bg);
}
.dd__panel--root {
position: relative;
flex: 1 1 auto;
min-block-size: 0; overflow: hidden auto;
}
.dd__panel:not(.dd__panel--root) {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden auto;
visibility: hidden; transform: translateX(100%);
transition:
transform var(--sfx-dd-transition-duration) var(--sfx-dd-transition-easing),
visibility var(--sfx-dd-transition-duration) var(--sfx-dd-transition-easing);
}
.dd__panel.is-open {
visibility: visible;
transform: translateX(0);
}
.dd__list {
list-style: none;
margin: 0;
padding: 0;
}
.dd__item + .dd__item {
border-block-start: var(--sfx-dd-item-border-width) solid var(--sfx-dd-item-border-color);
} .dd__link,
.dd__toggle {
display: flex;
align-items: center;
gap: var(--sfx-dd-item-gap);
padding-block: var(--sfx-dd-pad-item-block);
padding-inline: var(--sfx-dd-pad-item-inline);
color: var(--sfx-dd-link-color);
text-decoration: none;
cursor: pointer;
}
.dd__toggle {
justify-content: space-between;
}
.dd__link,
.dd__toggle,
.dd__back {
transition:
color var(--sfx-dd-hover-transition-duration) var(--sfx-dd-transition-easing),
background-color var(--sfx-dd-hover-transition-duration) var(--sfx-dd-transition-easing);
} .dd__label {
font-family: var(--sfx-dd-font-family);
font-size: var(--sfx-dd-font-size);
font-weight: var(--sfx-dd-font-weight);
letter-spacing: var(--sfx-dd-letter-spacing);
text-transform: var(--sfx-dd-text-transform);
line-height: var(--sfx-dd-line-height);
padding-block: var(--sfx-dd-pad-label-block);
padding-inline: var(--sfx-dd-pad-label-inline);
} .dd__panel--root > .dd__list > .dd__item > .dd__link,
.dd__panel--root > .dd__list > .dd__item > .dd__toggle {
--sfx-dd-link-color: var(--sfx-dd-main-color);
--sfx-dd-font-size: var(--sfx-dd-main-font-size);
--sfx-dd-font-weight: var(--sfx-dd-main-font-weight);
--sfx-dd-link-color-hover: var(--sfx-dd-main-link-color-hover);
}
.dd__panel:not(.dd__panel--root) .dd__item > .dd__link,
.dd__panel:not(.dd__panel--root) .dd__item > .dd__toggle {
--sfx-dd-link-color: var(--sfx-dd-sub-color);
--sfx-dd-font-size: var(--sfx-dd-sub-font-size);
--sfx-dd-font-weight: var(--sfx-dd-sub-font-weight);
--sfx-dd-link-color-hover: var(--sfx-dd-sub-link-color-hover);
}
.dd__link:hover,
.dd__link:focus-visible,
.dd__toggle:hover,
.dd__toggle:focus-visible {
color: var(--sfx-dd-link-color-hover);
background: var(--sfx-dd-link-bg-hover);
}
.dd__item--overview .dd__link {
color: var(--sfx-dd-overview-color);
}
.dd__item--overview .dd__label {
font-weight: var(--sfx-dd-overview-font-weight);
} .dd__item.current-menu-item > .dd__link,
.dd__item.current-menu-item > .dd__toggle,
.dd__item.current-menu-parent > .dd__toggle,
.dd__item.current-menu-ancestor > .dd__toggle {
color: var(--sfx-dd-link-color-current);
}
.dd__item.current-menu-item > .dd__link {
font-weight: 700;
} .dd__chevron {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--sfx-dd-chevron);
font-size: var(--sfx-dd-chevron-size);
}
.dd__chevron svg,
.dd__chevron img {
inline-size: 1em;
block-size: 1em;
} .dd__chevron:not(.dd__chevron--back):empty::after {
content: "";
inline-size: var(--sfx-dd-chevron-size);
block-size: var(--sfx-dd-chevron-size);
border-block-start: var(--sfx-dd-chevron-thickness) solid currentColor;
border-inline-end: var(--sfx-dd-chevron-thickness) solid currentColor;
transform: rotate(45deg);
} .dd__back {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding-block: var(--sfx-dd-pad-back-block);
padding-inline: var(--sfx-dd-pad-back-inline);
background: var(--sfx-dd-back-bg);
color: var(--sfx-dd-back-color);
border-block-end: var(--sfx-dd-item-border-width) solid var(--sfx-dd-back-border-color);
font-weight: var(--sfx-dd-back-font-weight);
cursor: pointer;
}
.dd__back:hover,
.dd__back:focus-visible {
color: var(--sfx-dd-back-color-hover);
} .dd__chevron--back {
position: absolute;
inset-block-start: 50%;
inset-inline-start: var(--space-l, 1.25rem);
translate: 0 -50%;
color: var(--sfx-dd-chevron-back);
}
.dd__chevron--back:empty::after {
content: "";
inline-size: var(--sfx-dd-chevron-size);
block-size: var(--sfx-dd-chevron-size);
border-block-start: var(--sfx-dd-chevron-thickness) solid currentColor;
border-inline-end: var(--sfx-dd-chevron-thickness) solid currentColor;
rotate: -135deg;
}
@media (prefers-reduced-motion: reduce) {
.dd__panel:not(.dd__panel--root),
.dd__link,
.dd__toggle,
.dd__back {
transition: none;
}
}.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); }
}