/* Gratis-Tools (Übersicht und Tool-Seiten) – Teil für site.css, helles Design.
   Ergänzt die Klassen aus site.css, Abschnitt „Gratis-Tools“. Hell und Dunkel über Tokens. */

/* ---------- Übersicht ---------- */
.free-promise { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; list-style: none; margin: 0 0 var(--s-6); padding: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; color: var(--ink-2); }
.free-promise li { display: inline-flex; align-items: center; gap: .45rem; }
.free-promise svg { width: 16px; height: 16px; color: var(--ins); flex: none; }
.free-hub { padding-top: 0; }
.free-grid { list-style: none; margin: 0; padding: 0; }
.free-grid > li { display: grid; min-width: 0; }
.free-sheet .free-tile { position: relative; grid-template-rows: auto 1fr auto; padding: 1.4rem 1.3rem 1.2rem; }
.free-sheet .free-tile .ti { grid-row: span 2; }
.free-no { position: absolute; top: .9rem; right: 1rem; font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.free-open { grid-column: 2; display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem; font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.free-open svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease-out); }
.free-tile:hover .free-open { color: var(--accent-ink); }
.free-tile:hover .free-open svg { transform: translateX(3px); }
.free-tile:focus-visible { outline: none; box-shadow: var(--focus); }
.free-tile b, .free-tile small { min-width: 0; overflow-wrap: anywhere; }
.free-tile b { padding-right: 1.8rem; }

