/* Gefuehrter Ablauf: nur Tokens aus tokens.css, keine runden Ecken. */
.fn { max-width: 720px; margin: 0 auto; padding: var(--gap) 16px; }
.fn .segs { display: flex; gap: 4px; margin-bottom: 32px; }
.fn .seg { flex: 1; height: 6px; background: var(--rule); }
.fn .seg.on { background: var(--accent); }
.fn .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fn .chipbtn { min-height: var(--target); padding: 0 16px; font: inherit; color: var(--ink); background: transparent; border: var(--line-w) solid var(--ink); border-radius: var(--radius); cursor: pointer; }
.fn .chipbtn:hover { background: var(--ink); color: var(--paper); }
.fn .chipbtn:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.fn .fld { margin-bottom: 16px; }
.fn .fld label { display: block; margin-bottom: 6px; }
.fn .fld textarea, .fn .fld input { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: transparent; border: var(--line-w) solid var(--ink); border-radius: var(--radius); padding: 12px; }
.fn .fld input { min-height: var(--target); }
.fn .fld textarea:focus-visible, .fn .fld input:focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: 2px; }
.fn .fn-weg { border: var(--line-w) solid var(--ink); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.fn .fn-weg h2 { margin-top: 0; }
.fn p.consent { display: block; }
.fn .consent, .fn .fn-ki { font-size: .875rem; }
.fn .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.fn1 { max-width: 960px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; align-items: start; }
.fn1 > :not(.fn-chips):not(.fn-text) { grid-column: 1 / -1; }
@media (max-width: 720px) { .fn1 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .fn { padding: 24px 16px; } }