/* Erzeugt aus werkzeuge/bewertung.html durch
   werkzeug/bewertung_zerlegen.py - hier nichts von Hand aendern.
   Alle Selektoren haengen unter .bewertungs-tool, und die mit dem Theme
   gemeinsamen Klassennamen tragen das Praefix bw-. Ohne beides
   gestaltet das Werkzeug den Seitenkopf um - und das Theme den
   Werkzeug-Hero. */
.bewertungs-tool {
  
  --gruen:        #264233;
  --gruen-dunkel: #1B3025;
  --gruen-hell:   #3A5C48;
  --gold:         #C0A668;
  
  --gold-dunkel:  #7E6127;
  
  --gold-auf-dunkel:#C9B078;
  --creme:        #F6F3ED;
  --creme-tief:   #EDE8DE;
  --weiss:        #FFFFFF;

  --text:         #1F2A23;
  --text-leise:   #55645B;
  --text-auf-dunkel:#F6F3ED;
  --text-leise-dunkel:#C3CEC7;

  --linie:        #DFD9CC;
  --fehler:       #96231F;
  --fehler-grund: #FBF0EF;
  --fehler-linie: #E8C9C6;

  --schrift: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --zeilenhoehe-text: 1.65;
  --zeilenhoehe-titel: 1.18;

  --breite: 760px;
  --rand: 24px;

  --raum-xs: 8px;
  --raum-s:  16px;
  --raum-m:  28px;
  --raum-l:  48px;

  --radius:   4px;
  --radius-l: 8px;

  --schatten:      0 2px 12px rgba(31,42,35,.07);
  --schatten-hoch: 0 8px 28px rgba(31,42,35,.12);
  --uebergang: 180ms ease;
}
@media (max-width:600px) {
.bewertungs-tool { --rand:18px; --raum-l:36px; }
}
.bewertungs-tool, .bewertungs-tool *::before, .bewertungs-tool *::after { box-sizing:border-box; }
.bewertungs-tool { -webkit-text-size-adjust:100%; }
.bewertungs-tool [hidden] { display:none !important; }
.bewertungs-tool {
  margin:0;
  font-family:var(--schrift);
  font-size:17px;
  line-height:var(--zeilenhoehe-text);
  color:var(--text);
  background:var(--creme);
}
.bewertungs-tool h1, .bewertungs-tool h2 { margin:0 0 var(--raum-s); line-height:var(--zeilenhoehe-titel); font-weight:700; color:var(--gruen); }
.bewertungs-tool h1 { font-size:clamp(1.6rem, 5vw, 2.2rem); }
.bewertungs-tool h2 { font-size:1.25rem; }
.bewertungs-tool p { margin:0 0 var(--raum-s); }
.bewertungs-tool p:last-child { margin-bottom:0; }
.bewertungs-tool .huelle { max-width:var(--breite); margin:0 auto; padding:var(--raum-m) var(--rand) var(--raum-l); }
.bewertungs-tool .bw-kopf {
  text-align:center;
  margin:0 0 var(--raum-l);
  padding:clamp(42px,5.5vw,68px) var(--rand) clamp(36px,4.5vw,54px);
  position:relative; overflow:hidden;
  border-radius:var(--radius-l);
  box-shadow:var(--schatten);
  background:
    linear-gradient(to bottom,
      rgba(16, 23, 17, 0.55) 0%,
      rgba(16, 23, 17, 0.00) 42%,
      rgba(16, 23, 17, 0.35) 100%),
    var(--gruen-dunkel);
}
.bewertungs-tool .bw-kopf::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(to right,
    rgba(201,176,120,0) 0%, rgba(201,176,120,.55) 50%, rgba(201,176,120,0) 100%);
}
.bewertungs-tool .bw-kopf h1 { color:var(--text-auf-dunkel); }
.bewertungs-tool .bw-kopf .marke {
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  
  font-weight:700; color:var(--gold-auf-dunkel); margin-bottom:var(--raum-s);
}
.bewertungs-tool .bw-kopf .bw-vorspann { color:var(--text-leise-dunkel); max-width:34em; margin:0 auto; }
.bewertungs-tool .vertrauen {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--raum-xs) var(--raum-m);
  margin:var(--raum-m) 0 0; padding:0; list-style:none;
  font-size:.85rem; color:var(--text-leise-dunkel);
}
.bewertungs-tool .vertrauen li { display:flex; align-items:center; gap:7px; }
.bewertungs-tool .vertrauen svg { flex:none; width:15px; height:15px; color:var(--gold-auf-dunkel); }
.bewertungs-tool .bw-karte {
  background:var(--weiss);
  
  border:2px solid var(--linie);
  border-radius:var(--radius-l);
  box-shadow:var(--schatten);
  margin-top:var(--raum-l);
  overflow:hidden;
}
.bewertungs-tool .bw-karte-inhalt { padding:var(--raum-m) var(--rand); }
@media (min-width:600px) {
.bewertungs-tool .bw-karte-inhalt { padding:var(--raum-l); }
}
.bewertungs-tool .fortschritt { border-bottom:1px solid var(--linie); padding:var(--raum-s) var(--rand); background:var(--creme); }
.bewertungs-tool .fortschritt-zeile {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--raum-s); font-size:.8rem; color:var(--text-leise); margin-bottom:6px;
}
.bewertungs-tool .fortschritt-zeile strong { color:var(--gruen); font-weight:700; }
.bewertungs-tool .punkte {
  display:flex; align-items:center; gap:0;
  list-style:none; margin:10px 0 0; padding:0;
}
.bewertungs-tool .punkte li { display:flex; align-items:center; flex:1 1 0; min-width:0; }
.bewertungs-tool .punkte li:last-child { flex:0 0 auto; }
.bewertungs-tool .punkte i {
  flex:0 0 auto; width:9px; height:9px; border-radius:99px;
  background:var(--creme-tief); box-shadow:inset 0 0 0 1px var(--linie);
  transition:background var(--uebergang), box-shadow var(--uebergang), transform var(--uebergang);
}
.bewertungs-tool .punkte b { flex:1 1 auto; height:2px; background:var(--creme-tief); transition:background var(--uebergang); }
.bewertungs-tool .punkte li.erledigt i { background:var(--gold); box-shadow:none; }
.bewertungs-tool .punkte li.erledigt b { background:var(--gold); }
.bewertungs-tool .punkte li.jetzt i {
  background:var(--gruen); box-shadow:0 0 0 3px rgba(38,66,51,.16);
  transform:scale(1.35);
}
.bewertungs-tool .schritt { display:none; }
.bewertungs-tool .schritt.aktiv { display:block; }
.bewertungs-tool fieldset { border:0; margin:0; padding:0; }
.bewertungs-tool legend { padding:0; }
.bewertungs-tool .frage { font-size:1.2rem; font-weight:700; color:var(--gruen); margin-bottom:6px; line-height:var(--zeilenhoehe-titel); }
.bewertungs-tool .hilfe { font-size:.88rem; color:var(--text-leise); margin-bottom:var(--raum-m); line-height:1.55; }
.bewertungs-tool .freiwillig {
  display:inline-block; margin-left:.5em; padding:.15em .55em;
  font-size:.7rem; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; vertical-align:middle;
  color:var(--text-leise); border:1px solid currentColor; border-radius:99px;
}
.bewertungs-tool label { display:block; font-weight:600; font-size:.88rem; margin-bottom:6px; }
.bewertungs-tool label .leise { font-weight:400; color:var(--text-leise); }
.bewertungs-tool input[type=text], .bewertungs-tool input[type=email], .bewertungs-tool input[type=tel], .bewertungs-tool input[type=number] {
  width:100%; padding:13px 14px;
  font:inherit; font-size:1rem; color:var(--text);
  background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius);
  -webkit-appearance:none; appearance:none;
  transition:border-color var(--uebergang);
}
.bewertungs-tool input[type=text]:focus, .bewertungs-tool input[type=email]:focus, .bewertungs-tool input[type=tel]:focus, .bewertungs-tool input[type=number]:focus {
  border-color:var(--gruen-hell);
}
.bewertungs-tool input::placeholder { color:#6B7A73; }
.bewertungs-tool :focus-visible { outline:2px solid var(--gruen-hell); outline-offset:2px; }
.bewertungs-tool .auswahl input:focus-visible + span { outline:2px solid var(--gruen-hell); outline-offset:2px; }
.bewertungs-tool .auswahl-liste { display:flex; flex-wrap:wrap; gap:var(--raum-s); }
.bewertungs-tool .auswahl { flex:1 1 min(210px, 100%); display:block; margin:0; font-weight:400; cursor:pointer; }
.bewertungs-tool .auswahl input { position:absolute; opacity:0; width:0; height:0; }
.bewertungs-tool .auswahl span {
  display:flex; flex-direction:column; gap:2px; height:100%;
  padding:13px 15px; background:var(--weiss);
  border:1px solid var(--linie); border-radius:var(--radius);
  transition:border-color var(--uebergang), background var(--uebergang);
}
.bewertungs-tool .auswahl span b { font-weight:600; font-size:.97rem; color:var(--text); }
.bewertungs-tool .auswahl span small { font-size:.8rem; color:var(--text-leise); line-height:1.45; }
.bewertungs-tool .auswahl input:checked + span {
  border-color:var(--gold); background:var(--creme);
  box-shadow:inset 0 0 0 1px var(--gold);
}
@media (hover:hover) {
.bewertungs-tool .auswahl:hover span { border-color:var(--gruen-hell); }
}
.bewertungs-tool .auswahl-bild { gap:8px; }
.bewertungs-tool .auswahl-bild .auswahl { flex:1 1 min(104px, 100%); }
.bewertungs-tool .auswahl-bild .auswahl span { align-items:center; text-align:center; padding:14px 6px 12px; gap:3px; }
.bewertungs-tool .auswahl-bild .auswahl svg {
  width:40px; height:33px; margin-bottom:2px;
  color:var(--gruen-hell); transition:color var(--uebergang), transform var(--uebergang);
}
.bewertungs-tool .auswahl-bild .auswahl input:checked + span svg { color:var(--gold-dunkel); transform:translateY(-1px); }
.bewertungs-tool .auswahl-bild .auswahl span b { font-size:.82rem; letter-spacing:-.005em; line-height:1.25; }
.bewertungs-tool .auswahl-bild .auswahl span small { font-size:.7rem; line-height:1.35; }
@media (max-width:700px) {
.bewertungs-tool .auswahl-bild .auswahl { flex:1 1 min(138px, 100%); max-width:calc(50% - 4px); }
.bewertungs-tool .auswahl-bild .auswahl span b { font-size:.9rem; }
.bewertungs-tool .auswahl-bild .auswahl span small { font-size:.76rem; }
.bewertungs-tool .auswahl-bild .auswahl svg { width:46px; height:38px; }
}
.bewertungs-tool .stufen { display:flex; flex-wrap:wrap; gap:var(--raum-xs); margin-top:var(--raum-s); }
.bewertungs-tool .stufe {
  flex:1 1 min(130px, 100%); min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:14px 10px; background:var(--weiss);
  border:1px solid var(--linie); border-radius:var(--radius);
}
.bewertungs-tool .stufe svg { width:34px; height:28px; color:var(--linie); }
.bewertungs-tool .stufe .name { font-size:.76rem; color:var(--text-leise); letter-spacing:.02em; }
.bewertungs-tool .stufe .zahl { font-size:.98rem; font-weight:700; color:var(--gruen); }
.bewertungs-tool .stufe.gewaehlt { border-color:var(--gold); background:var(--creme); box-shadow:inset 0 0 0 1px var(--gold); }
.bewertungs-tool .stufe.gewaehlt svg { color:var(--gold); }
.bewertungs-tool .stufe.gewaehlt .name { color:var(--gold-dunkel); font-weight:600; }
.bewertungs-tool .stufen-hinweis { margin:var(--raum-xs) 0 0; font-size:.82rem; color:var(--text-leise); }
.bewertungs-tool .feld-paar { display:flex; flex-wrap:wrap; gap:var(--raum-s); }
.bewertungs-tool .feld-paar > div { flex:1 1 min(180px, 100%); }
.bewertungs-tool .einheit { position:relative; }
.bewertungs-tool .einheit input { padding-right:52px; }
.bewertungs-tool .einheit .zeichen {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:var(--text-leise); font-size:.95rem; pointer-events:none;
}
.bewertungs-tool .knopf-zeile { display:flex; flex-wrap:wrap; gap:var(--raum-s); margin-top:var(--raum-l); }
.bewertungs-tool .bw-knopf {
  flex:1 1 min(220px, 100%);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 24px;
  font:inherit; font-size:1rem; font-weight:600; text-align:center; text-decoration:none;
  border:1px solid transparent; border-radius:var(--radius);
  cursor:pointer; transition:background var(--uebergang), border-color var(--uebergang), color var(--uebergang);
}
.bewertungs-tool .knopf-haupt { background:var(--gruen); color:var(--text-auf-dunkel); }
.bewertungs-tool .knopf-haupt:hover { background:var(--gruen-dunkel); }
.bewertungs-tool .knopf-neben { flex:0 1 auto; background:transparent; color:var(--text-leise); border-color:var(--linie); }
.bewertungs-tool .knopf-neben:hover { border-color:var(--gruen-hell); color:var(--gruen); }
.bewertungs-tool .bw-knopf-gold { background:var(--gold-dunkel); color:var(--weiss); }
.bewertungs-tool .bw-knopf-gold:hover { background:#6A511F; }
.bewertungs-tool .bw-knopf[disabled] { opacity:.6; cursor:progress; }
.bewertungs-tool .fehler {
  display:none; margin-top:var(--raum-s); padding:11px 14px;
  font-size:.9rem; color:var(--fehler);
  background:var(--fehler-grund); border:1px solid var(--fehler-linie); border-radius:var(--radius);
}
.bewertungs-tool .fehler.sichtbar { display:block; }
.bewertungs-tool .tor-hinweis {
  display:flex; gap:12px; align-items:flex-start;
  padding:13px 15px; margin-bottom:var(--raum-m);
  background:var(--creme); border-radius:var(--radius);
  font-size:.9rem; color:var(--text-leise);
}
.bewertungs-tool .tor-hinweis svg { flex:none; width:18px; height:18px; margin-top:3px; color:var(--gold-dunkel); }
.bewertungs-tool .hinweis-entwurf {
  padding:13px 15px; margin-bottom:var(--raum-m);
  background:var(--creme); border-left:3px solid var(--gold);
  border-radius:var(--radius);
  font-size:.9rem; color:var(--text-leise); line-height:1.55;
}
.bewertungs-tool .hinweis-entwurf p { margin:0; }
.bewertungs-tool .verweis-knopf {
  background:none; border:0;
  
  padding:5px 3px; margin:-5px -3px;
  font:inherit; color:var(--gruen); text-decoration:underline;
  cursor:pointer;
}
@media (hover:hover) {
.bewertungs-tool .verweis-knopf:hover { color:var(--gold-dunkel); }
}
.bewertungs-tool .werteliste { margin:0 0 var(--raum-m); padding:0; list-style:none; font-size:.9rem; }
.bewertungs-tool .werteliste li {
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--raum-s);
  padding:9px 0; border-bottom:1px solid var(--linie);
}
.bewertungs-tool .werteliste li:last-child { border-bottom:0; }
.bewertungs-tool .werteliste .schluessel { color:var(--text-leise); }
.bewertungs-tool .werteliste .wert { font-weight:600; text-align:right; margin-left:auto; }
.bewertungs-tool .einwilligung {
  display:flex; gap:11px; align-items:flex-start; margin-top:var(--raum-m);
  font-weight:400; font-size:.85rem; color:var(--text-leise); line-height:1.5;
}
.bewertungs-tool .einwilligung input { flex:none; width:19px; height:19px; margin:2px 0 0; accent-color:var(--gruen); }
.bewertungs-tool .einwilligung a { color:var(--gruen); }
.bewertungs-tool .bw-honigtopf { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.bewertungs-tool .ergebnis-kopf { text-align:center; padding-bottom:var(--raum-m); border-bottom:1px solid var(--linie); }
.bewertungs-tool .ergebnis-kopf .ort {
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--gold-dunkel);
}
.bewertungs-tool .spanne {
  font-size:clamp(1.5rem, 6.5vw, 2.3rem); font-weight:700; color:var(--gruen);
  margin:10px 0 4px; line-height:1.15;
  overflow-wrap:anywhere; 
}
.bewertungs-tool .mittelwert { font-size:.9rem; color:var(--text-leise); }
.bewertungs-tool .spannenbalken { margin-top:var(--raum-m); }
.bewertungs-tool .spannenbalken .strecke { position:relative; height:7px; background:var(--creme-tief); border-radius:99px; }
.bewertungs-tool .spannenbalken .strecke i { position:absolute; inset:0 12%; background:var(--gold); border-radius:99px; }
.bewertungs-tool .spannenbalken .beschriftung { display:flex; justify-content:space-between; gap:var(--raum-s); font-size:.78rem; color:var(--text-leise); margin-top:7px; }
.bewertungs-tool .hinweiskasten {
  margin-top:var(--raum-m); padding:14px 16px;
  background:var(--creme); border-left:3px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:.86rem; color:var(--text-leise); line-height:1.6;
}
.bewertungs-tool .hinweiskasten strong { color:var(--text); }
.bewertungs-tool .hinweis-link { display:inline-block; margin-top:var(--raum-s); color:var(--text);
  font-weight:600; text-decoration:underline; text-decoration-color:var(--gold);
  text-underline-offset:3px; text-decoration-thickness:2px; }
.bewertungs-tool .cta { margin-top:var(--raum-l); padding:var(--raum-m); background:var(--gruen); border-radius:var(--radius-l); }
.bewertungs-tool .cta h2 { color:var(--text-auf-dunkel); }
.bewertungs-tool .cta p { color:var(--text-leise-dunkel); font-size:.95rem; }
.bewertungs-tool .cta-punkte { margin:var(--raum-s) 0 0; padding:0; list-style:none; font-size:.9rem; color:var(--text-leise-dunkel); }
.bewertungs-tool .cta-punkte li { display:flex; align-items:flex-start; gap:10px; padding:5px 0; }
.bewertungs-tool .cta-punkte svg { flex:none; width:16px; height:16px; margin-top:4px; color:var(--gold-auf-dunkel); }
.bewertungs-tool .cta .knopf-neben { color:var(--text-auf-dunkel); border-color:rgba(246,243,237,.35); }
.bewertungs-tool .cta .knopf-neben:hover { color:var(--gruen); background:var(--creme); border-color:var(--creme); }
.bewertungs-tool .person {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--raum-s) var(--raum-m);
  margin-top:var(--raum-m); padding:var(--raum-m) var(--rand);
  background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius-l);
}
.bewertungs-tool .person .kreis {
  flex:none; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--creme); color:var(--gruen); font-weight:700; font-size:1.1rem;
}
.bewertungs-tool .person .text { flex:1 1 min(240px, 100%); font-size:.9rem; color:var(--text-leise); line-height:1.6; }
.bewertungs-tool .person .text strong { display:block; color:var(--text); font-size:1rem; }
.bewertungs-tool .bw-fuss { margin-top:var(--raum-l); text-align:center; font-size:.8rem; color:var(--text-leise); }
.bewertungs-tool .bw-fuss a { color:var(--text-leise); }
.bewertungs-tool .bw-fuss p { margin-bottom:6px; }
@media (max-width:359px) {
.bewertungs-tool { font-size:16px; }
.bewertungs-tool .frage { font-size:1.08rem; }
}