/* ---------- Werkzeug ---------- */
.free-tool { padding-top: 0; }
.free-app { position: relative; }
.free-app::before { content: ""; position: absolute; top: -1px; left: clamp(1.1rem, .8rem + 1.4vw, 2rem); width: 56px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.free-app .inputs, .free-app .result { min-width: 0; }
.free-app .result { transition: opacity var(--t) var(--ease-out); }
.free-app.busy .result-big b { opacity: .55; }
.free-app.stale .result-big b, .free-app.stale .result-list b { opacity: .45; }
.free-app .result-big b { transition: opacity var(--t-fast); overflow-wrap: anywhere; }
.free-app .result-big small { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.free-app .result-list b { text-align: right; white-space: normal; overflow-wrap: anywhere; }
.free-app .result-list span { min-width: 0; color: var(--ink-2); }
.free-app .result-list [hidden] { display: none; }
.free-app .input.num { font-variant-numeric: tabular-nums; }
.free-app .input[aria-invalid="true"] { border-color: var(--del); }
.free-app .input-suffix > i:empty { display: none; }
.free-dd { display: block; }
.free-dd .dd-btn { width: 100%; }
.free-dd .dd-btn [data-dd-label] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.free-dd .dd-list { max-width: min(100%, 92vw); }
.free-dd .dd-list [role="option"] { white-space: normal; line-height: 1.3; padding-block: .55rem; }
.free-app .seg { justify-self: start; }
.free-app .seg:not(.free-swatches):not(.qr-ico) { flex-wrap: wrap; border-radius: 24px; }
.free-app .seg:not(.free-swatches):not(.qr-ico) button { padding: 0 14px; }
.free-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.free-pair[hidden], .free-group[hidden], .free-vat[hidden] { display: none; }
.free-group { display: grid; gap: 1.1rem; }
.free-group.free-pair { gap: 1.1rem 1rem; }
.free-switch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: .2rem 0; border-top: 1px dashed var(--rule); }
.free-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.free-duo .result-big b { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.free-err { margin: 0; padding: .65rem .85rem; border-radius: 12px; background: color-mix(in srgb, var(--del) 10%, transparent); border: 1px solid color-mix(in srgb, var(--del) 35%, transparent); }
.free-flag { display: flex; gap: .55rem; align-items: flex-start; margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.free-flag svg { width: 20px; height: 20px; flex: none; color: var(--ins); margin-top: .05rem; }
.free-flag.warn svg { color: var(--accent-ink); }
.free-flag[hidden] { display: none; }
.free-flag b { font-variant-numeric: tabular-nums; }
.free-notes { margin: 0; padding: 0 0 0 1.1rem; display: grid; gap: .35rem; font-size: var(--fs-sm); color: var(--ink-3); }
.free-notes[hidden] { display: none; }
.free-dl .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.free-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.free-meta .chip svg { width: 14px; height: 14px; }
.free-meta .chip[hidden] { display: none; }
.free-meta .chip { white-space: normal; }
.free-empty { color: var(--ink-2); font-size: var(--fs-sm); text-align: center; max-width: 30ch; }

/* volle Breite unter Eingaben und Ergebnis (Cover-Plan) */
.free-wide { grid-column: 1 / -1; display: grid; gap: 1rem; min-width: 0; padding-top: clamp(1rem, .6rem + 1.5vw, 1.75rem); border-top: 1px dashed var(--rule); }

/* Buchrücken maßstäblich */
.spine-figure { margin: 0; padding: .4rem 0 0; border-top: 1px dashed var(--rule); }
.spine-figure svg { display: block; width: 100%; max-width: 320px; height: auto; margin-inline: auto; }
.spine-figure .sp-page { fill: var(--sheet-2); stroke: var(--rule-strong); stroke-width: 1; }
.spine-figure .sp-body { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.2; }
.spine-figure .sp-text { fill: none; stroke: var(--accent); stroke-width: .8; stroke-dasharray: 3 2; }
.spine-figure .sp-dim { fill: var(--ink); stroke: var(--ink); stroke-width: 1; }

/* Cover-Plan */
.cover-plan { margin: 0; display: grid; gap: .6rem; }
.cover-svg { max-width: 900px; width: 100%; margin-inline: auto; }
.cover-svg svg { display: block; width: 100%; height: auto; }
.cover-plan .cp-bleed { fill: color-mix(in srgb, var(--accent) 22%, var(--sheet)); }
.cover-plan .cp-page { fill: var(--sheet-2); }
.cover-plan .cp-spine { fill: var(--marker-soft); }
.cover-plan .cp-bar { fill: var(--sheet-2); stroke: var(--ink); stroke-width: .015; stroke-dasharray: .06 .04; }
.cover-plan .cp-cut { stroke: var(--accent); stroke-width: .015; }
.cover-plan .cp-fold { stroke: var(--ink-3); stroke-width: .012; stroke-dasharray: .05 .05; }
.cover-plan .cp-txt { fill: var(--ink-2); font-family: var(--font-text); font-weight: 600; }
.cover-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); color: var(--ink-2); }
.cover-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.cover-legend i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--rule-strong); flex: none; }
.cover-legend .lg-1 { background: color-mix(in srgb, var(--accent) 22%, var(--sheet)); }
.cover-legend .lg-2, .cover-legend .lg-4 { background: var(--sheet-2); }
.cover-legend .lg-3 { background: var(--marker-soft); }
.cover-legend .lg-5 { background: var(--sheet-2); border-style: dashed; border-color: var(--ink); }

