/* Kesru · Stimmenfinder (Opus, 27.09.2026). Eigenständig: gilt auf Startseite, Einrichtung und Konto.
   Frage → Auswahl → drei Stimmen. Keine Modelle, keine IDs. */

.stimmenfinder {
  --sf-nacht: #0B1220; --sf-nacht-text: #A9B3C7; --sf-signal: #3DDC84; --sf-tief: #15803D;
  --sf-flaeche: #FFFFFF; --sf-flaeche-2: #F8F9FB; --sf-linie: #E3E6EB; --sf-linie-2: #CDD2DA; --sf-text: #3D4658; --sf-leise: #5F6878;
  --sf-ein: cubic-bezier(.16,1,.3,1);
  --sf-feder: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.2%, 1);
  display: grid; gap: 26px; font-family: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--sf-nacht);
}
.stimmenfinder .sf-frage { display: grid; gap: 12px; margin: 0; }
.stimmenfinder .sf-frage p { margin: 0; font-weight: 680; font-size: 17px; line-height: 1.35; letter-spacing: -.01em; }
.stimmenfinder .sf-frage p b { font-weight: 700; }

/* Auswahl */
.stimmenfinder .sf-optionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stimmenfinder .sf-optionen:has(> [data-sf-g]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 760px) { .stimmenfinder .sf-optionen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stimmenfinder .sf-option { position: relative; min-height: 56px; padding: 14px 16px; border-radius: 16px; cursor: pointer; text-align: left;
  background: var(--sf-flaeche); border: 1px solid var(--sf-linie-2); color: var(--sf-nacht); font-weight: 650; font-size: 15.5px; line-height: 1.25;
  transition: border-color .2s, box-shadow .3s var(--sf-ein), transform .5s var(--sf-feder), background-color .2s, color .2s; }
.stimmenfinder .sf-option:hover { border-color: #AEB5C1; transform: translateY(-2px); }
.stimmenfinder .sf-option:active { transform: scale(.97); }
.stimmenfinder .sf-option:focus-visible { outline: 2px solid var(--sf-tief); outline-offset: 3px; }
.stimmenfinder .sf-option[aria-pressed="true"] { background: var(--sf-nacht); border-color: var(--sf-nacht); color: #fff; box-shadow: 0 12px 26px -16px rgba(11,18,32,.8); }
.stimmenfinder .sf-option[aria-pressed="true"]::after { content: ""; position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sf-signal); box-shadow: 0 0 0 4px rgba(61,220,132,.22); animation: sf-landen .6s var(--sf-feder); }
.stimmenfinder .sf-geschlecht { display: flex; align-items: center; gap: 9px; }
.stimmenfinder .sf-geschlecht svg { flex: none; width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; opacity: .82; }
@keyframes sf-landen { from { transform: scale(0); } }

/* Stand */
.stimmenfinder .sf-stand { justify-self: start; margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--sf-flaeche-2); border: 1px solid var(--sf-linie);
  font-weight: 500; font-size: 14.5px; line-height: 1.3; color: var(--sf-text); }
.stimmenfinder .sf-stand b { color: var(--sf-nacht); font-weight: 700; }

/* Ergebnis: drei Karten */
.stimmenfinder .sf-ergebnis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.stimmenfinder .sf-karte { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 18px 18px 16px;
  border-radius: 18px; background: var(--sf-flaeche); border: 1px solid var(--sf-linie); box-shadow: 0 1px 2px rgba(11,18,32,.05), 0 14px 34px -22px rgba(11,18,32,.25);
  animation: sf-karte .7s var(--sf-ein) backwards; transition: border-color .2s, box-shadow .3s var(--sf-ein), transform .5s var(--sf-feder); }
.stimmenfinder .sf-karte:nth-child(2) { animation-delay: 70ms; } .stimmenfinder .sf-karte:nth-child(3) { animation-delay: 140ms; }
.stimmenfinder .sf-karte:nth-child(n+4) { animation-delay: 200ms; }
@keyframes sf-karte { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.stimmenfinder .sf-karte:hover { transform: translateY(-3px); }
.stimmenfinder .sf-karte .sf-name { grid-column: 1; font-weight: 720; font-size: 24px; line-height: 1.1; letter-spacing: -.025em; color: var(--sf-nacht); }
.stimmenfinder .sf-karte .sf-beschreibung { grid-column: 1; font-weight: 450; font-size: 14.5px; line-height: 1.4; color: var(--sf-leise); }
.stimmenfinder .sf-karte .sf-play.knopf.hell { grid-column: 2; grid-row: 1 / span 2; }
.stimmenfinder .sf-karte .sf-nehmen.knopf.hell { grid-column: 1 / -1; margin-top: 10px; }
.stimmenfinder .sf-karte.gewaehlt { border-color: var(--sf-nacht); box-shadow: 0 0 0 4px rgba(61,220,132,.35), 0 14px 34px -22px rgba(11,18,32,.3); }

/* Abspielen: runder Knopf mit Play bzw. Pegel */
.stimmenfinder .sf-play.knopf.hell { position: relative; width: 52px; min-height: 52px; height: 52px; padding: 0; border-radius: 50%; border: 0; font-size: 0; color: transparent;
  background: var(--sf-nacht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%233DDC84'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 10px 22px -12px rgba(11,18,32,.7); cursor: pointer; transition: transform .45s var(--sf-feder), box-shadow .3s; }
.stimmenfinder .sf-play.knopf.hell:hover { transform: scale(1.06); }
.stimmenfinder .sf-play.knopf.hell:active { transform: scale(.94); }
.stimmenfinder .sf-play.knopf.hell:focus-visible { outline: 2px solid var(--sf-tief); outline-offset: 3px; }
.stimmenfinder .sf-play.knopf.hell.spielt { box-shadow: 0 0 0 6px rgba(61,220,132,.22), 0 10px 22px -12px rgba(11,18,32,.7);
  background: var(--sf-nacht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233DDC84'%3E%3Crect x='7' y='6' width='3' height='12' rx='1'/%3E%3Crect x='14' y='6' width='3' height='12' rx='1'/%3E%3C/svg%3E") center / 22px no-repeat; }
.stimmenfinder .sf-play.knopf.hell.pausiert { box-shadow: 0 0 0 2px rgba(61,220,132,.3); }

/* Nehmen bzw. Ausgewählt */
.stimmenfinder .sf-nehmen.knopf.hell { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--sf-linie-2); background: var(--sf-flaeche); color: var(--sf-nacht);
  font-weight: 650; font-size: 14.5px; line-height: 1; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s, transform .45s var(--sf-feder); }
.stimmenfinder .sf-nehmen.knopf.hell:hover { border-color: var(--sf-nacht); }
.stimmenfinder .sf-nehmen.knopf.hell:active { transform: scale(.97); }
.stimmenfinder .sf-nehmen.knopf.hell[disabled] { opacity: 1; cursor: default; background: #E3F7EA; border-color: transparent; color: var(--sf-tief); }

/* Mehr und Hinweis */
.stimmenfinder .sf-mehr.knopf.hell { justify-self: start; min-height: 0; padding: 6px 0; border: 0; background: none; color: var(--sf-nacht);
  font-weight: 650; font-size: 15px; line-height: 1.3; text-decoration: underline; text-decoration-color: var(--sf-linie-2); text-underline-offset: 4px; cursor: pointer; }
.stimmenfinder .sf-mehr.knopf.hell:hover { text-decoration-color: currentColor; background: none; }
.stimmenfinder .sf-hinweis { margin: -8px 0 0; font-size: 13.5px; color: var(--sf-leise); }

@media (prefers-reduced-motion: reduce) {
  .stimmenfinder .sf-karte, .stimmenfinder .sf-option[aria-pressed="true"]::after { animation: none; }
  .stimmenfinder .sf-option, .stimmenfinder .sf-karte, .stimmenfinder .sf-play.knopf.hell, .stimmenfinder .sf-nehmen.knopf.hell { transition: none; }
  .stimmenfinder .sf-play.knopf.hell.spielt { background: var(--sf-nacht)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233DDC84'%3E%3Crect x='7' y='6' width='3' height='12' rx='1'/%3E%3Crect x='14' y='6' width='3' height='12' rx='1'/%3E%3C/svg%3E") center / 22px no-repeat; }
}

/* Startseite: Abstand zum Einleitungstext */
#voices .stimmenfinder { margin-top: 32px; }

/* „Diese Stimme nehmen“: jede Variante (haupt/hell) über die volle Kartenbreite, sauber gepolstert */
.stimmenfinder .sf-karte .sf-nehmen.knopf { grid-column: 1 / -1; justify-self: stretch; width: 100%; min-height: 46px; margin-top: 10px; padding: 0 18px;
  border-radius: 999px; white-space: nowrap; font-weight: 650; font-size: 15px; line-height: 1; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .45s var(--sf-feder); }
.stimmenfinder .sf-karte .sf-nehmen.knopf.haupt { background: var(--sf-nacht); border: 1px solid var(--sf-nacht); color: #fff; }
.stimmenfinder .sf-karte .sf-nehmen.knopf.haupt:hover { background: #1B2538; }
.stimmenfinder .sf-karte .sf-nehmen.knopf:active { transform: scale(.97); }
.stimmenfinder .sf-karte .sf-nehmen.knopf[disabled] { opacity: 1; cursor: default; background: #E3F7EA; border-color: transparent; color: var(--sf-tief); }