/* Bewertungsseite (rate.html, de/bewerten.html).
   Liegt neben sfbe4fb8d40.css und holen.css; Farben kommen aus deren
   Variablen. Eigene Variablen nur fuer Sterne und Knopftext. Kein style=-Attribut,
   kein <style>-Block (CSP: style-src 'self'). */

:root{--stern:#f0b740;--auf-akzent:#0d1117}
:root[data-theme="light"]{--stern:#a65f00;--auf-akzent:#ffffff}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){--stern:#a65f00;--auf-akzent:#ffffff}
}

/* author-display ueberschreibt das hidden-Attribut sonst */
[hidden]{display:none !important}

.bewerten-form{display:grid;gap:18px;max-width:640px;margin-top:18px}
.bewerten-form fieldset{border:0;padding:0;margin:0;min-width:0}
.bewerten-form legend{font-size:15px;font-weight:600;color:var(--text);padding:0;margin-bottom:6px}
.bewerten-form label.feld{display:block;font-size:13px;color:var(--sub);margin-bottom:6px}
.bewerten-form .opt{color:var(--faint)}

/* Sterne: Radios in Lesereihenfolge 1..5, damit die Pfeiltasten richtig laufen.
   Ausgefuellt wird per :has() alles bis zum gewaehlten Stern. */
.sterne{display:flex;flex-wrap:nowrap;gap:2px}
.sterne input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.sterne label{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:48px;font-size:36px;line-height:1;cursor:pointer;
  color:var(--faint);user-select:none;-webkit-user-select:none}
.sterne label::before{content:"\2606"}
.sterne input:checked + label::before,
.sterne label:has(~ input:checked)::before,
.sterne label:hover::before,
.sterne label:has(~ label:hover)::before{content:"\2605";color:var(--stern)}
.sterne input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
.stern-text{min-height:1.6em;margin-top:2px;font-size:14px;color:var(--sub)}

.zeile2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.eingabe{background:var(--panel);border:1px solid var(--border);border-radius:8px;
  padding:12px 14px;color:var(--text);font:inherit;font-size:15px;width:100%;box-sizing:border-box}
textarea.eingabe{resize:vertical;min-height:120px}
.eingabe:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.fall{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.knopf{justify-self:start;display:inline-block;padding:12px 22px;border-radius:10px;
  border:1px solid var(--accent);background:var(--accent);color:var(--auf-akzent);
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:transform .15s ease,opacity .15s ease}
.knopf:hover{opacity:.9;transform:translateY(-1px);text-decoration:none}
.knopf:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.knopf.zweit{background:transparent;color:var(--accent)}
@media (prefers-reduced-motion: reduce){.knopf{transition:none}.knopf:hover{transform:none}}

.meldung{margin:18px 0;padding:12px 16px;border:1px solid var(--border);border-radius:8px;
  font-size:14px;color:var(--sub);max-width:640px}
.meldung.ok{border-color:#2f8a5f}
.meldung.fehler{border-color:#c0504d}
.klein-hinweis{font-size:13px;color:var(--faint);max-width:640px}

.danke{background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:22px 24px;margin:24px 0;max-width:640px}
.danke h2{margin-top:0}

.store-karte{background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:22px 24px;margin:32px 0 8px;max-width:640px}
.store-karte h2{margin:0 0 8px;font-size:18px}
.store-karte p{margin:0 0 14px}
.store-knoepfe{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:560px){
  .zeile2{grid-template-columns:1fr}
  .sterne label{min-width:48px}
  .danke,.store-karte{padding:18px 16px}
}