/* Codes bleiben auf Weiß, auch im Dunkelmodus (Scanner brauchen hellen Grund) */
.barcode-out, .qr-out { background: #fff; color: var(--ink); border-radius: 12px; padding: 1rem; display: grid; place-items: center; border: 1px solid var(--rule); min-height: 200px; }
.barcode-out svg { width: 100%; max-width: 320px; height: auto; }
.qr-out svg { width: 100%; max-width: 260px; height: auto; }
.qr-out.transparent { background: repeating-conic-gradient(#ececec 0% 25%, #fff 0% 50%) 50% / 16px 16px; }
.free-swatches button { padding: 0 .7rem; }
.free-swatches i { display: block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--sheet-2); box-shadow: 0 0 0 1px var(--rule-strong); }
.free-swatches button[aria-checked="true"] i { box-shadow: 0 0 0 2px var(--accent); }
.free-swatches button[hidden] { display: none; }
.free-swatches button.sw-locked { position: relative; cursor: not-allowed; opacity: .4; }
.free-swatches button.sw-locked:hover { background: transparent; }
.free-swatches button.sw-locked::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 2px; margin: -1px 0 0 -13px; border-radius: 2px; background: var(--ink); transform: rotate(-45deg); }
.free-swatches button.sw-locked i { filter: saturate(.5) brightness(.85); }
.qr-sw-note { margin-top: 6px; }

/* ---------- ISBN-Barcode: Vorlagen, Farbe (nur Tokens, Hex nur als Fallback) ---------- */
.barcode-out.transparent { background: repeating-conic-gradient(#ececec 0% 25%, #fff 0% 50%) 50% / 16px 16px; }
.barcode-out.transparent svg { max-width: 340px; }
.bc-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2, .5rem); }
.bc-preset { display: grid; gap: .15rem; text-align: start; min-height: 56px; padding: .6rem .8rem; border-radius: var(--radius-sm, 8px); border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); font: inherit; cursor: pointer; transition: border-color var(--t-fast, .16s), box-shadow var(--t-fast, .16s), background-color var(--t-fast, .16s); }
.bc-preset b { font-size: var(--fs-sm); font-weight: 650; }
.bc-preset small { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.3; }
.bc-preset:hover { border-color: var(--rule-strong); }
.bc-preset[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--sheet)); box-shadow: 0 0 0 1px var(--accent); }
.bc-preset:focus-visible { outline: none; box-shadow: var(--focus); }
.bc-color { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2, .5rem); }
.bc-hex .input { width: 9.5rem; font-variant-numeric: tabular-nums; }

/* ---------- Erklärung, Quelle ---------- */
.free-explain .split { align-items: start; }
.free-how { counter-reset: fh; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.free-how li { counter-increment: fh; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .5rem; padding: .95rem 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.free-how li::before { content: counter(fh, decimal-leading-zero); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent-ink); padding-top: .2rem; }
.free-source { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-3); }
.free-source svg { width: 18px; height: 18px; flex: none; margin-top: .1rem; }
.free-source b { color: var(--ink-2); }
.free-steps b { display: block; color: var(--ink); font-weight: 600; margin-bottom: .15rem; }
.free-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.free-facts li { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem .95rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet); color: var(--ink-2); }
.free-facts svg { width: 18px; height: 18px; flex: none; margin-top: .15rem; color: var(--accent-ink); }
.free-list .free-tile { height: 100%; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 560px) {
  .free-pair, .free-group.free-pair { grid-template-columns: minmax(0, 1fr); }
  .free-duo { grid-template-columns: minmax(0, 1fr); }
  .free-app .seg { justify-self: stretch; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-radius: 16px; overflow: visible; }
  .free-app .seg:not(.free-swatches):not(.qr-ico) { display: flex; flex-wrap: wrap; }
  .free-app .seg:not(.free-swatches):not(.qr-ico) button { flex: 1 1 auto; }
  .free-app .seg button { white-space: normal; line-height: 1.15; min-height: 40px; padding: .35rem .45rem; border-radius: 12px; }
  .free-app .free-swatches { justify-self: start; grid-auto-columns: auto; }
  .free-dl .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .free-app .result, .free-app .result-big b, .free-open svg { transition: none; }
}
.barcode-out.is-stale > svg { opacity: .3; filter: grayscale(1); transition: opacity .2s; }

/* ==========================================================================
   QR-Designs (Abschnitt free_key == qr): Vorlagen, Farbbaustein, Formen mit Mini-Icons,
   Logo-Upload, Rahmen, Scan-Ampel. Nur Tokens; Weiß bleibt nur der Grund der Code-Vorschau.
   ========================================================================== */
