.tssd-survey__title { margin: 0 0 .2em; }
.tssd-survey__intro { margin: 0 0 1em; color: #555; }

.tssd-survey__form { counter-reset: tssd-step; }
.tssd-survey__q { position: relative; margin: 0 0 1.1em; padding: 0 0 .9em 40px; border: 0;
    border-bottom: 1px solid #f0ead6; counter-increment: tssd-step; }
.tssd-survey__q--contact { border-bottom: 0; }
.tssd-survey__q::before { content: counter(tssd-step); position: absolute; left: 0; top: 0;
    width: 26px; height: 26px; border-radius: 50%; background: var(--sd-gold); color: var(--sd-gold-ink);
    font-weight: 800; font-size: .82rem; line-height: 26px; text-align: center; }
.tssd-survey__q legend { font-weight: 600; margin-bottom: .35em; padding: 0; }
.tssd-survey__req { color: var(--sd-warn); }

/* Honeypot — hidden from humans, present for bots. */
.tssd-survey__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Star rating — same left→right fill scheme as the daily-sudoku level stars: the
   radios are absolutely positioned (so they are NOT flex items) and the visible labels
   are laid out row-reverse, which makes „input:checked ~ label" / „label:hover ~ label"
   light up the star and everything to its LEFT. Picking the 4th star fills stars 1–4. */
.tssd-survey__stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; font-size: 2.4rem; line-height: 1; }
.tssd-survey__stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.tssd-survey__stars label { color: #d7d2c4; cursor: pointer; transition: color .1s; font-size: inherit; margin: 0; }
.tssd-survey__stars input:checked ~ label,
.tssd-survey__stars label:hover,
.tssd-survey__stars label:hover ~ label { color: var(--sd-gold); }
.tssd-survey__stars input:focus-visible + label { outline: 2px solid #1b6ef3; outline-offset: 2px; }

/* NPS 0..10 chips — the native radio is hidden; the number chip itself is the control and
   lights up gold when picked (Mockup V2, no stray radio dots next to the numbers). */
.tssd-survey__nps { display: flex; flex-wrap: wrap; gap: 6px; }
.tssd-survey__nps input { position: absolute; opacity: 0; width: 0; height: 0; }
.tssd-survey__nps label { border: 1px solid var(--sd-line); border-radius: var(--sd-radius); padding: 4px 10px; cursor: pointer;
    font-weight: 400; min-width: 1.6em; text-align: center; margin: 0; }
.tssd-survey__nps label:hover { background: #fff8e1; }
.tssd-survey__nps label:has(input:checked) { background: var(--sd-gold); border-color: var(--sd-gold-line); color: var(--sd-gold-ink); font-weight: 700; }
.tssd-survey__nps label:has(input:focus-visible) { outline: 2px solid #1b6ef3; outline-offset: 2px; }

/* Multi-choice checkboxes — answer OPTIONS stay in normal weight so they read lighter
   than the (600) question legend. This is the explicit fix for „alles fett, Frage nicht
   von Antwort trennbar": only the question is emphasised, never the options (Mockup V2). */
.tssd-survey__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 16px; }
.tssd-survey__choice { display: flex; align-items: baseline; gap: 6px; font-weight: 400; margin: 0; }

.tssd-survey__other { margin: .5em 0 0; }
.tssd-survey__other label { font-weight: 400; display: block; margin-bottom: .2em; color: #555; font-size: .92em; }
.tssd-survey__other input[type="text"] { width: 100%; box-sizing: border-box; }

.tssd-survey__form textarea { width: 100%; }
/* Only the free-text field labels (Wunsch / Kritik / „Was sollen wir verbessern?") carry
   the question weight; the option labels above are set to normal weight separately. */
.tssd-survey__q > label { font-weight: 600; display: block; margin-bottom: .2em; }
.tssd-survey__q--contact label { font-weight: 400; display: block; }
.tssd-survey__submit { margin-top: 1em; }
.tssd-survey__privacy { font-size: var(--sd-fs-sm); color: var(--sd-muted); margin-top: .5em; }

.tssd-survey__q--contact input[type="email"][aria-required="true"] { border-color: #c9a227; }
.tssd-survey__field--invalid input[type="email"] { border-color: var(--sd-warn); outline: 1px solid var(--sd-warn); }
.tssd-survey__field-error { display: block; color: var(--sd-warn); font-size: var(--sd-fs-sm); font-weight: 600; margin-top: .25em; }

.tssd-survey__thanks { background: var(--sd-ok-bg); border: 1px solid var(--sd-ok-line); border-radius: var(--sd-radius); padding: 14px 16px; }
.tssd-survey__error { background: var(--sd-warn-bg); border: 1px solid var(--sd-warn-line); border-radius: var(--sd-radius); padding: 10px 14px; margin-bottom: 1em; }

.tssd-surveys__list { list-style: none; margin: 0; padding: 0; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tssd-surveys__item { display: flex; flex-direction: column; margin: 0; }
.tssd-surveys__title { margin: 0 0 .3em; }
.tssd-surveys__intro { margin: 0 0 .5em; }
.tssd-surveys__meta { margin: 0 0 .8em; font-size: var(--sd-fs-sm); color: var(--sd-muted); }
.tssd-surveys__cta { margin-top: auto; align-self: flex-start; }
.tssd-surveys__back { margin-top: 1.2em; }

.tssd-survey-teaser { width: 160px; box-sizing: border-box; text-align: center;
    border: 1px solid var(--sd-line); border-radius: var(--sd-radius); background: var(--sd-surface-2); padding: 12px 10px; }
.tssd-survey-teaser__icon { font-size: 1.8rem; line-height: 1; }
.tssd-survey-teaser__head { font-weight: 800; margin: 4px 0 2px; }
.tssd-survey-teaser__text { font-size: .82rem; color: #5a4a00; margin: 0 0 8px; }

.tssd-survey-teaser__cta { width: 100%; }

html[data-theme="dark"] .tssd-survey__intro,
html[data-theme="dark"] .tssd-survey__privacy { color: #b6ab90; }
html[data-theme="dark"] .tssd-survey__q { border-bottom-color: #3a3324; } /* V2 hairline on dark */
html[data-theme="dark"] .tssd-survey__other label { color: #b6ab90; }
html[data-theme="dark"] .tssd-survey__nps label { border-color: #3a3324; }
html[data-theme="dark"] .tssd-survey__nps label:hover { background: #2a2418; }
html[data-theme="dark"] .tssd-survey-teaser { background: #211d16; border-color: #3a3324; }
html[data-theme="dark"] .tssd-survey-teaser__text { color: #d8c89a; }
html[data-theme="dark"] .tssd-survey__thanks { background: #16241b; border-color: #2f6b3f; }
html[data-theme="dark"] .tssd-survey__error { background: #2a1618; border-color: #7a3b3b; }