/* Voith Bewertungs-Aufsteller: Werkzeug im Stil der Website (CI: docs/ci-voith-marketing.md). #vb-tool davor, damit der
   Knopf- und Feldstil des Website-Kits nicht greift. */
#vb-tool { --vb-navy: #08182B; --vb-feld: #16263B; --vb-orange: #ED7029; --vb-orange-hell: #FF8A47; --vb-text: #F5F7FB; --vb-leise: rgba(245, 247, 251, 0.68); --vb-linie: rgba(255, 255, 255, 0.12); --vb-dunkel: #0B0C10;
  font-family: Poppins, sans-serif; color: var(--vb-text); }
#vb-tool *, #vb-tool *::before, #vb-tool *::after { box-sizing: border-box; }
#vb-tool [hidden] { display: none !important; }
#vb-tool .vb-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
#vb-tool .vb-schritt + .vb-schritt { margin-top: 26px; }
#vb-tool .vb-schritt-kopf { display: flex; align-items: center; gap: 10px; font: 700 16px/1.3 Montserrat, sans-serif; margin-bottom: 12px; }
#vb-tool .vb-nr { width: 28px; height: 28px; border-radius: 50%; background: var(--vb-orange); color: var(--vb-dunkel); display: grid; place-items: center; font: 800 13px Montserrat, sans-serif; flex: none; }
#vb-tool .vb-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--vb-leise); margin: 12px 0 6px; }
#vb-tool input[type="text"], #vb-tool input[type="url"] { width: 100%; background: var(--vb-feld); border: 1px solid var(--vb-linie); border-radius: 8px; color: var(--vb-text); font: 400 16px/1.4 Poppins, sans-serif; padding: 12px 14px; margin: 0; box-shadow: none; }
#vb-tool input[type="text"]:focus, #vb-tool input[type="url"]:focus { outline: none; border-color: var(--vb-orange); box-shadow: 0 0 0 3px rgba(237, 112, 41, 0.2); }
#vb-tool input::placeholder { color: rgba(245, 247, 251, 0.45); }
#vb-tool .vb-liste { margin-top: 6px; background: #122136; border: 1px solid var(--vb-linie); border-radius: 8px; overflow: hidden; }
#vb-tool .vb-treffer { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--vb-linie); border-radius: 0; padding: 10px 14px; color: var(--vb-text); cursor: pointer; text-transform: none; letter-spacing: 0; box-shadow: none; }
#vb-tool .vb-treffer:hover, #vb-tool .vb-treffer:focus { background: rgba(237, 112, 41, 0.12); outline: none; }
#vb-tool .vb-treffer b { display: block; font: 600 14px/1.35 Poppins, sans-serif; }
#vb-tool .vb-treffer span, #vb-tool .vb-keine { font-size: 13px; color: var(--vb-leise); }
#vb-tool .vb-keine { padding: 10px 14px; }
/* Hinweis auf Google laut Vorgaben der Places API: Wortlaut unverändert, serifenlos, 400, 12px, weiß. */
#vb-tool .vb-quelle { padding: 6px 14px 8px; text-align: right; font: 400 12px/1.2 Roboto, Arial, sans-serif; color: #FFFFFF; }
#vb-tool .vb-meldung { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--vb-orange); background: rgba(237, 112, 41, 0.1); border-radius: 6px; font-size: 14px; }
#vb-tool .vb-gewaehlt { margin-top: 10px; padding: 12px 14px; border: 1px solid rgba(237, 112, 41, 0.45); background: rgba(237, 112, 41, 0.08); border-radius: 8px; font-size: 14px; }
#vb-tool .vb-gewaehlt b { display: block; font-weight: 600; margin-bottom: 2px; }
#vb-tool .vb-gewaehlt b::before { content: "\2713  "; color: var(--vb-orange); }
#vb-tool .vb-gewaehlt a, #vb-tool .vb-textknopf { color: var(--vb-orange); text-decoration: underline; text-underline-offset: 3px; }
#vb-tool .vb-textknopf { display: inline-block; max-width: 100%; margin-top: 10px; background: none; border: 0; padding: 0; font: 400 14px/1.5 Poppins, sans-serif; text-align: left; white-space: normal; cursor: pointer; text-transform: none; letter-spacing: 0; box-shadow: none; }
#vb-tool .vb-textknopf:hover, #vb-tool .vb-gewaehlt a:hover { color: var(--vb-orange-hell); background: none; }
#vb-tool .vb-hilfe { font-size: 13px; color: var(--vb-leise); margin: 8px 0 0; line-height: 1.5; }
#vb-tool .vb-vorlagen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
#vb-tool .vb-vorlage, #vb-tool .vb-stil { text-transform: none; letter-spacing: 0; color: var(--vb-text); font-family: Poppins, sans-serif; }
#vb-tool .vb-vorlage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px 10px; border: 1px solid var(--vb-linie); border-radius: 10px; background: #0d1d31; cursor: pointer; text-align: center; }
#vb-tool .vb-vorlage input, #vb-tool .vb-stil input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#vb-tool .vb-vorlage:has(input:checked) { border-color: var(--vb-orange); background: rgba(237, 112, 41, 0.1); }
#vb-tool .vb-vorlage:has(input:focus-visible), #vb-tool .vb-stil:has(input:focus-visible) { outline: 2px solid var(--vb-orange); outline-offset: 2px; }
#vb-tool .vb-form { display: block; background: #cfd6e2; border-radius: 3px; margin-bottom: 6px; }
#vb-tool .vb-form-aufsteller { width: 28px; height: 40px; }
#vb-tool .vb-form-aufkleber { width: 38px; height: 38px; border-radius: 50%; margin-top: 1px; }
#vb-tool .vb-form-visitenkarte { width: 46px; height: 30px; margin: 5px 0 11px; }
#vb-tool .vb-form-aushang { width: 30px; height: 42px; margin-top: -1px; }
#vb-tool .vb-vorlage-titel { font-size: 13px; font-weight: 600; line-height: 1.25; }
#vb-tool .vb-vorlage-mass { font-size: 11px; color: var(--vb-leise); }
#vb-tool .vb-stile { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
#vb-tool .vb-stil { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
#vb-tool .vb-stil-punkt { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); background: conic-gradient(#e94b3c, #f4b400, #34a853, #4285f4, #9b59b6, #e94b3c); }
#vb-tool .vb-stil:has(input:checked) .vb-stil-punkt { border-color: var(--vb-orange); box-shadow: 0 0 0 3px rgba(237, 112, 41, 0.3); }
#vb-tool input[type="color"] { width: 40px; height: 30px; padding: 0; border: 1px solid var(--vb-linie); border-radius: 6px; background: transparent; cursor: pointer; }
#vb-tool .vb-logo-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
#vb-tool .vb-logo-zeile .vb-hilfe { margin: 0; }
#vb-tool .vb-haken { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: 14px; line-height: 1.5; text-transform: none; letter-spacing: 0; color: var(--vb-text); cursor: pointer; }
#vb-tool .vb-haken input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--vb-orange); flex: none; }
#vb-tool .vb-regler { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 14px; }
#vb-tool .vb-regler label { text-transform: none; letter-spacing: 0; color: var(--vb-text); font: 400 14px/1.4 Poppins, sans-serif; margin: 0; flex: none; }
#vb-tool .vb-regler input[type="range"] { flex: 1; min-width: 0; accent-color: var(--vb-orange); margin: 0; }
#vb-tool .vb-regler output { flex: none; min-width: 48px; text-align: right; color: var(--vb-leise); font-variant-numeric: tabular-nums; }
#vb-tool .vb-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--vb-orange); color: var(--vb-dunkel); border: 1px solid var(--vb-orange); border-radius: 8px; padding: 13px 20px; font: 600 13px/1.2 Poppins, sans-serif; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; white-space: nowrap; box-shadow: none; text-decoration: none; }
#vb-tool .vb-knopf:hover { background: var(--vb-orange-hell); border-color: var(--vb-orange-hell); color: var(--vb-dunkel); }
#vb-tool .vb-knopf-zweit { background: transparent; color: var(--vb-text); border-color: rgba(255, 255, 255, 0.22); }
#vb-tool .vb-knopf-zweit:hover { background: transparent; color: var(--vb-text); border-color: var(--vb-orange); }
#vb-tool .vb-knopf:disabled { opacity: 0.4; cursor: not-allowed; }
#vb-tool .vb-vorschau { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background: #E9EDF3; border-radius: 12px; padding: 24px 18px; color: #0E1A2B; min-width: 0; }
#vb-tool .vb-leinwand-rahmen { width: 100%; display: flex; justify-content: center; }
#vb-tool canvas { display: block; max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 16px 36px rgba(14, 26, 43, 0.3); }
#vb-tool .vb-vorschau-hinweis { margin: 16px 0 0; font-size: 13px; text-align: center; color: #3b4659; max-width: 380px; }
#vb-tool .vb-aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
#vb-tool .vb-vorschau .vb-knopf-zweit { color: #0E1A2B; border-color: #9aa6b8; }
#vb-tool .vb-vorschau .vb-knopf-zweit:hover { border-color: var(--vb-orange); color: #0E1A2B; }
#vb-tool .vb-vorschau .vb-hilfe { color: #4b5563; }
#vb-tool .vb-mitte { text-align: center; }
#vb-tool .vb-regel { margin-top: 18px; padding: 12px 14px; border-left: 3px solid var(--vb-orange); background: rgba(237, 112, 41, 0.08); border-radius: 8px; font-size: 14px; color: var(--vb-leise); line-height: 1.6; }
#vb-tool .vb-regel strong { color: var(--vb-text); }
@media (max-width: 900px) {
  #vb-tool .vb-spalten { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  #vb-tool .vb-vorlagen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #vb-tool .vb-aktionen .vb-knopf { width: 100%; }
}