.qr-presets { grid-column: 1 / -1; display: grid; gap: var(--s-3); min-width: 0; }
.qr-preset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: var(--s-3); min-width: 0; }
.qr-preset { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--s-3); row-gap: .15rem; align-items: start; text-align: left; min-width: 0; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet-2); color: var(--ink); font: inherit; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast); }
.qr-preset:hover { border-color: var(--rule-strong); }
.qr-preset:focus-visible { outline: none; box-shadow: var(--focus); }
.qr-preset[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, var(--sheet-2)); }
.qr-preset-ico { grid-row: span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius-sm); background: var(--paper-2); color: var(--ink-2); }
.qr-preset[aria-checked="true"] .qr-preset-ico { background: var(--accent); color: var(--on-accent); }
.qr-preset-ico .qr-ico-svg { width: 22px; height: 22px; }
.qr-preset b { font-size: var(--fs-sm); line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.qr-preset small { font-size: var(--fs-xs); line-height: 1.35; color: var(--ink-3); overflow-wrap: break-word; hyphens: auto; }

.qr-step { display: block; padding-top: var(--s-3); border-top: 1px dashed var(--rule); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; color: var(--accent-ink); }
.qr-inputs > .qr-step:first-child, .qr-presets > .qr-step { border-top: 0; padding-top: 0; }

/* Farbbaustein: Farbfelder plus Hex-Feld (kein nativer Farbwähler) */
.qr-color[hidden], .free-app .field[hidden] { display: none; }
.qr-color-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-width: 0; }
.free-app .qr-sw { justify-self: auto; flex: 0 1 auto; }
.qr-sw .qr-sw-none { background: repeating-conic-gradient(var(--rule) 0% 25%, var(--sheet-2) 0% 50%) 50% / 8px 8px; }
.qr-hex { position: relative; flex: 0 0 8.6rem; }
.qr-hex .input { padding-left: 2.4rem; text-transform: lowercase; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.qr-hex i { position: absolute; left: .75rem; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--rule-strong); pointer-events: none; }

/* Segmente mit Mini-Vorschau: Raster statt Zeile, damit 360 px nicht überlaufen */
.free-app .seg.qr-ico { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.6rem, 1fr)); grid-auto-flow: row; justify-self: stretch; width: 100%; border-radius: var(--radius); overflow: visible; }
.free-app .seg.qr-ico button { min-width: 0; hyphens: auto; overflow-wrap: break-word; display: grid; justify-items: center; align-content: center; gap: .25rem; min-height: 60px; padding: .45rem .3rem; border-radius: calc(var(--radius) - 4px); white-space: normal; line-height: 1.15; font-size: var(--fs-xs); text-align: center; }
.qr-ico-svg { width: 24px; height: 24px; flex: none; }
.seg.qr-ico button[aria-checked="true"] .qr-ico-svg { color: var(--accent-ink); }
.free-app .qr-eyes { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.free-app .qr-wrap-seg .seg { flex-wrap: wrap; overflow: visible; border-radius: var(--radius); }
.qr-fonts .qr-f-sans { font-family: var(--font-text); }
.qr-fonts .qr-f-serif { font-family: var(--font-display); }
.qr-fonts .qr-f-mono { font-variant-numeric: tabular-nums; }

/* Logo-Upload */
.qr-upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.qr-upload .btn .qr-ico-svg { width: 20px; height: 20px; }
.qr-upload input[type="file"]:focus-visible + label { box-shadow: var(--focus); }
.qr-thumb { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; max-width: 100%; }
.qr-thumb[hidden] { display: none; }
.qr-thumb img { width: 40px; height: 40px; object-fit: contain; border-radius: var(--radius-sm); background: var(--sheet-2); box-shadow: 0 0 0 1px var(--rule); }
.qr-thumb small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: var(--fs-xs); }
.qr-hint { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }
.qr-hint svg { width: 16px; height: 16px; flex: none; margin-top: .1rem; }
.qr-hint[hidden] { display: none; }
.qr-hint.warn { color: var(--accent-ink); font-weight: 600; }
.qr-count { justify-self: end; font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Vorschau und Scan-Ampel */
.free-app .qr-out { aspect-ratio: auto; max-width: none; min-height: 240px; box-shadow: none; }
.free-app .qr-out svg { width: 100%; max-width: 280px; height: auto; transition: opacity var(--t-fast), filter var(--t-fast); }
.free-app.busy .qr-out svg { opacity: .8; }
.qr-out.locked svg, .free-app.stale .qr-out svg { opacity: .3; filter: grayscale(1); }
.qr-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-radius: var(--radius); border: 1px solid var(--rule); background: var(--sheet-2); }
.qr-check > div { display: grid; gap: .1rem; min-width: 0; }
.qr-check b { font-size: var(--fs-sm); color: var(--ink); }
.qr-check span:not(.qr-lamp) { font-size: var(--fs-xs); color: var(--ink-2); overflow-wrap: anywhere; }
.qr-lamp { display: grid; gap: 4px; padding: 5px; border-radius: var(--pill); background: var(--band); box-shadow: inset 0 0 0 1px var(--band-rule); }
.qr-lamp i { display: block; width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--band-ink) 22%, transparent); transition: background-color var(--t-fast), box-shadow var(--t-fast); }
.qr-check[data-qr-check="ok"] { border-color: color-mix(in srgb, var(--ins) 45%, var(--rule)); background: var(--ins-soft); }
.qr-check[data-qr-check="ok"] [data-l="ok"] { background: var(--ins); box-shadow: 0 0 6px var(--ins); }
.qr-check[data-qr-check="warn"] { border-color: color-mix(in srgb, var(--marker) 70%, var(--rule)); background: color-mix(in srgb, var(--marker-soft) 45%, var(--sheet-2)); }
.qr-check[data-qr-check="warn"] [data-l="warn"] { background: var(--marker); box-shadow: 0 0 6px var(--marker); }
.qr-check[data-qr-check="fail"] { border-color: color-mix(in srgb, var(--del) 45%, var(--rule)); background: color-mix(in srgb, var(--del) 10%, var(--sheet-2)); }
.qr-check[data-qr-check="fail"] [data-l="fail"] { background: var(--del); box-shadow: 0 0 6px var(--del); }
.qr-check.busy .qr-lamp i { animation: qr-blink 1s var(--ease-in-out) infinite; }
@keyframes qr-blink { 50% { opacity: .45; } }
.qr-warnings { margin: 0; padding: 0 0 0 1.1rem; display: grid; gap: .35rem; font-size: var(--fs-sm); color: var(--ink-2); }
.qr-warnings[hidden] { display: none; }
.free-meta .chip.chip-accent { color: var(--accent-ink); }

