/* ============================================================================= SHOPVOTE-POPUP — aus WPCode 278380 / Husky 6089 (13.08.2026) ----------------------------------------------------------------------------- 66 Regeln fuer das Bewertungs-Popup und die ShopVote-Bausteine in Kopf und Trustleiste. Eine Datei fuer beide Shops: Die Husky-Fassung war bis auf den Kopfkommentar und zwei Token-Zeilen gleich, und die KTM-Fassung ist die allgemeinere — sie schreibt `var(--brand-accent, #ff6600)`, waehrend Husky dort `var(--brand-accent, var(--brand-accent))` stehen hatte, was auf dasselbe hinauslaeuft. Damit traegt diese Fassung beide Marken. Sitewide, wie zuvor als Snippet: Das Popup kann auf jeder Seite erscheinen. Als Datei ist es fuer den Browser cachebar, statt auf jeder Seite im Kopf mitgeliefert zu werden. ============================================================================= */ /* ========================================================================== SHOPVOTE Bewertungs-Popup — Politur (Cowork) Ziel: Der ShopVote-Layer auf der Danke-Seite soll aussehen wie der Shop. Ort: WPCode-Snippet, Typ CSS, Auto Insert / Site Wide Header. WARUM ALLES !important UND `html body` DAVOR: ShopVotes Original-Stylesheet (feedback.shopvote.de/request.min.css) setzt nahezu jede Regel mit !important — UND es wird per JS erst zur Laufzeit in den gehängt, also NACH diesem Snippet. Bei gleicher Spezifität würde dann ShopVote gewinnen. Der Präfix `html body` hebt die Spezifität an und entscheidet den Fall zuverlässig für uns. NICHT per CSS lösbar: Der „Ja"-Button trägt ein inline style-Attribut mit !important (#6ea0b0). Inline schlägt jedes Stylesheet. Das entfernt das zugehörige JS-Snippet — ohne das bleibt der Button türkis. ========================================================================== */ html body #shopvote-rating-tool{ /* --- Tokens. --brand-accent kommt aus dem Shop (KTM #FF6600). --- */ --sv-accent: var(--brand-accent, #ff6600); --sv-accent-press: var(--brand-accent-dark, #e65c00); --sv-card: #ffffff; --sv-ink: #16181c; --sv-muted: #6b7280; /* War #9aa0a6 — auf Weiss 2,64:1. Der Hinweistext der Einwilligungsbox steht in 12 px, gefordert sind 4,5:1. #6b6b6b ist der Grauwert aus spf-a11y.css (5,33:1) und damit derselbe wie ueberall sonst im Shop. Gemeldet aus der Snippet-Sitzung, behoben 18.08.2026. */ --sv-faint: #6b6b6b; /* Die Marke in der SCHRIFT-Rolle. `--sv-accent` traegt daneben Flaechen (Verlaufsbalken) und Raender — dort ist Orange richtig. Als Linkfarbe auf Weiss kommt es nur auf 2,94:1; das ist bei 12 px zu wenig, und anders als bei den Buttons steht hier kein Markenelement, sondern ein Pflichthinweis. Husqvarna bekommt ueber dasselbe Token sein Dunkelblau (11,29:1). */ --sv-accent-text: var(--spf-brand-text, #f96300); --sv-line: #ececec; --sv-border: #d7d9dc; --sv-scrim: rgba(14,16,20,.5); --sv-shadow: 0 24px 80px rgba(14,16,20,.35); --sv-font-head: var(--brand-font-head, 'Roboto Condensed','Roboto Condensed Regular',sans-serif); --sv-font-body: var(--brand-font-body, 'Roboto Condensed','Roboto Condensed Regular',sans-serif); /* --- Aus dem Panel wird der Overlay: volle Fläche, Karte mittig --- */ position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 24px !important; /* ACHTUNG: display bewusst OHNE !important. ShopVote schließt den Layer über style.display='none' (siehe srt-v4.js). Mit !important würde unsere Regel das inline none überstimmen und das Popup ließe sich nie wieder schließen — weder über „Nein, danke." noch nach der Zustimmung. ShopVotes Stylesheet setzt selbst kein display, deshalb reicht die normale Deklaration hier aus. */ display: flex; align-items: center !important; justify-content: center !important; background: var(--sv-scrim) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-radius: 0 !important; box-shadow: none !important; overflow-y: auto !important; z-index: 100000 !important; font-family: var(--sv-font-body) !important; animation: svxScrim .22s ease both; } /* Sicherheitsnetz: Falls doch einmal etwas display erzwingt, gewinnt das inline none von ShopVote trotzdem. */ html body #shopvote-rating-tool[style*="display: none"], html body #shopvote-rating-tool[style*="display:none"]{ display: none !important; } /* --- Die eigentliche Karte --- */ html body #shopvote-rating-tool #rCSV, html body #shopvote-rating-tool #rCSV.container-srt{ position: relative !important; width: min(520px, 100%) !important; max-width: 520px !important; max-height: min(88vh, 720px); margin: 0 !important; padding: 30px 30px 20px !important; background: var(--sv-card) !important; color: var(--sv-ink) !important; border-radius: 18px !important; box-shadow: var(--sv-shadow) !important; overflow: hidden auto; font-family: var(--sv-font-body) !important; font-size: 15px !important; line-height: 1.55 !important; animation: svxCard .28s cubic-bezier(.22,.61,.36,1) both; } html body #shopvote-rating-tool #rCSV:focus{ outline: none; } /* Orange Verlaufskante oben — Haus-Signatur aus dem Welcome-Modal */ html body #shopvote-rating-tool #rCSV::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, var(--sv-accent-text, var(--sv-accent)), color-mix(in srgb, var(--sv-accent-text, var(--sv-accent)) 70%, #fff) 55%, color-mix(in srgb, var(--sv-accent-text, var(--sv-accent)) 40%, #fff)); pointer-events: none; } /* --- Schließen-Button (vom JS-Snippet eingefügt) --- */ html body #shopvote-rating-tool #rCSV .svx-close{ position: absolute !important; top: 14px; right: 14px; width: 42px; height: 42px; min-width: 0 !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; border: 1px solid var(--sv-border) !important; border-radius: 10px !important; background: var(--sv-card) !important; color: var(--sv-muted) !important; font: 400 24px/1 var(--sv-font-body) !important; letter-spacing: 0 !important; cursor: pointer; transition: border-color .15s, color .15s; } @media (hover:hover){ html body #shopvote-rating-tool #rCSV .svx-close:hover{ /* Rand bleibt die Marke (Flaeche, 1.4.11 mit 3:1), das Kreuz darin nimmt die Schriftrolle — als Zeichen auf hellem Grund kaeme Orange nur auf 2,94:1. */ border-color: var(--sv-accent-text, var(--sv-accent)) !important; color: var(--sv-accent-text) !important; }} html body #shopvote-rating-tool #rCSV .svx-close:focus-visible{ outline: 2px solid var(--sv-accent-text, var(--sv-accent)); outline-offset: 2px; } /* --- Typografie --- */ html body #shopvote-rating-tool #rCSV h2{ margin: 4px 44px 10px 0 !important; font-family: var(--sv-font-head) !important; font-weight: 700 !important; font-size: 27px !important; line-height: 1.12 !important; letter-spacing: .02em !important; text-transform: uppercase !important; text-align: left !important; color: var(--sv-ink) !important; } html body #shopvote-rating-tool #rCSV p{ margin: 0 0 16px !important; font-family: var(--sv-font-body) !important; font-size: 15px !important; line-height: 1.6 !important; text-align: left !important; color: var(--sv-muted) !important; } html body #shopvote-rating-tool #rCSV p.rCSV-body{ margin-bottom: 18px !important; font-size: 15px !important; line-height: 1.6 !important; } html body #shopvote-rating-tool #rCSV p.rCSV-question{ margin-bottom: 18px !important; padding-top: 16px !important; border-top: 1px solid var(--sv-line); font-size: 15.5px !important; color: var(--sv-ink) !important; } html body #shopvote-rating-tool #rCSV p.rCSV-question strong{ font-weight: 700 !important; } html body #shopvote-rating-tool #rCSV a{ color: var(--sv-accent-text) !important; } @media (hover:hover){ html body #shopvote-rating-tool #rCSV a:hover{ color: var(--sv-accent-press) !important; }} /* Fußnote „Für die Bewertungsanfrage gelten die Nutzungsbedingungen." */ html body #shopvote-rating-tool #rCSV .rCSV-row:last-child p span{ font-size: 12px !important; color: var(--sv-faint) !important; line-height: 1.5 !important; } /* --- Button-Zeile: Floats raus, Flex rein --- */ html body #shopvote-rating-tool #rCSV form{ margin: 0 !important; } html body #shopvote-rating-tool #rCSV form .rCSV-row{ display: flex !important; gap: 12px !important; width: 100% !important; margin: 0 0 14px !important; } html body #shopvote-rating-tool #rCSV form .rCSV-row .six.columns, html body #shopvote-rating-tool #rCSV form .rCSV-row .columns{ flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; float: none !important; } /* --- Buttons --- */ html body #shopvote-rating-tool #rCSV .button, html body #shopvote-rating-tool #rCSV a.button{ display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: 48px !important; line-height: 1.1 !important; padding: 0 14px !important; margin: 0 !important; border-radius: 9px !important; border: 1.5px solid var(--sv-border) !important; background: var(--sv-card) !important; color: var(--sv-muted) !important; font-family: var(--sv-font-head) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; text-decoration: none !important; white-space: normal !important; cursor: pointer !important; transition: background-color .15s, border-color .15s, color .15s, transform .1s; } @media (hover:hover){ html body #shopvote-rating-tool #rCSV .button.srt-button-action-no:hover{ border-color: var(--sv-ink) !important; color: var(--sv-ink) !important; }} html body #shopvote-rating-tool #rCSV .button.srt-button-action-yes{ background: var(--sv-accent) !important; border-color: var(--sv-accent-text, var(--sv-accent)) !important; color: #fff !important; box-shadow: 0 2px 10px color-mix(in srgb, var(--sv-accent-text, var(--sv-accent)) 30%, transparent) !important; } @media (hover:hover){ html body #shopvote-rating-tool #rCSV .button.srt-button-action-yes:hover{ background: var(--sv-accent-press) !important; border-color: var(--sv-accent-press) !important; }} html body #shopvote-rating-tool #rCSV .button:active{ transform: scale(.985); } html body #shopvote-rating-tool #rCSV .button:focus-visible{ outline: 2px solid var(--sv-accent-text, var(--sv-accent)) !important; outline-offset: 2px; } /* --- Night-Mode (Muster wie --spf-hub-* / --bsoc-*) --- */ html body.spf-night #shopvote-rating-tool{ --sv-card: #17181a; --sv-ink: #e8eaed; --sv-muted: #9aa0a6; /* War #7c828a — auf der Karte #1a1c1e 4,41:1, also knapp darunter. #868d96 hebt es auf 5,10:1. */ --sv-faint: #868d96; /* Nachts traegt die Nacht-Signatur: bei KTM dasselbe Orange, bei Husqvarna Gelb — Dunkelblau kaeme auf dem dunklen Grund nur auf 1,7:1. */ --sv-accent-text: var(--spf-brand-night, var(--sv-accent)); --sv-line: #2a2d30; --sv-border: #3a3e44; --sv-scrim: rgba(0,0,0,.62); --sv-shadow: 0 24px 80px rgba(0,0,0,.6); } html body.spf-night #shopvote-rating-tool #rCSV, html body.spf-night #shopvote-rating-tool #rCSV.container-srt{ background: var(--sv-card) !important; border: 1px solid var(--sv-line) !important; } html body.spf-night #shopvote-rating-tool #rCSV .button.srt-button-action-no{ background: transparent !important; color: var(--sv-muted) !important; } @media (hover:hover){ html body.spf-night #shopvote-rating-tool #rCSV .button.srt-button-action-no:hover{ border-color: var(--sv-ink) !important; color: var(--sv-ink) !important; }} html body.spf-night #shopvote-rating-tool #rCSV .svx-close{ background: transparent !important; } /* --- Mobile: Bottom-Sheet --- */ @media (max-width: 600px){ html body #shopvote-rating-tool{ padding: 0 !important; align-items: flex-end !important; } html body #shopvote-rating-tool #rCSV, html body #shopvote-rating-tool #rCSV.container-srt{ width: 100% !important; max-width: none !important; max-height: 92vh; padding: 26px 20px max(18px, env(safe-area-inset-bottom)) !important; border-radius: 18px 18px 0 0 !important; animation: svxSheet .3s cubic-bezier(.22,.61,.36,1) both; } html body #shopvote-rating-tool #rCSV::before{ border-radius: 18px 18px 0 0; } html body #shopvote-rating-tool #rCSV h2{ font-size: 24px !important; } html body #shopvote-rating-tool #rCSV form .rCSV-row{ flex-direction: column-reverse !important; gap: 10px !important; } } /* ========================================================================== RÜCKMELDUNG NACH ZUSTIMMUNG Eigene Karte, vom JS-Snippet erzeugt. Hängt nicht in ShopVotes Layer, sondern direkt am body — ShopVote darf seinen Layer schließen wie es will. ========================================================================== */ html body #svx-feedback{ --sv-accent: var(--brand-accent, #ff6600); --sv-card: #ffffff; --sv-ink: #16181c; --sv-muted: #6b7280; --sv-border: #d7d9dc; --sv-scrim: rgba(14,16,20,.5); --sv-shadow: 0 24px 80px rgba(14,16,20,.35); --sv-ok: #22a447; --sv-bad: #e0453c; --sv-font-head: var(--brand-font-head, 'Roboto Condensed','Roboto Condensed Regular',sans-serif); --sv-font-body: var(--brand-font-body, 'Roboto Condensed','Roboto Condensed Regular',sans-serif); position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--sv-scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); font-family: var(--sv-font-body); animation: svxScrim .22s ease both; } html body #svx-feedback.is-leaving{ animation: svxScrim .3s ease reverse both; } html body #svx-feedback .svx-fb__card{ position: relative; width: min(420px, 100%); padding: 30px 30px 26px; background: var(--sv-card); color: var(--sv-ink); border-radius: 18px; box-shadow: var(--sv-shadow); text-align: center; animation: svxCard .28s cubic-bezier(.22,.61,.36,1) both; } html body #svx-feedback .svx-fb__card::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 18px 18px 0 0; background: var(--sv-accent); } html body #svx-feedback .svx-fb__card.is-ok::before{ background: var(--sv-ok); } html body #svx-feedback .svx-fb__card.is-fail::before{ background: var(--sv-bad); } html body #svx-feedback .svx-fb__title{ margin: 6px 0 8px; font-family: var(--sv-font-head); font-weight: 700; font-size: 23px; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; color: var(--sv-ink); } html body #svx-feedback .svx-fb__text{ margin: 0; font-size: 15px; line-height: 1.6; color: var(--sv-muted); } html body #svx-feedback .svx-fb__spinner{ width: 34px; height: 34px; margin: 2px auto 14px; border: 3px solid var(--sv-border); border-top-color: var(--sv-accent-text, var(--sv-accent)); border-radius: 50%; animation: svxSpin .8s linear infinite; } html body #svx-feedback .svx-fb__btn{ margin-top: 20px; min-height: 44px; padding: 0 22px; border: 1.5px solid var(--sv-border); border-radius: 9px; background: var(--sv-card); color: var(--sv-muted); font-family: var(--sv-font-head); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s; } @media (hover:hover){ html body #svx-feedback .svx-fb__btn:hover{ border-color: var(--sv-ink); color: var(--sv-ink); }} html body.spf-night #svx-feedback{ --sv-card: #17181a; --sv-ink: #e8eaed; --sv-muted: #9aa0a6; --sv-border: #3a3e44; --sv-scrim: rgba(0,0,0,.62); --sv-shadow: 0 24px 80px rgba(0,0,0,.6); } html body.spf-night #svx-feedback .svx-fb__card{ border: 1px solid #2a2d30; } html body.spf-night #svx-feedback .svx-fb__btn{ background: transparent; } @keyframes svxSpin{ to{ transform: rotate(360deg) } } @media (prefers-reduced-motion: reduce){ html body #svx-feedback, html body #svx-feedback .svx-fb__card{ animation: none !important; } html body #svx-feedback .svx-fb__spinner{ animation-duration: 2s; } } /* ========================================================================== HUSKY-SHOP Dieselbe Datei verwenden. Der Akzent kommt aus --brand-accent des Shops. Solange Husky noch auf Twenty Twenty-Five läuft und keine Brand-Tokens definiert, greift der Fallback (Orange) — dann diesen Block mit einbauen: html body #shopvote-rating-tool{ --sv-accent: #1c5fa5; --sv-accent-press: #164b84; } ========================================================================== */ /* ========================================================================== KONTRAST — bewusste Entscheidung, bitte gegenprüfen Weiß auf #FF6600 ergibt 2,94:1. WCAG AA verlangt 4,5:1 für normalen Text. Der Button entspricht damit dem restlichen Shop (Suche, Warenkorb, CTAs), erfüllt AA aber nicht. Zwei Auswege, falls das stören soll — einer davon in den Block oben eintragen: a) dunkleres Orange: --sv-accent: #c24d00; -> 4,50:1, bleibt orange b) dunkle Schrift: Regel .srt-button-action-yes{ color:#16181c !important } -> 7,15:1, weicht aber vom Shop-Look ab ========================================================================== */ /* --- Animationen --- */ @keyframes svxScrim{ from{ opacity:0 } to{ opacity:1 } } @keyframes svxCard { from{ opacity:0; transform: translateY(16px) scale(.97) } to{ opacity:1; transform:none } } @keyframes svxSheet{ from{ opacity:0; transform: translateY(40px) } to{ opacity:1; transform:none } } @media (prefers-reduced-motion: reduce){ html body #shopvote-rating-tool, html body #shopvote-rating-tool #rCSV{ animation: none !important; } }