/* Bewertung schreiben (2026-10-12): Seite /bewerten (privat/seiten/bewerten.php) – Bestellung prüfen, Sterne + Text je Artikel,
   Name, Einwilligung, Danke-Seite mit freiwilligem Google-Knopf. Eigene Datei, im Inhalt der Textseite eingebunden. Aufbau wie
   sonderanfrage.css; Farben aus farben.css (--wt-…) und shop.css/stil-*.css (--ink, --line, --muted …). Mobil zuerst.
   Sterne: Auswahlknöpfe (Radio) mit Sternen als Beschriftung – gefüllt bis zum gewählten Stern (:has), ohne :has nur der gewählte. */

.bw-einleitung { font-size: 17px; }

/* ---------- So geht's ---------- */
.rechtstext .bw-ablauf { list-style: none; display: grid; gap: 8px; margin: 18px 0 26px; padding: 0; counter-reset: bw; }
.rechtstext .bw-ablauf li {
  position: relative; margin: 0; padding: 12px 14px 12px 54px; border-radius: 14px; background: var(--wt-holz-l, #f2e4d9);
  line-height: 1.45; counter-increment: bw;
}
.bw-ablauf li::before {
  content: counter(bw); position: absolute; left: 14px; top: 12px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--wt-holz, #a8734e); color: #fff; font: 800 14px/28px var(--titel); text-align: center;
}
.bw-ablauf b { display: block; font: 700 15px/1.3 var(--titel); color: var(--ink); }
.bw-ablauf span { font-size: 14.5px; color: var(--ink-2); }
@media (min-width: 760px) { .rechtstext .bw-ablauf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Formular ---------- */
.bw-form { margin: 8px 0 24px; }
@media (min-width: 641px) {
  .bw-form { padding: 4px 28px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--papier, #fff); }
}
.rechtstext .bw-schritt { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 28px 0 14px; font-size: 19px; }
.bw-schritt > span[aria-hidden] {
  flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--wt-akzent); color: #fff; font: 800 15px/1 var(--titel);
}
.bw-feld { display: grid; gap: 6px; min-width: 0; margin: 0 0 18px; }
.bw-feld > label { font: 700 15px/1.35 var(--titel); color: var(--ink); }
.bw-frei { font: 400 14px/1.35 "Open Sans", system-ui, sans-serif; color: var(--muted); }
.rechtstext .bw-hilfe { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.bw-feld input[type="text"], .bw-feld input[type="email"], .bw-feld textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--wt-linie-2, #c8d0d5); border-radius: 12px;
  background: #fff; color: var(--ink); font: 16px/1.4 "Open Sans", system-ui, sans-serif;   /* 16 px: kein Zoom beim Antippen (iOS) */
}
.bw-feld textarea { min-height: 112px; resize: vertical; }
.bw-feld input:focus, .bw-feld textarea:focus {
  border-color: var(--wt-akzent); outline: 3px solid color-mix(in srgb, var(--wt-akzent) 25%, transparent); outline-offset: 0;
}
.bw-ungueltig input[type="text"], .bw-ungueltig input[type="email"], .bw-ungueltig textarea { border-color: var(--wt-fehler, #a83a2a); }
.rechtstext .bw-fehler-text { margin: 0; font-size: 14px; font-weight: 600; color: var(--wt-fehler, #a83a2a); }
.bw-fehler-text::before { content: "! "; }
.bw-reihe { display: grid; gap: 0 16px; }
@media (min-width: 641px) { .bw-reihe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- je Artikel: Sterne und Text ---------- */
.bw-artikel { min-width: 0; margin: 0 0 16px; padding: 14px 16px 2px; border: 1px solid var(--line); border-top: 4px solid var(--wt-holz, #a8734e);
  border-radius: 16px; background: var(--wt-karte, #fff); }
.bw-artikel:nth-of-type(even) { border-top-color: var(--wt-akzent, #4f6b80); }
.bw-artikel.bw-ungueltig { border-color: var(--wt-fehler, #a83a2a); }
.bw-artikel legend { float: left; width: 100%; margin: 0 0 2px; padding: 0; }   /* float: Titel innen statt auf dem Rahmen */
.bw-artikel legend + * { clear: both; }
.bw-a-name { display: block; font: 700 16px/1.35 var(--titel); color: var(--ink); overflow-wrap: anywhere; }
.bw-a-status { display: block; margin-top: 3px; font-size: 13.5px; color: var(--wt-akzent-d, #3d5668); }
.bw-sterne-wahl { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 6px 0 8px; }
.bw-sterne-wahl input { position: absolute; left: 12px; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; }
.bw-sterne-wahl label {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; cursor: pointer;
  color: var(--wt-linie-2, #c8d0d5); font-size: 36px; line-height: 1; transition: color .12s, transform .12s, background-color .12s;
}
.bw-sterne-wahl label::before { content: '★'; }
.bw-sterne-wahl label:hover { transform: scale(1.12); background: var(--wt-holz-l, #f2e4d9); }
.bw-sterne-wahl input:checked + label { color: #d18a2e; }
.bw-sterne-wahl:has(input[value="2"]:checked) label:nth-of-type(-n+2),
.bw-sterne-wahl:has(input[value="3"]:checked) label:nth-of-type(-n+3),
.bw-sterne-wahl:has(input[value="4"]:checked) label:nth-of-type(-n+4),
.bw-sterne-wahl:has(input[value="5"]:checked) label:nth-of-type(-n+5) { color: #d18a2e; }
.bw-sterne-wahl input:focus-visible + label { outline: 3px solid color-mix(in srgb, var(--wt-akzent) 45%, transparent); outline-offset: 1px; }
.bw-wort { margin-left: 8px; font: 700 15px/1.3 var(--titel); color: var(--wt-holz-dd, #7a5135); }
.bw-keine { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 10px; font-size: 14px; color: var(--muted); cursor: pointer; }
.bw-keine input { width: 18px; height: 18px; margin: 0; accent-color: var(--wt-akzent); }
.bw-artikel .bw-feld { margin-bottom: 14px; }

/* ---------- Einwilligung, Absenden ---------- */
.bw-einwilligung { margin: 6px 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--wt-akzent-xl, #eef2f5); }
.bw-einwilligung.bw-ungueltig { border-color: var(--wt-fehler, #a83a2a); background: var(--wt-fehler-bg, #fbeae5); }
.bw-haken { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.bw-haken input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--wt-akzent); }
.bw-senden { width: 100%; margin-top: 8px; font-size: 16px; }
@media (min-width: 641px) { .bw-senden { width: auto; min-width: 280px; } }
.rechtstext .bw-klein { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
/* Feld nur für Programme – für Menschen unsichtbar, auch für Vorleseprogramme */
.bw-honig { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.rechtstext .bw-bestellung { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 6px; color: var(--muted); font-size: 15px; }
.bw-bestellung strong { color: var(--ink); }
.bw-geprueft-marke { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; background: #e8f5ec; color: #173b26;
  font: 700 13px/1.3 var(--titel); }
.bw-geprueft-marke svg { color: var(--wt-gut, #2f7a3a); }

.bw-fehlerbox {
  margin: 20px 0; padding: 14px 18px; border-left: 4px solid var(--wt-fehler, #a83a2a); border-radius: 12px;
  background: var(--wt-fehler-bg, #fbeae5); color: #5f1410;
}
.rechtstext .bw-fehlerbox p { margin: 0 0 6px; }
.rechtstext .bw-fehlerbox p:last-child { margin: 0; }
.rechtstext .bw-fehlerbox ul { margin: 6px 0 0; }
.rechtstext .bw-fehlerbox a { color: #5f1410; font-weight: 600; }

/* ---------- Danke ---------- */
.bw-ok { margin: 0 0 18px; padding: 16px 20px; border-left: 4px solid var(--wt-gut, #2f7a3a); border-radius: 12px; background: #e8f5ec; color: #173b26; }
.rechtstext .bw-ok p { margin: 0; }
.rechtstext .bw-ok-titel { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font: 800 19px/1.3 var(--titel); color: #173b26; }
.bw-ok-titel svg { flex: none; color: var(--wt-gut, #2f7a3a); }
.bw-google-box { margin: 22px 0; padding: 16px 20px; border: 1px solid var(--line); border-top: 4px solid var(--wt-akzent, #4f6b80); border-radius: 16px;
  background: var(--wt-karte, #fff); }
.rechtstext .bw-google-box p { margin: 0 0 10px; }
.rechtstext .bw-google-box p:last-child { margin: 0; }
.rechtstext .bw-google-titel { font: 700 17px/1.35 var(--titel); color: var(--ink); }
.rechtstext .bw-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) { .rechtstext .bw-knoepfe .btn, .bw-google-box .btn { width: 100%; } }