@media (min-width: 900px) {
  .qr-result { position: sticky; top: var(--s-6); align-self: start; }
}
@media (max-width: 560px) {
  .qr-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .qr-preset { grid-template-columns: minmax(0, 1fr); padding: var(--s-3); }
  .qr-preset-ico { grid-row: auto; width: 2rem; height: 2rem; }
  .qr-preset small { display: none; }
  .free-app .seg.qr-ico { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .free-app .seg.qr-ico.qr-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .free-app .qr-wrap-seg .seg { display: flex; }
  .free-app .qr-wrap-seg .seg button { flex: 1 1 auto; }
  .free-app .qr-sw { justify-self: auto; display: inline-flex; }
  .qr-hex { flex: 1 1 8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .qr-check.busy .qr-lamp i { animation: none; }
  .qr-preset, .qr-out svg, .qr-lamp i { transition: none; }
}
/* ---------- Ende QR-Designs ---------- */

/* ---------- Ratgeber zum Werkzeug ---------- */
.ratgeber { max-width: 68ch; color: var(--ink); font-size: var(--fs-base); line-height: var(--lh-text); }
.ratgeber > * + * { margin-top: 1rem; }
.ratgeber :where(p, li, h2, h3) { overflow-wrap: anywhere; }
.ratgeber h2 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 740; line-height: 1.15; letter-spacing: -.012em; text-wrap: balance; }
.ratgeber h3 { margin-top: 2rem; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; line-height: 1.25; letter-spacing: 0; text-wrap: balance; }
.ratgeber ul { padding-left: 1.3em; display: grid; gap: .45rem; }
.ratgeber li::marker { color: var(--accent); }
.ratgeber a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
.ratgeber a:hover { color: var(--accent-hover); }
.ratgeber .tbl-wrap { margin-top: 1.1rem; -webkit-overflow-scrolling: touch; }
.ratgeber .tbl { min-width: 32rem; }
.ratgeber .tbl th[scope="row"] { color: var(--ink); font-size: var(--fs-sm); background: transparent; white-space: normal; }
.ratgeber .ratgeber-note { margin-top: .6rem; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }