/** * umfrage.css - Umfrage SRG1 (Post 23043, gcom360.online) * * Runde 4 (Browser-QA-Fix): dieses CSS lag vorher als Style-Block direkt * in _elementor_data (HTML-Widgets Rabatt-Karten + a3b0bc6). Elementor * kses-saniert _elementor_data beim Speichern fuer den CLI-User (uid 0, * keine unfiltered_html-Capability) und entfernt dabei Style- und Script-Tags * komplett (Inhalt blieb als sichtbarer Klartext im DOM stehen, CSS griff * nie). Ein anderer Meta-Key mit identischem Inhalt behielt die Tags - * die Sanitisierung ist _elementor_data-spezifisch. Fix: Assets raus aus * den Elementor-Daten, hier rein und per mu-Plugin enqueued (siehe * ../gcom360-umfrage-assets.php). * * Unveraendert aus widget-rabattkarten.html + widget-progressbar.html * VERSCHOBEN (nicht neu geschrieben) - inkl. aller Review-Fixes F1-F6 * aus Runde 3 (Rennstrecke --p auf .srg1-track, :has() auf Options-Ebene, * unsichtbare Vollflaechen-Inputs, Hero-Overlay- und Teko-Heading-Override). */ /* ===== Teko lokal laden (03.09. abends): Elementor emittiert den Custom-Font Teko nur, wenn ein Elementor-Widget ihn nutzt. Seit die H1 auf Manrope steht, nutzt kein Widget mehr Teko -> .usurv-sec h3 fiel auf Manrope zurueck (breiter, ZIELDURCHFAHRT lief mobil aus dem Viewport). Datei = vorhandener selbst gehosteter Custom-Font (Post 17689), kein Google-CDN. */ @font-face{ font-family:'Teko'; src:url('../../uploads/2024/09/Teko-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; } /* ===== aus widget-rabattkarten.html ===== */ .usurv-cards{display:flex;gap:20px;flex-wrap:wrap;margin:0 0 40px 0} .usurv-card{flex:1 1 240px;min-width:220px;position:relative;background:#111111;border:1px solid #333333;border-radius:10px;padding:26px 24px;font-family:'Inter',sans-serif} .usurv-card-percent{font-family:'Teko','Manrope','Inter',sans-serif;font-weight:700;font-size:64px;line-height:1;color:#FFFFFF;margin:0 0 6px 0;letter-spacing:.01em} .usurv-card-label{font-size:16px;line-height:1.4;color:#9F9F9F;margin:0} .usurv-card--boost{background:#000000;border:1px solid #FF7500;box-shadow:0 0 24px -6px #FF5B05} .usurv-card--boost .usurv-card-percent{color:#FF7500} .usurv-badge{position:absolute;top:-13px;right:16px;background:#FF7500;color:#000000;font-family:'Teko','Manrope','Inter',sans-serif;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;padding:4px 12px;border-radius:20px} @media(max-width:767px){ .usurv-cards{flex-direction:column} .usurv-card-percent{font-size:52px} } /* ===== aus widget-progressbar.html ===== */ /* ===================================================================== SEKTOR-HEADER (sec1, sec2, sec3, sec4, sec5) + Boxenstopp-Upload-Panel (sec3b) - Font-Stacks ueberall 'Teko','Manrope','Inter',sans-serif fuer Display-/Teko-Text (Spec S7). ===================================================================== */ .usurv-sec{position:relative;padding:0 0 0 20px;margin:0 0 8px 0;border-left:4px solid #FF7500} .usurv-sec .usurv-step{display:block;font-family:'Teko','Manrope','Inter',sans-serif;font-weight:600;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#FF7500;margin:0 0 4px 0} .usurv-sec h3{font-family:'Teko','Manrope','Inter',sans-serif;font-weight:600;font-size:68px;line-height:1.15;text-transform:uppercase;color:#FFFFFF;margin:0 0 6px 0} .usurv-sec p{font-family:'Inter',sans-serif;font-weight:300;font-size:16px;line-height:1.4;color:#9F9F9F;margin:0} .usurv-sec-image{margin:14px 0 0 0} .usurv-sec-image img{display:block;width:100%;max-width:320px;height:auto;border-radius:8px} .usurv-sec-image figcaption{margin-top:6px;font-family:'Inter',sans-serif;font-size:12px;color:#9F9F9F} /* Z2 (Runde 2, Zusatzpunkt): Border/Background/Radius sind von HIER runter auf die drei AEUSSEREN Feldgruppen gewandert (sec3b/Zustand/ MarketingFreigabe, siehe Regelblock weiter unten) - sonst Karte-in- Karte (doppelte Umrandung). .usurv-upload liefert nur noch die Innenabstaende fuer seinen eigenen Inhalt (Titel/Text/Liste/Chip), die Aussen-Optik traegt jetzt die Feldgruppe. */ .usurv-upload{padding:0;position:relative} .usurv-upload ul{margin:16px 0;padding:0;list-style:none} .usurv-upload li{ font-family:'Inter',sans-serif;font-weight:300;font-size:18px;color:#FFFFFF; padding:8px 0 8px 34px;margin:0;position:relative;line-height:1.45; } .usurv-upload li::before{ content:"";position:absolute;left:0;top:12px;width:20px;height:20px; background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF7500' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; } .usurv-upload .usurv-tip{ color:#C9C9C9;font-size:14px;line-height:1.6; margin-top:16px;padding:14px 0 0 30px;position:relative; border-top:1px solid rgba(255,255,255,.12); } .usurv-upload .usurv-tip b{color:#FFFFFF;font-weight:600} .usurv-upload .usurv-tip::before{ content:"";position:absolute;left:0;top:16px;width:18px;height:18px; background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF4D4D' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E") center/contain no-repeat; } .usurv-note{font-family:'Inter',sans-serif;font-weight:300;font-size:13px;color:#9F9F9F;margin:12px 0 0 0} /* ===================================================================== Z2 (Runde 2, Zusatzpunkt) - urspruenglich: sec3b-Panel + Zustand(Upload) + MarketingFreigabe als EINE durchgehende Segment-Karte (Border/ Background/Radius auf allen drei .elementor-field-group-Ebenen, identischer Inset ueber post-23043.css padding-left/right:14px). SUPERSEDED 04.09.2026 (SuperStyler-Spec "ZEIG SIE UNS"-Photozone): die drei Feldgruppen wandern jetzt per initPhotozone() (umfrage.js) in eine gemeinsame Ink-Plate (.usurv-photozone-plate, siehe Photozone- Block weiter unten) VOR einem Parallax-Foto statt in eine eigene Segment-Karte auf normalem Formular-Hintergrund. Die alte Drei- Segment-Optik (eigenes Grau, eigene Eck-Radien pro Gruppe) entfaellt daher - die drei Gruppen liefern nur noch Reset (kein eigener Hintergrund/Radius/Aussenabstand mehr, die Platte uebernimmt das) plus die im Photozone-Block definierten Abstaende dazwischen (Kicker-> Titel/Wunschliste->Upload/Upload->Checkbox laut Spec). ===================================================================== */ .elementor-element-9e48dde .elementor-field-group-sec3b{ background:none; border-radius:0; /* 06.09.2026: seitlicher Einzug wieder wie bei JEDER anderen Feldgruppe (14px aus post-23043.css). Die 0 stammte aus der Photozone, deren Platte ihren eigenen Innenabstand mitbrachte - ohne sie standen die drei Gruppen 14px weiter links als der Rest und liefen links unter die Ueberlaufkante des Formulars (Titel und Text angeschnitten). */ padding-left:14px!important; padding-right:14px!important; padding-top:0; padding-bottom:0; } /* 06.09.2026 (Daniel: "mit den gleichen abstaenden, baue es passend ein"): die beiden Sonderabstaende der Photozone sind raus. sec3b, Zustand und MarketingFreigabe nehmen jetzt denselben Aussenabstand wie jede andere Feldgruppe des Formulars (60px aus post-23043.css). */ /* Boost-Chip im Upload-Panel (sec3b): grau im Ruhezustand, springt per JS auf Orange+Glow, sobald Upload-Input Dateien hat UND MarketingFreigabe angehakt ist (Spec S3). */ .usurv-boost-chip{display:inline-block;font-family:'Teko','Manrope','Inter',sans-serif;font-weight:600;font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:#9F9F9F;background:#FFFFFF14;border:1px solid #FFFFFF33;border-radius:20px;padding:5px 14px;margin:0 0 14px 0;transition:border-color 200ms ease, color 200ms ease, box-shadow 200ms ease} .usurv-boost-chip--active{color:#FF7500;border-color:#FF7500;box-shadow:0 0 14px -4px #FF5B05} @media(max-width:767px){ .usurv-sec h3{font-size:48px} } /* GripWo-Feldgruppe ist standardmaessig unsichtbar - das JS unten schaltet sie frei (nur bei Grip-Antwort Index 2/3). */ .elementor-field-group-GripWo{display:none} /* ===================================================================== Z1 (Zusatzpunkt Runde 2, 03.09.2026) - Hide-CSS fuer alle 17 neuen Feldgruppen aus Welle B/C: 15 Companion-Textfelder (Text) + KontaktWeg + Telefon. Initial IMMER unsichtbar, analog zum GripWo- Muster oben - die Sichtbarkeit steuert AUSSCHLIESSLICH initConditionalCompanions() in umfrage.js (display:block/none), inkl. Wert-leeren+disabled beim Verstecken (siehe JS-Kommentar dort). Optisch VERSCHMILZT das Feld mit der anklickenden Option (Praezisierung Daniel-Screenshot 03.09.): negativer Top-Margin -80px gegen die OUTER-Margin-Collapsing-Kette (Gruppe hat via post-23043.css margin-bottom:60px, das collapst mit diesem margin-top zu -2px; PLUS die letzte Option traegt selbst 10px margin-bottom (Daniel 03.09. spaet: Optionsabstand um 66% reduziert, 28->10px), die NICHT mit der Gruppen-Aussenmarge kollabiert, sondern additiv davor steht -> 10 + (60-62) = netto 8px Luft). -62 statt der urspruenglich einfacher gedachten -20 ist noetig, weil der relevante Kollaps-Partner die 60px-Gruppenmarge ist, NICHT direkt die 28px-Optionsmarge (die bleibt IN der Gruppe, unabhaengig verifiziert). KEIN eigener margin-left-Einzug mehr (vorherige 16px-Einrueckung ENTFERNT, Daniel: "nicht eingerueckt daneben") - die Feldgruppe startet am selben 14px-Padding-Inset wie die Options-Karten darueber (post-23043.css, fuer ALLE .elementor-field-group gleich), damit der linke Rand exakt fluchtet. KEIN eigener border-left mehr auf der Gruppe (ENTFERNT) - das Input selbst traegt bereits einen vollen 2px oranges Rahmen inkl. linker Kante (Elementor-Widget-Feldstil, siehe Regel fuer die Companion-Inputs weiter unten) - ein zusaetzlicher Gruppen-Rahmen haette eine zweite, leicht versetzte orange Linie erzeugt (Doppel- Rand-Optik). Abstand zur NAECHSTEN Frage bewusst GROSS (48px margin-bottom, Praezisierung: vorher "klebte" die naechste Frage fast am Feld). !important auf margin: post-23043.css setzt ".elementor-23043 .elementor-element.elementor-element-9e48dde .elementor-field-group{margin-bottom:60px}" mit 4 Klassen Spezifitaet UND laedt NACH dieser Datei (umfrage.css steht laut Kopf-Kommentar in VOR elementor-post-23043-css, keine expliziten wp_enqueue-deps) - ohne !important wuerde die spaeter geladene Elementor-Regel bei Spezifitaets-Gleichstand gewinnen. ===================================================================== */ .elementor-field-group-AufmerksamText, .elementor-field-group-VersionText, .elementor-field-group-BesitzdauerText, .elementor-field-group-WheelbaseText, .elementor-field-group-StundenText, .elementor-field-group-SimulationText, .elementor-field-group-KomfortText, .elementor-field-group-PassformText, .elementor-field-group-GripText, .elementor-field-group-GripWoText, .elementor-field-group-WarmText, .elementor-field-group-OptikText, .elementor-field-group-QualiText, .elementor-field-group-ZufriedenheitText, .elementor-field-group-EmpfehlenText, .elementor-field-group-KontaktWeg, .elementor-field-group-Telefon{ display:none; margin:-62px 0 48px 0!important; } /* Companion-Textinputs (15x *Text + Telefon - KontaktWeg ist ein Radio und bekommt seine Options-Karten-Optik bereits automatisch ueber die S6-Regeln weiter unten, hier NICHT gelistet): Elementor gibt diesem Formular-Widget bereits eine schoene volle Karten-Optik je Textfeld (2px oranger Rahmen rundum, weisser Text, transluzentes Weiss als Hintergrund, radius 5px - per Playwright verifiziert, Widget-eigene Typo-Einstellung aus Welle B). Einzige Anpassung hier: radius NUR unten rund, oben eckig ("optisch angedockt" an die Option darueber, keine eigene abgerundete Oberkante wie eine neue, unabhaengige Box). */ .elementor-field-group-AufmerksamText input, .elementor-field-group-VersionText input, .elementor-field-group-BesitzdauerText input, .elementor-field-group-WheelbaseText input, .elementor-field-group-StundenText input, .elementor-field-group-SimulationText input, .elementor-field-group-KomfortText input, .elementor-field-group-PassformText input, .elementor-field-group-GripText input, .elementor-field-group-GripWoText input, .elementor-field-group-WarmText input, .elementor-field-group-OptikText input, .elementor-field-group-QualiText input, .elementor-field-group-ZufriedenheitText input, .elementor-field-group-EmpfehlenText input, .elementor-field-group-Telefon input{ border-radius:0 0 5px 5px!important; } /* E-Mail-Hinweis-Div (JS-erzeugt in initConditionalCompanions, kein Formularfeld) - sitzt als letztes Kind IN der KontaktWeg-Feldgruppe, erbt daher deren margin-left/border-left NICHT automatisch (die Regel oben greift nur auf die Feldgruppen-Box selbst) - eigener, dezenter Stil. */ .usurv-kontakt-hint{ display:none; margin-top:10px; font-family:'Inter',sans-serif; font-weight:300; font-size:13px; line-height:1.4; color:#9F9F9F; } /* ===================================================================== S5 - Rennstrecken-Progressbar (SuperStyler B1, Basis-Code aus /opt/cortex-vault/reports/gcom360/20260903 GCOM360 SuperStyler-Ideen Umfrage-SRG1.md, Kapitel B1), Deltas: Fortschritt ueber .elementor-widget-form, dynamische Sektor-Marker, Sticky-Header-Offset. ===================================================================== */ /* F1: --p wird per JS auf .srg1-track (diesem Element) gesetzt, NICHT auf .srg1-track__fill. Fill und Auto sind GESCHWISTER-Kinder von .srg1-track und lesen var(--p) beide per CSS-Custom-Property-Vererbung vom Track. Wuerde --p stattdessen auf .fill sitzen, waere das Auto (waere es Kind von .fill) durch scaleX() mitgestaucht UND doppelt verschoben (p*p statt p) - genau der Bug, den dieser Aufbau vermeidet. */ /* Z3 (Runde 2, Zusatzpunkt, mehrfach praezisiert 03.09. nach Erstabnahme): - Spur 3x so hoch wie der A1-Stand (mobil 8px, Desktop 16px) -> mobil 24px, Desktop 48px. - KEINE runden Ecken mehr (Praezisierung ersetzt die anfangs verlangte proportionale Rundung): border-radius:0 auf Spur UND Fuellung, auch am rechten Fuellungs-Ende - kein overflow:hidden mehr noetig (gab es nur fuer die jetzt entfallene Eck-Kappung). - Hintergrund (ungefuellter Teil) SCHWARZ (#000) statt transluzent. - Voll durchgezogen: x:0, width:100vw (verifiziert per Playwright getBoundingClientRect - kein Vorfahre mit transform/filter/contain zwischen .srg1-track und , position:fixed war bereits echt viewport-relativ, keine Aenderung an left/right/top strukturell noetig). - z-index weit ueber allem: gemessen (Playwright, 03.09.) - diese Seite hat GAR KEINEN sticky/fixed Header (Kandidatensuche ergab 0 Treffer, der Track lag schon vorher ueber dem gesamten Seiteninhalt) - trotzdem defensiv auf 999999 angehoben (Ausnahme bewusst: das Cookie-Consent- Overlay von Borlabs MUSS waehrend eines aktiven Banners weiterhin alles ueberdecken, das ist ein Consent-Gate und kein konkurrierender Header - hier nicht angetastet). - Auto+Flagge (Z5b): Glyphenhoehe = Spurhoehe minus 2x5px, exakt zentriert (unveraendert per top:50%/transform:translate(-50%,-50%)). Auto per filter zur WEISSEN Silhouette (brightness(0) macht JEDE Ausgangsfarbe zu Schwarz, invert(1) dreht das zu Weiss - Reihenfolge ist deshalb robust unabhaengig vom Original-Emoji-Kolorit) + leichter drop-shadow fuer Kontrast auf hellem Bildhintergrund. Flagge bleibt als Emoji unveraendert farbig (ist ohnehin s/w), nur Groesse an die neue Spur angepasst (gleiche Formel wie Auto fuer visuelle Balance). ===================================================================== */ .srg1-track{position:fixed;top:0!important;left:0;right:0;width:100vw;height:48px;z-index:999999;background:#000000;border-radius:0}/* Runde 6 (Daniel, Smartphone): mobil verdoppelt β€” Balken jetzt ueberall 48px */ /* top:0!important: initTrack() setzt bei erkanntem Fixed-Header ein Inline- top (=Header-Hoehe) - seit dem Sticky-Header-Test (03.09. ~23:35) wuerde das die Spur unters Logo schieben. Daniel-Ansage: Spur IMMER ganz oben, der Header weicht ihr aus (siehe Sticky-Header-Block unten). */ .srg1-track__fill{height:100%;background:linear-gradient(90deg,#FF7500,#FF5B05);box-shadow:0 0 12px #FF5B0580;transform-origin:0 50%;transform:scaleX(var(--p,0));border-radius:0} /* Runde 6: Emoji-Glyphe ersetzt β€” 🏎 zeigt je nach Plattform-Font nach LINKS (Android/Noto) oder rechts; die SVG-Silhouette faehrt garantiert in Fortschrittsrichtung und zentriert sich ohne Baseline-Korrekturen. */ .srg1-track__car{position:absolute;top:50%;left:calc(var(--p,0)*100%);transform:translate(-50%,-50%);width:58px;height:16px;font-size:0;line-height:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 44'%3E%3Cg fill='%23FFFFFF'%3E%3Crect x='0' y='1' width='15' height='5' rx='1'/%3E%3Crect x='6' y='6' width='4' height='14'/%3E%3Cpath d='M6 27 L6 21 C13 20 19 19 24 17 C29 10 36 8 44 8 L52 8 C57 8 60 10 63 13 C66 15 70 16 76 17 L144 23 C149 24 151 25 151 27 Z'/%3E%3Cpath d='M42 25 L120 27 C124 28 124 32 120 33 L46 33 C42 32 41 28 42 25 Z'/%3E%3Ccircle cx='60' cy='10' r='4'/%3E%3Crect x='132' y='28' width='28' height='4' rx='1'/%3E%3Crect x='156' y='22' width='3' height='10'/%3E%3Ccircle cx='30' cy='30' r='12'/%3E%3Ccircle cx='112' cy='30' r='11'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat} /* Runde 3 (Daniel 04.09. abends): Zielflagge -> ZIELBEREICH. Das Emoji im Markup bleibt (kses-frei), wird per font-size:0 unsichtbar; das Element selbst wird zur 16:9-Zielzone ganz rechts im Streifen (ersetzt dessen rechtes Ende, liegt ueber dem Fill): Schwarz-Weiss-Kacheln per repeating-conic-gradient. 16:9 zur Streifenhoehe: mobil 24px -> 43px breit (Kachel 12 = 2 Reihen), Desktop 48px -> 85px (Kachel 16 = 3 Reihen). Zieleinlauf-Wackler (.usurv-flag-wave) wirkt weiter aufs ganze Element. */ .srg1-track__flag{position:absolute;top:0;right:0;bottom:0;transform:none;width:85px;font-size:0;line-height:0;opacity:1;text-shadow:none;background:repeating-conic-gradient(#f2f2f2 0% 25%,#0d0d0d 0% 50%) 0 0/16px 16px} /* Sektor-Ticks: Daniel 03.09. ~22:35 gestrichen ("die striche im fortschrittsbalken kannst du streichen") - Elemente bleiben im Markup (JS-Sektor-Blink-Gimmick referenziert sie), werden nur nicht mehr gezeichnet. */ .srg1-track__sector{display:none} @media(prefers-reduced-motion:reduce){ .srg1-track__car{display:none} } /* Z3+Z5b: Track Desktop 16px -> 48px, Auto/Flagge auf 38px (48-10, exakte Z5b-Formel). Mobil (Basisregel oben) 24px Spur -> 14px (24-10). */ @media(min-width:768px){ /* Daniel ~22:35: Rennwagen auf dem Desktop groesser (76px breit). */ .srg1-track__car{width:80px;height:22px} } /* ===================================================================== Z3-Nachtrag (Runde 2): das GESAMTE Progress-UI (Spur + Antwort-Chip) ist auf der Startseite/im Hero-Bereich stoerend - erst sichtbar, sobald der Nutzer bis zur "Aufwaermrunde" (Kapitel sec1) gescrollt hat, danach dauerhaft sichtbar (auch waehrend sec2..sec5) - blendet nur wieder aus, wenn man ÜBER sec1 zurueckscrollt. Klasse .usurv-progress-visible wird von initTrack() (umfrage.js) anhand der Scroll-Position gegen den TOP- Offset von .usurv-chapter--sec1 gesetzt (keine IntersectionObserver- "aktuell im Viewport"-Semantik - die wuerde beim Weiterscrollen in sec2+ faelschlich wieder ausblenden, sobald sec1 aus dem Sichtfenster verschwindet). ===================================================================== */ .srg1-track, .srg1-answers{ opacity:0; transition:opacity .4s ease; } .srg1-track.usurv-progress-visible{ opacity:1; } /* Runde 3b (Daniel 04.09.): Chip n/17 zusaetzlich erst zeigen, wenn der Wagen die Chip-Position passiert hat (Klasse usurv-chip-clear aus initTrack) - vorher ueberlagern sich Wagen und Chip in der Startzone. */ .srg1-answers.usurv-progress-visible.usurv-chip-clear{ opacity:1; } @media(prefers-reduced-motion:reduce){ .srg1-track, .srg1-answers{ transition:none; } } /* ===================================================================== Z5a (Runde 2, Zusatzpunkt, praezisiert): Antwort-Chip von rechts unten nach LINKS unten (exakt 33px), doppelte Schriftgroesse (13px->26px, Mobil 11px->22px), Schriftgewicht +100 (600->700), OHNE Pill/Rand/ Hintergrund - reiner weisser Text mit text-shadow fuer Lesbarkeit auf hellem Bilduntergrund statt Kontur. ===================================================================== */ /* Runde 3 (Daniel 04.09. abends): Chip n/17 vom unteren Rand IN den Streifen - links 33px, vertikal zentriert (flex ueber die volle Streifenhoehe 24/48px). z-index 1000000 = eine Stufe ueber Spur/Fill. Schriftgroesse mobil auf 15px (24px-Streifen), Desktop bleibt 26/700. Bekannter, bewusster Effekt: bei sehr kleinem Fortschritt steht das 76px-Auto kurz ueber dem Chip (beide links) - Daniel-Anordnung. */ .srg1-answers{position:fixed;top:0;left:33px;height:48px;display:flex;align-items:center;z-index:1000000;background:transparent;border:none;padding:0;font-family:'Inter',sans-serif;font-size:20px;font-weight:700;color:#FFFFFF;text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:none} @media(min-width:768px){ .srg1-answers{height:48px;font-size:26px} } /* ===================================================================== Z5c (Runde 2, Zusatzpunkt) - Animations-Gimmicks. Ausnahmslos NUR transform/opacity/box-shadow (kein Layout-Shift), komplett deaktiviert bei prefers-reduced-motion:reduce (Doppel-Absicherung: JS ueberspringt das Setzen der Klassen bereits komplett ueber reduceMotionQuery, siehe umfrage.js - dieser Media-Block ist die zweite, rein CSS-seitige Absicherung, falls doch mal eine Klasse gesetzt wuerde). ===================================================================== */ @media(prefers-reduced-motion:no-preference){ /* Z5c.1 Speed-Boost: Auto bekommt fuer 500ms einen Skew + 2 Speedlines hinter sich (in Scroll-/Fahrtrichtung = LINKS vom Auto, da --p von links nach rechts waechst). Basis-Zentrierung (translate(-50%,-50%)) MUSS in der is-moving-Regel wiederholt werden - transform ist nicht additiv ueber zwei Regeln hinweg. */ .srg1-track__car{transition:transform 150ms ease} .srg1-track__car.is-moving{transform:translate(-50%,-50%) skewX(-6deg)} /* Daniel 06.09.: "mach die mini animation hinten am auto (die striche) auch wenn er mit weniger geschwindigkeit sich bewegt, also immer". Die Striche haengen daher nicht mehr an .is-moving, sondern laufen dauerhaft in Schleife hinter dem Auto. .is-moving beschleunigt sie nur noch (kuerzere Dauer) und legt den Skew dazu. */ .srg1-track__car::before, .srg1-track__car::after{ content:"";position:absolute;top:50%;right:100%;height:2px; background:#FFFFFF;opacity:0;transform:translateY(-50%); animation:usurv-speedline 1.1s linear infinite; } .srg1-track__car::before{width:14px;margin-right:3px;animation-delay:0s} .srg1-track__car::after{width:9px;margin-right:3px;top:65%;animation-delay:.38s} .srg1-track__car.is-moving::before, .srg1-track__car.is-moving::after{animation-duration:.45s} @keyframes usurv-speedline{ 0%{opacity:.9;transform:translateY(-50%) translateX(0)} 100%{opacity:0;transform:translateY(-50%) translateX(-12px)} } /* Z5c.2 Sektor-Durchfahrt: 2x Gruen-Blink + kleiner Puls-Ring, endet wieder im normalen .done-Orange (kein fill-mode noetig - die .done-Regel greift nach Animationsende automatisch weiter). */ .srg1-track__sector.usurv-sector-hit{ animation:usurv-sector-hit 520ms ease-out; } @keyframes usurv-sector-hit{ 0%,100%{background:#FF7500;box-shadow:0 0 6px #FF5B05} 15%,45%{background:#2ee56b;box-shadow:0 0 0 6px rgba(46,229,107,.5)} 30%,60%{background:#FF7500;box-shadow:0 0 6px #FF5B05} } /* Z5c.3 Zieleinlauf (alle Pflichtfelder beantwortet): Flagge wedelt, Auto macht einen Victory-Hop, Chip pulst 2x weiss auf. */ .srg1-track__flag.usurv-flag-wave{ animation:usurv-flag-wave 900ms ease-in-out 3; } @keyframes usurv-flag-wave{ 0%,100%{transform:translateY(-50%) rotate(0deg)} 25%{transform:translateY(-50%) rotate(12deg)} 75%{transform:translateY(-50%) rotate(-12deg)} } .srg1-track__car.usurv-car-hop{ animation:usurv-car-hop 650ms ease-out; } @keyframes usurv-car-hop{ 0%,100%{transform:translate(-50%,-50%)} 30%{transform:translate(-50%,-170%)} 55%{transform:translate(-50%,-40%)} 75%{transform:translate(-50%,-75%)} } .srg1-answers.usurv-chip-win{ animation:usurv-chip-pulse 500ms ease-in-out 2; } @keyframes usurv-chip-pulse{ 0%,100%{opacity:1} 50%{opacity:.35;text-shadow:0 0 14px #FFFFFF, 0 1px 6px rgba(0,0,0,.8)} } /* Z5c.4 Options-Zuendung: Scale-Pop + Ring-Puls auf dem orangen Punkt (label::before) beim Anwaehlen. Scope identisch zur S6-Options- Optik weiter unten (datenschutz/MarketingFreigabe ausgenommen). */ .elementor-element-9e48dde .elementor-field-group:not(.elementor-field-group-datenschutz):not(.elementor-field-group-MarketingFreigabe):not(.elementor-field-group-sec3b) .elementor-field-option.usurv-opt-pop label::before{ animation:usurv-opt-pop 150ms ease-out, usurv-opt-ring 300ms ease-out; } @keyframes usurv-opt-pop{ 0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(1)} } @keyframes usurv-opt-ring{ 0%{box-shadow:0 0 0 0 rgba(255,117,0,.6)} 100%{box-shadow:0 0 0 10px rgba(255,117,0,0)} } } /* ===================================================================== S6 - Auswahl-Karten fuer Radios/Checkboxen (SuperStyler A3, an das Elementor-Markup angepasst: Elementor rendert je Option ein .elementor-field-option mit Input+Label als GESCHWISTER, nicht Input-in-Label). Scope: .elementor-element-9e48dde (das Formular- Widget). ACHTUNG: gilt NICHT fuer die acceptance-Felder (datenschutz/MarketingFreigabe) - :not()-Ausschluss ueber deren Feldgruppen-Klassen, die behalten normales Checkbox-Layout. ===================================================================== */ .elementor-element-9e48dde .elementor-field-group:not(.elementor-field-group-datenschutz):not(.elementor-field-group-MarketingFreigabe):not(.elementor-field-group-sec3b) .elementor-field-subgroup .elementor-field-option{ /* Z4b (Runde 2, Zusatzpunkt): Abstand 22px -> 28px (+6px). */ display:block;margin:0 0 10px;position:relative; } /* A2 (Runde 2, 03.09.): Border komplett weg (border:none statt entfernter Deklaration - explizit, damit nichts von aussen hineinerbt), Karte wirkt nur noch ueber background+radius. transition auf border-color entfernt (kein Border mehr, der uebergehen koennte). */ .elementor-element-9e48dde .elementor-field-group:not(.elementor-field-group-datenschutz):not(.elementor-field-group-MarketingFreigabe):not(.elementor-field-group-sec3b) .elementor-field-option label{ display:flex;align-items:center;gap:12px; /* Z4b (Runde 2, Zusatzpunkt): min-height 48px -> 44px, padding 10px 16px -> 8px 16px (je 2px flacher oben/unten). */ min-height:44px;padding:8px 16px; background:#FFFFFF14;border:none;border-radius:5px; cursor:pointer;transition:background 160ms ease; } /* A2: Ring-Indikator ersetzt das alte gruene Check-Emoji. ::before ist als generierter Pseudo-Flex-Item das ERSTE Kind im Label (Label ist display:flex) - dadurch automatisch links positioniert, ganz ohne eigenes position:absolute. Ring (2px, transparent innen) ist IMMER sichtbar; der Fuellpunkt kommt bei :checked per radial-gradient dazu - kein ::after/content:"βœ“" mehr (das renderte clientseitig als gruenes Emoji, genau das sollte weg). */ .elementor-element-9e48dde .elementor-field-group:not(.elementor-field-group-datenschutz):not(.elementor-field-group-MarketingFreigabe):not(.elementor-field-group-sec3b) .elementor-field-option label::before{ content:"";flex:0 0 auto;width:18px;height:18px;border-radius:50%; border:2px solid #FF7500;background:transparent;box-sizing:border-box; } .elementor-element-9e48dde .elementor-field-group:not(.elementor-field-group-datenschutz):not(.elementor-field-group-MarketingFreigabe):not(.elementor-field-group-sec3b) .elementor-field-option:has(input:checked) label::before{ background:radial-gradient(circle, #FF7500 0 40%, transparent 42% 100%); } /* BUGFIX-SAMMLUNG (03.09., Daniel-Screenshot 2x bestaetigt + eigene Nachmessung): /wp-content/uploads/so-css/so-css-hello-elementor.css (Simple-Custom-CSS-Ausgabedatei) enthaelt eine KOMPLETTE, VERWAISTE Alt-Fassung der Options-Karten-Optik aus einer FRUEHEREN, laengst ersetzten gruenen Iteration dieser Umfrage - sechs Regeln unter ".umfrage-srg1 .elementor-field-option..." insgesamt, per document.styleSheets vollstaendig ausgelesen: 1) input[type="radio"]{display:none!important} - harmlos, deckt sich mit unserem eigenen Verstecken (siehe .elementor-field- option input weiter oben), keine Aktion noetig. 2) input[type="checkbox"]{display:none!important} - dito. 3) input ~ label::before{content:'\00a0'; width:20px;height:20px; border:2px solid #ff7500!important; margin-right:10px!important; font-size:13px!important; line-height:18px!important} - width/height/content verlieren bereits gegen unsere Regel (hoehere Spezifitaet, verifiziert per computed style: 18x18px, content:""), ABER margin-right:10px!important gewinnt (wir setzen dort gar nichts, reines Gap ueber flex-gap:12px am Label) - macht den Abstand Ring<->Text unbeabsichtigt groesser (12+10=22px statt 12px). HIER NEUTRALISIERT (margin-right:0). 4) input:checked ~ label::before{background-color:green; box-shadow:...green!important;border:2px solid green!important} - der urspruenglich gemeldete GRUENE RING. border/box-shadow sind !important und ueberlebten normale Ueberschreibung. HIER NEUTRALISIERT. 5) .elementor-field-option{margin-bottom:2px!important} - durchkreuzte Z4b (sollte 28px sein, kam als 2px an - eigene Nachmessung 03.09. nach QA-Lauf). HIER NEUTRALISIERT. 6) .elementor-field-type-upload input[type=file]::file-selector- button{...background-color:#ff7500!important...} - AKTIV genutzter, GEWOLLTER Stil fuer den nativen "Datei auswählen"- Knopf (orange, passend zum Rest) - KEIN Bug, nicht angefasst. ZUSATZFUND (beim Boost-Chip-QA-Lauf, unabhaengig von den 15 Companion-/Options-Feldern oben): Regeln 1+2 oben (input[type=radio/checkbox]{display:none!important}) sind NICHT auf Options-Radios/-Checkboxen beschraenkt, sondern matchen JEDES input[type=radio/checkbox] innerhalb EINES .elementor-field-option - das trifft auch die acceptance-Checkboxen datenschutz UND MarketingFreigabe (deren Markup ist ebenfalls ein .elementor-field- option, siehe Elementor-Rendering). Die beiden sind bewusst von der S6-Options-Karten-Optik AUSGENOMMEN (:not(...):not(...) oben) und bekommen daher KEINEN Ring/Punkt-Ersatz - ihr natives Kontrollkaestchen war dadurch fuer den Nutzer VOLLSTAENDIG UNSICHTBAR (Klick auf den Zustimmungstext funktioniert weiterhin ueber die native label[for]- Aktivierung, aber ohne jede visuelle Rueckmeldung, ob angehakt wurde - auch fuer die Datenschutz-Pflichtzustimmung). Da MarketingFreigabe Teil der Z2-Karte ist und der Boost-Chip (S3) genau von ihrem Zustand abhaengt, hier mit-neutralisiert (display:revert stellt die normale native Checkbox-Darstellung wieder her - bewusst OHNE eigene Ring-Optik, das bleibt laut S6-Ausnahme unveraendert schlichtes Standard-Checkbox- Layout). Diese Datei liegt AUSSERHALB des erlaubten Aenderungsbereichs dieser Welle (nur umfrage.js/umfrage.css) - Punkte 3/4/5/Zusatzfund hier NEUTRALISIERT statt dort entfernt. TOTER-CODE-HINWEIS (Betreiber- Grundsatz): die verwaisten Alt-Regeln 1-5 in so-css-hello-elementor.css sollten in einer separaten Session/Freigabe geloescht werden (Regel 6 bleibt - die ist lebendig). Eigene Spezifitaet hier bewusst per verdoppelter Klasse (.umfrage-srg1.umfrage-srg1) ueber die Alt-Regeln gehievt (3 bzw. 4 Klassen-Aequivalente je nach Regel) + !important, damit die Neutralisierung unabhaengig von der Ladereihenfolge zuverlaessig gewinnt. */ .umfrage-srg1.umfrage-srg1 .elementor-field-option input:checked ~ label::before{ background:radial-gradient(circle, #FF7500 0 40%, transparent 42% 100%)!important; box-shadow:none!important; border:2px solid #FF7500!important; } .umfrage-srg1.umfrage-srg1 .elementor-field-option input ~ label::before{ margin-right:0!important; } .umfrage-srg1.umfrage-srg1 .elementor-field-option{ margin-bottom:10px!important; } .umfrage-srg1.umfrage-srg1 .elementor-field-group-datenschutz .elementor-field-option input[type="checkbox"], .umfrage-srg1.umfrage-srg1 .elementor-field-group-MarketingFreigabe .elementor-field-option input[type="checkbox"]{ display:revert!important; } .elementor-element-9e48dde .elementor-field-group:not(.elementor-field-group-datenschutz):not(.elementor-field-group-MarketingFreigabe):not(.elementor-field-group-sec3b) .elementor-field-option input{ /* :not(sec3b) seit 06.09.2026: die Marketing-Freigabe steckt jetzt IN der Gruppe sec3b (initUploadLayout) β€” ohne den Ausschluss matchen die Karten-Regeln ueber den Vorfahren sec3b und machen aus der Freigabe- Checkbox einen 100%-Ring (die "Ellipse") und aus dem Label eine Karte. */ /* F3: Input unsichtbar, aber deckt die GESAMTE Karte ab - Klickflaeche = Karte, fokussierbar, per label[for] weiter screenreader-tauglich. .elementor-field-option hat bereits position:relative (siehe oben) - das ist Voraussetzung fuer inset:0 und bleibt unangetastet. Defensiv (unabhaengig vom unten dokumentierten eigentlichen Fund): appearance:none entfernt jede native Control-Optik komplett statt sie nur per Deckkraft zu maskieren + outline:none entfernt den nativen Fokus-Ring des Inputs selbst (der eigene orange Fokus- Indikator sitzt bewusst auf dem Label via :focus-visible weiter unten - bleibt fuer Tastatur-Nutzer sichtbar). */ position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;z-index:1; appearance:none;-webkit-appearance:none;-moz-appearance:none;outline:none; } /* F2: Elementor rendert Input und Label als GESCHWISTER innerhalb von .elementor-field-option - "label:has(input:checked)" kann daher NIE matchen (das Input ist nicht Nachfahre des Labels). Korrekt ist die Pruefung auf Options-Ebene, das Label wird dann als Geschwister- Selektor gestylt. */ .elementor-element-9e48dde .elementor-field-group:not(.elementor-field-group-datenschutz):not(.elementor-field-group-MarketingFreigabe):not(.elementor-field-group-sec3b) .elementor-field-option:has(input:checked) label{ background:#FF750026;box-shadow:0 0 14px -6px #FF5B05; } .elementor-element-9e48dde .elementor-field-group:not(.elementor-field-group-datenschutz):not(.elementor-field-group-MarketingFreigabe):not(.elementor-field-group-sec3b) .elementor-field-option:has(input:focus-visible) label{ outline:2px solid #FF7500;outline-offset:2px; } /* A2: kein Border mehr auf der Karte -> kein Hover-Border-Wechsel mehr noetig, die alte @media(hover:hover)-Regel (border-color-Hover) ist mit dem Border-Wegfall obsolet und entfaellt hier ersatzlos. */ /* ===================================================================== Z4c (Runde 2, Zusatzpunkt) - Hover-Vergroesserung des Options-Textes. NUR bei echten Hover-faehigen Zeigegeraeten (Maus) - auf Touch waere ein staendig aktiver ":hover"-Zustand nach Tap ein UX-Bug (Text bleibt vergroessert haengen). initOptionLabelSpans() in umfrage.js umschliesst dafuer den reinen Options-Text mit - der ::before-Ring (generiertes Pseudo-Element, siehe oben) bleibt AUSSERHALB des Spans und waechst dadurch NICHT mit. Ist-Gewicht gemessen (computed via Playwright, 03.09.2026): 300 -> Hover +100 = 400, Basis hier explizit auf denselben Wert (300) gepinnt (bislang nur ererbt), damit das Delta unabhaengig von kuenftigen Font-Aenderungen stabil +100 bleibt. transform-origin:left center, damit der Text nach RECHTS waechst (nicht ueber den Ring links hinweg). Kein Layout-Shift: nur transform (compositor-only) + font- weight (Inter ist variable-faehig, Breitenaenderung minimal genug, um keinen Zeilenumbruch auszuloesen bei den vorhandenen Optionstexten - QA-Pflicht: Options-Boxhoehe bleibt stabil, siehe Verify) - overflow bewusst NICHT geclippt (Karte hat kein overflow:hidden), der Text darf optisch ueber den rechten Innenabstand hinauswachsen. ===================================================================== */ @media(hover:hover) and (pointer:fine){ .elementor-element-9e48dde .elementor-field-group:not(.elementor-field-group-datenschutz):not(.elementor-field-group-MarketingFreigabe):not(.elementor-field-group-sec3b) .elementor-field-option .usurv-opt-label{ display:inline-block;font-weight:300;transform-origin:left center; transform:scale(1);transition:transform .25s ease, font-weight .25s ease; } .elementor-element-9e48dde .elementor-field-group:not(.elementor-field-group-datenschutz):not(.elementor-field-group-MarketingFreigabe):not(.elementor-field-group-sec3b) .elementor-field-option label:hover .usurv-opt-label{ transform:scale(1.15);font-weight:400; animation:usurv-opt-pulse 1.6s ease-in-out .6s infinite alternate; } @keyframes usurv-opt-pulse{ from{transform:scale(1.15)} to{transform:scale(1.19)} } } /* ===================================================================== S7 - Weitere Design-Fixes ===================================================================== */ /* Hero-Overlay freilegen (Verlauf statt 0.89 Flaechen-Abdunkelung). */ .elementor-element-7d393ff > .elementor-background-overlay{ background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.92) 55%)!important; opacity:1!important; } /* Heading 094865f: seit 03.09. abends komplett im Elementor-Widget gepflegt (Site-Hero-Stil wie RACING: Manrope 55/44 w800 uppercase ls .3px) β€” der fruehere Teko-/Uppercase-Override hier ist entfallen. */ /* ===================================================================== WELLE A (Runde 2, 03.09.2026) - A3/A4/A5 ===================================================================== */ /* A3: keine Link-Hand auf der Frage selbst (nur die direkte Feldgruppen- Label - ">" schliesst die tiefer verschachtelten Options-Labels aus, die behalten cursor:pointer unveraendert ueber die S6-Regeln oben). */ .umfrage-srg1 .elementor-field-group > label{ cursor:default; } /* A4: Textmarkierung site-weit orange - Primaerregel liegt im Child-Theme (hello-elementor-child/style.css, ::selection + ::-moz-selection). Identische Regel hier zusaetzlich als Fallback, falls das Theme-CSS an irgendeiner Stelle nicht greift (z.B. Cache-Edge-Fall) - beide Regeln sind inhaltsgleich, keine Kollision. */ ::selection{background:#FF7500;color:#1a1a1a} ::-moz-selection{background:#FF7500;color:#1a1a1a} /* ===================================================================== A5 - Kapitel-Streifen vollbreit (radialer Verlauf), Wrapper kommt aus initChapters() in umfrage.js. Erste Sektion ohne doppelten Abstand nach oben (die Seite hat vor sec1 bereits eigenen Abstand durch die Cards/ Intro-Widgets darueber - kein zusaetzliches margin-top noetig). Overflow-Sicherung: der Kommentar hier verwies bereits auf eine Regel ".elementor-element-9e48dde{overflow-x:hidden}", die es TATSAECHLICH nie gab (verwaister Kommentar, per Playwright-Mobil-QA 03.09. entdeckt - .elementor-form-fields-wrapper traegt via post-23043.css ein negatives Gutter-Margin von -14px je Seite (calc(-28px/2)); auf Mobilbreiten reicht das Padding der aeusseren Elementor-Spalte nicht ganz aus, um das vollstaendig aufzufangen -> 2px echter horizontaler Overflow, gemessen document.documentElement.scrollWidth 392 vs. clientWidth 390 bei 390px Viewport). Jetzt NACHGEHOLT (siehe Regel direkt unten) statt weiter nur im Kommentar zu versprechen. ===================================================================== */ .elementor-element-9e48dde{overflow-x:clip}/* Daniel 22:45: hidden erzeugte Scrollcontainer (overflow-y:auto, grauer Balken) - clip clippt ohne */ .usurv-chapter{position:relative;padding:40px 0 24px;margin-top:60px} .usurv-chapter:first-child{margin-top:0} .usurv-chapter::before{ content:"";position:absolute;inset:0; /* Daniel 03.09. ~21:30: Verlauf muss ins TRANSPARENTE auslaufen, keine harten Kanten. Der 100vw-Bleed wurde vom Widget-Overflow geclippt (sichtbare senkrechte Kante) -> ersetzt durch Box-gebundene Ellipse, deren Alpha VOR jeder Boxkante 0 erreicht (60%/55%-Halbachsen, transparent ab 78% -> Kante horizontal bei 83%, vertikal bei 91%). */ background:radial-gradient(ellipse 60% 55% at center, rgba(42,42,42,0.9) 0%, rgba(36,36,36,0.45) 40%, rgba(0,0,0,0) 78%); z-index:-1; } /* Intro-Text (e459e6c): Lesebreite begrenzen (Daniel 03.09.: Text maximal so breit wie der Titel, Volltextzeilen sind anstrengend) */ .elementor-element-e459e6c{max-width:760px} /* ===================================================================== WELLE C (Runde 2, 03.09.2026) - C2 Upload-Vorschau (Feld Zustand). Grid erscheint erst bei Dateiauswahl (initUploadPreview() in umfrage.js baut die Items). flex-basis:100% zwingt das Grid auf eine eigene Zeile unterhalb des - die Elterngruppe .elementor-field-group-Zustand ist display:flex (Elementor-Basis, verifiziert), flex-wrap:wrap erlaubt den Umbruch. ===================================================================== */ .usurv-upload-preview{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;flex-basis:100%;width:100%} .usurv-upload-item{position:relative;width:150px;display:flex;flex-direction:column;gap:4px;background:#FFFFFF0D;border:1px solid #FFFFFF33;border-radius:6px;padding:8px;box-sizing:border-box}/* Runde 5b: breiter fuer Dateinamen */ .usurv-upload-item--invalid{border-color:#FF4D4D;background:#FF4D4D14} .usurv-upload-thumb{width:100%;height:84px;border-radius:4px;overflow:hidden;background:#1a1a1a;display:flex;align-items:center;justify-content:center;color:#FF4D4D;font-weight:700;font-size:20px} .usurv-upload-thumb img{width:100%;height:100%;object-fit:cover;display:block} .usurv-upload-meta{display:flex;flex-direction:column;gap:2px;font-family:'Inter',sans-serif} .usurv-upload-name{font-size:11px;color:#FFFFFF;word-break:break-word;line-height:1.3} .usurv-upload-size{font-size:10px;color:#9F9F9F} .usurv-upload-warn{font-size:10px;color:#FF4D4D;line-height:1.15} /* Runde 5b (Daniel): kein schwarzes Viereck mehr - nur ein gut sichtbares X oben rechts (Textschatten statt Plattenhintergrund). */ /* Selektor bewusst zweigliedrig: der Elementor-Kit-Globalstil (.elementor-kit-6 button = 0,1,1) drueckt sonst Schwarz + 20/30-Padding in den Knopf (Daniel-Screenshot "schwarzes Viereck"). */ .usurv-upload-item .usurv-upload-remove{position:absolute;top:2px;right:2px;width:28px;height:28px;border-radius:50%;border:none;background:transparent;color:#FF7500;font-size:22px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;text-shadow:0 1px 4px rgba(0,0,0,.95)} .usurv-upload-item .usurv-upload-remove:hover,.usurv-upload-item .usurv-upload-remove:focus-visible{background:rgba(255,117,0,.18);color:#FFFFFF} .usurv-upload-limit-hint{flex-basis:100%;width:100%;font-family:'Inter',sans-serif;font-size:12px;color:#FF7500;margin-top:4px} /* ===================================================================== WELLE C (Runde 2) / Z4a (Zusatzpunkt) - Desktop-Zweispalter je Kapitel. initQuestionPairs() in umfrage.js wrappt VOR initChapters() jede Frage mit ihrem Companion-Textfeld (bzw. Kontakt+KontaktWeg+Telefon zu dritt, GripWo+GripWoText separat von Grip+GripText) in
. Diese Wrapper UND alle Nicht-gewrappten Einzelfelder (Newsletter/Name/Email) werden per Grid-Auto-Placement zu je EINER Spalte - nur die explizit als "voll" markierten Gruppen (Sektor- Header, sec3b-Karte, Textareas, Datenschutz, Submit) spannen ueber beide Spalten. NUR ab 1025px (Tablet/Mobil bleiben einspaltig wie bisher - unveraendert, keine Regel noetig). Das Kapitel-Verlaufs-Pseudoelement (::before, inset:0) bleibt bei display:grid unveraendert korrekt (position:absolute richtet sich nach der Padding-Box des positionierten Vorfahren .usurv-chapter, unabhaengig vom display-Typ) - verifiziert. ===================================================================== */ @media(min-width:1025px){ .usurv-chapter{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:start} .usurv-chapter > .elementor-field-group-sec1, .usurv-chapter > .elementor-field-group-sec2, .usurv-chapter > .elementor-field-group-sec3, .usurv-chapter > .elementor-field-group-sec3b, .usurv-chapter > .elementor-field-group-Zustand, .usurv-chapter > .elementor-field-group-MarketingFreigabe, .usurv-chapter > .elementor-field-group-sec4, .usurv-chapter > .elementor-field-group-sec5, .usurv-chapter > .elementor-field-group-Optimierung, .usurv-chapter > .elementor-field-group-FarbenMuster, .usurv-chapter > .elementor-field-group-Anmerkungen, .usurv-chapter > .elementor-field-group-datenschutz, .usurv-chapter > .elementor-field-type-submit{ grid-column:1/-1; } } .usurv-q{display:block} /* Acceptance-Felder (datenschutz + MarketingFreigabe): die verwaiste so-css-Ringregel (input ~ label::before, \00a0-Ring, !important) trifft auch diese Labels -> es erschienen Ring UND native Checkbox nebeneinander (Daniel-Screenshot 03.09. ~22:15). Ring hier hart totlegen und die NATIVE Checkbox sauber orange stylen. */ .elementor-element-9e48dde .elementor-field-group-datenschutz label::before, .elementor-element-9e48dde .elementor-field-group-MarketingFreigabe label::before{ content:none!important;display:none!important;border:none!important;margin:0!important; } /* Daniel 07.09. (4. Runde): statt Browser-Standard eine GCOM360- Checkbox - 26px, abgerundet, orange beim Haken, vertikal zum (mehrzeiligen) Zustimmungstext zentriert. Flex auf der Option uebernimmt die Zentrierung; die alten !important-Anker (display/ position/opacity) bleiben, damit so-css-Altregeln nicht reingrΓ€tschen. */ .elementor-element-9e48dde .elementor-field-group-datenschutz .elementor-field-option, .elementor-element-9e48dde .elementor-field-group-MarketingFreigabe .elementor-field-option{ display:flex!important;align-items:center;gap:14px; } .elementor-element-9e48dde .elementor-field-group-datenschutz .elementor-field-option label, .elementor-element-9e48dde .elementor-field-group-MarketingFreigabe .elementor-field-option label{ margin:0!important;cursor:pointer; } .elementor-element-9e48dde .elementor-field-group-datenschutz input[type="checkbox"], .elementor-element-9e48dde .elementor-field-group-MarketingFreigabe input[type="checkbox"]{ display:inline-block!important;appearance:none!important;-webkit-appearance:none!important; width:26px;height:26px;margin:0;flex:0 0 auto; position:static!important;opacity:1!important; background-color:#141414!important;border:2px solid #555555;border-radius:7px;cursor:pointer; background-position:center;background-repeat:no-repeat;background-size:17px 17px; transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease; } .elementor-element-9e48dde .elementor-field-group-datenschutz input[type="checkbox"]:hover, .elementor-element-9e48dde .elementor-field-group-MarketingFreigabe input[type="checkbox"]:hover{ border-color:#FF7500; } .elementor-element-9e48dde .elementor-field-group-datenschutz input[type="checkbox"]:checked, .elementor-element-9e48dde .elementor-field-group-MarketingFreigabe input[type="checkbox"]:checked{ background-color:#FF7500!important;border-color:#FF7500; box-shadow:0 0 14px rgba(255,117,0,.4); background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='%230a0a0a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .elementor-element-9e48dde .elementor-field-group-datenschutz input[type="checkbox"]:focus-visible, .elementor-element-9e48dde .elementor-field-group-MarketingFreigabe input[type="checkbox"]:focus-visible{ outline:2px solid #FF7500;outline-offset:2px; } /* Der sec3b-Innenblock traegt die Klassen "usurv-sec usurv-upload" und erbte damit den 4px-Orange-Balken der Sektor-Header - Daniel 03.09. ~22:15: "was soll der Strich links > weg damit". Nur hier neutralisieren, Sektor-Header behalten ihren Balken. */ .usurv-sec.usurv-upload{border-left:none!important;padding-left:0!important} /* Daniel 03.09. ~22:30: AKTIVE (fokussierte) Eingabefelder sollen einen WEISSEN Rand haben (statt orange). Gilt fuer alle textuellen Felder (input/textarea/select) im Umfrage-Formular; Options-Karten (radio/ checkbox, Inputs unsichtbar) bleiben unberuehrt. */ .elementor-element-9e48dde .elementor-field-textual:focus, .elementor-element-9e48dde textarea.elementor-field-textual:focus{ border-color:#FFFFFF!important; outline:none; } /* Daniel 03.09. ~22:40: einheitliche animierte Banner (GIF) fuer alle 5 Sektor-Header (sec1..sec5). Keine eingebackenen Verlaeufe im GIF mehr - die Blend-Fades oben/unten kommen als CSS-Overlay (::before/::after) ueber dem Bild, damit Banner in die dunkle Seite auslaufen. */ /* Daniel 04.09. ~00:15: "keine gerissenen Ecken" - Radius+Clip liegen jetzt EINHEITLICH auf dem Wrapper (overflow:hidden clippt Bild UND Overlays compositor-seitig glatt); Radius direkt auf dem GIF- erzeugte durch die 256-Farben-Dither-Kante ausgefranste Rundungen. */ .usurv-sec-img{position:relative;margin:18px 0 6px;border-radius:8px;overflow:hidden} /* Runde 5b (Daniel): Heros nicht mehr als flache 240px-Streifen, sondern echtes 16:9 (native Ratio der Teaser-Clips; auch die GIF/Poster-Motive sind 16:9-Quellen). */ /* Daniel 05.09. ~08:10: Sektions-GIFs ein Drittel flacher als die Videos (16:9 -> 16:6 = 8/3) β€” die Banner-GIFs (900x247, ~3,6:1) werden so deutlich weniger seitlich beschnitten. Die