/* Themewerk Verwaltung: Schiebe-Puzzle */
.twf-captcha { margin: 0; }
.twf-captcha [hidden] { display: none !important; }
.twf-captcha__box { display: grid; gap: 0.5rem; max-width: 320px; }
.twf-captcha__label { margin: 0; font-size: 0.9em; font-weight: 600; }
.twf-captcha__stage { position: relative; width: 100%; aspect-ratio: 320 / 150; overflow: hidden; border-radius: var(--twf-captcha-radius, 6px); background: #5b6470; touch-action: none; user-select: none; }
.twf-captcha__bg { display: block; width: 100%; height: 100%; }
.twf-captcha__piece { position: absolute; left: 0; display: block; height: auto; pointer-events: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
/* So genau, weil die Feld-Regeln des Themes sonst Innenabstand und Rahmen setzen: Der Regler säße nicht mehr bündig unter dem Bild. */
.tw-form .twf-captcha input.twf-captcha__slider[type="range"] { width: 100%; height: 2rem; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; cursor: grab; accent-color: var(--twf-captcha-accent, var(--wp--preset--color--accent, #3858e9)); touch-action: pan-y; }
.tw-form .twf-captcha input.twf-captcha__slider[type="range"]:active { cursor: grabbing; }
.tw-form .twf-captcha input.twf-captcha__slider[type="range"]:disabled { cursor: default; opacity: 0.6; }
.twf-captcha__msg { min-height: 1.3em; margin: 0; font-size: 0.875em; }
.twf-captcha__tools { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; font-size: 0.875em; }
.twf-captcha__link { padding: 0.25em 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.twf-captcha__box.is-solved .twf-captcha__msg { color: #14532d; font-weight: 600; }
.twf-captcha__none { margin: 0; font-size: 0.9em; }
.tw-form__status--captcha, .tw-form__status--blocked { background: #fdecec; color: #7f1d1d; }
