/* ==========================================================================
SmartFMGuard – Motion-System (DS §5)
Keyframe-Bibliothek (§5.3), Reveal, Steuer-Selektoren der Szenen (§4.5),
Tafel-Zeitfenster (§5.4.1/§5.5), UI-Bewegung, Reduced-Motion-Block.
Regeln: nur transform · opacity · stroke-dashoffset · fill/stroke per steps.
Nie left/top/width/height/filter/box-shadow. Keine Hex-Farben – nur Tokens.
Ohne JS (kein html.sfg-js): alles sichtbar, Szenen laufen ab dem Laden.
Wird von css/style.css importiert; Seiten brauchen keinen zweiten .
========================================================================== */
/* --------------------------------------------------------------------------
1. Steuer-Selektoren (verbindlich, DS §4.5 / T2)
Trifft SVG-Kinder UND die HTML-Tafel derselben Hülle.
-------------------------------------------------------------------------- */
.sfg-js .sfg-scene:not(.is-live) *,
.sfg-scene.is-paused *,
.sfg-scene.is-hidden-tab *,
.sfg-scene.is-static * {
animation-play-state: paused !important;
}
/* --------------------------------------------------------------------------
2. Reveal (DS §4.35, §5.1): 18 px von unten, nur mit html.sfg-js
-------------------------------------------------------------------------- */
.sfg-js .sfg-reveal {
opacity: 0;
transform: translateY(var(--reveal-y));
transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.sfg-js .sfg-reveal.is-visible { opacity: 1; transform: none; }
/* Stagger: der Elternknoten trägt data-stagger, die Kinder gleiten versetzt ein.
JS setzt transition-delay (max. 6, --stagger); die nth-child-Staffel unten ist
der CSS-Fallback, falls JS den Delay nicht setzt. */
.sfg-js .sfg-reveal[data-stagger] { opacity: 1; transform: none; }
.sfg-js .sfg-reveal[data-stagger] > * {
opacity: 0;
transform: translateY(var(--reveal-y));
transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.sfg-js .sfg-reveal[data-stagger].is-visible > * { opacity: 1; transform: none; }
.sfg-js .sfg-reveal[data-stagger] > :nth-child(2) { transition-delay: calc(var(--stagger) * 1); }
.sfg-js .sfg-reveal[data-stagger] > :nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
.sfg-js .sfg-reveal[data-stagger] > :nth-child(4) { transition-delay: calc(var(--stagger) * 3); }
.sfg-js .sfg-reveal[data-stagger] > :nth-child(5) { transition-delay: calc(var(--stagger) * 4); }
.sfg-js .sfg-reveal[data-stagger] > :nth-child(6) { transition-delay: calc(var(--stagger) * 5); }
/* ab dem siebten Kind ohne Versatz (--stagger-max: 6) */
/* --------------------------------------------------------------------------
3. Keyframe-Bibliothek (DS §5.3) – Namen verbindlich
Dauer/Verzögerung setzen die Szenen selbst über --scene-dur.
-------------------------------------------------------------------------- */
/* Sensor-Atmen, „verfügbar"-Icon · Idle 3 s, --ease-in-out, alternate */
@keyframes sfg-breathe {
from { transform: scale(1); opacity: .7; }
to { transform: scale(1.12); opacity: 1; }
}
/* Tropfen bildet sich und fällt · --ease-fall, 600 ms Fall */
@keyframes sfg-drop {
0% { transform: translateY(0); opacity: 0; }
30% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(var(--drop-y, 50px)); opacity: 1; }
}
/* Pfütze wächst (handtellergroß), transform-origin unten · --ease-out */
@keyframes sfg-pool {
from { transform: scale(0); }
to { transform: scale(1); }
}
/* Statuswechsel: kippt genau einmal (steps(1, end) = --ease-kipp).
Farben kommen aus --kipp-from / --kipp-to des Elements. */
@keyframes sfg-kipp {
from { fill: var(--kipp-from); stroke: var(--kipp-from); }
to { fill: var(--kipp-to); stroke: var(--kipp-to); }
}
/* Wächterring am aktiven Sensor (Statusfarbe) · 800 ms, zweiter Ring +350 ms */
@keyframes sfg-ring {
from { transform: scale(.2); opacity: .9; }
to { transform: scale(2.6); opacity: 0; }
}
/* Die eine gestrichelte Strecke je Szene · linear · --dash = Streckenlänge */
@keyframes sfg-draw {
from { stroke-dashoffset: var(--dash, 120); }
to { stroke-dashoffset: 0; }
}
/* Partner-Wagen fährt (Kupfer) · --ease-out 1,2 s, endet an der Tür */
@keyframes sfg-drive {
from { transform: translateX(0); }
to { transform: translateX(var(--drive, -380px)); }
}
/* Tafelzeilen, Fahnen, Karten gleiten ein · 250 ms --ease-out */
@keyframes sfg-appear {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
/* Stempel „Protokoll", Rabatt-Badge, Prüfer-Häkchen · 300 ms */
@keyframes sfg-stamp {
from { opacity: 0; transform: scale(.9); }
to { opacity: 1; transform: none; }
}
/* Häkchen zeichnet sich (Prüfer, Formular-Erfolg) · 500 ms */
@keyframes sfg-check {
from { stroke-dashoffset: var(--dash, 60); }
to { stroke-dashoffset: 0; }
}
/* Pfütze verschwindet, Loop-Überblendung · 600–800 ms */
@keyframes sfg-fade {
from { opacity: 1; }
to { opacity: 0; }
}
/* Ziffernwechsel: zwei Glyphen, die zweite mit animation-direction: reverse */
@keyframes sfg-tick {
0%, 49.9% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* Windlinien über dem Dach (Sturm) · Versatz 200 ms */
@keyframes sfg-wind {
0% { transform: translateX(0); opacity: 0; }
25% { opacity: 1; }
75% { opacity: 1; }
100% { transform: translateX(60px); opacity: 0; }
}
/* Drohne steigt (nur NACH sfg-lighten) · Schweben als zweiter Keyframe am Kind */
@keyframes sfg-rise {
from { transform: translateY(0); }
to { transform: translateY(-90px); }
}
@keyframes sfg-hover {
from { transform: translateY(-2px); }
to { transform: translateY(2px); }
}
/* Wolke hellt auf, per steps: storm-500 → storm-100 (Pflicht vor sfg-rise) */
@keyframes sfg-lighten {
from { fill: var(--storm-500); }
to { fill: var(--storm-100); }
}
/* Kamerarahmen an Fotopunkten · 120 ms, max. 3 je Szene */
@keyframes sfg-flash {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
/* Lichtpunkt des Strangs · linear, --dur-flow · --track = Streckenlänge */
@keyframes sfg-travel {
from { transform: translateX(0); }
to { transform: translateX(var(--track, 0px)); }
}
/* Stepper-Fülllinie · 400 ms linear je Segment */
@keyframes sfg-flow-fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* Konfigurator-Summe blitzt einmal --accent-tint · 300 ms, kein Loop */
@keyframes sfg-flash-bg {
from { background-color: var(--accent-tint); }
to { background-color: transparent; }
}
/* --------------------------------------------------------------------------
3b. UI-Keyframes (kein Szenen-Inhalt)
-------------------------------------------------------------------------- */
@keyframes sfg-dd-in { /* Dropdown öffnet: translateY(-4px→0) + opacity (§4.1) */
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
@keyframes sfg-faq-open { /* FAQ-Panel: grid-template-rows 0fr → 1fr (§4.21) */
from { grid-template-rows: 0fr; }
to { grid-template-rows: 1fr; }
}
@keyframes sfg-spin { /* Formular „Wird gesendet …": drehender Bogen (§4.26) */
to { transform: rotate(360deg); }
}
@keyframes sfg-station { /* Strang: aktive Station wächst auf 1,04 (§4.12) */
0% { transform: scale(1); }
2%, 12% { transform: scale(1.04); }
14%, 100% { transform: scale(1); }
}
@keyframes sfg-station-flag { /* Strang: Fahne der aktiven Station */
0% { opacity: 0; }
2%, 12% { opacity: 1; }
14%, 100% { opacity: 0; }
}
/* --------------------------------------------------------------------------
4. Leitstand-Tafel (HTML, .sfg-board) – Zeitfenster in % der --scene-dur
Eine Zeile trägt data-row="-", ein Badge data-t="-"
(leeres „aus" = bis zum Ausblenden der Tafel). Verfügbare Fenster:
hero-start 12,6 s (§5.4.1): Zeilen 32-95 · 35-95 · 67-95;
Badges 0-50 · 50-56 · 0-56 · 56- · 71- (Stempel)
LP gewerbe/mfh 10 s (§5.5): Zeilen 33-92 · 40-92 · 78-92; Badges 0-63 · 63-
LP portfolio 9 s (§5.5): Zeile 67-83
-------------------------------------------------------------------------- */
.sfg-board [data-row],
.sfg-board [data-t] {
animation-duration: var(--scene-dur, 12.6s);
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.sfg-board [data-row="32-95"] { animation-name: sfg-board-32-95; }
.sfg-board [data-row="35-95"] { animation-name: sfg-board-35-95; }
.sfg-board [data-row="67-95"] { animation-name: sfg-board-67-95; }
.sfg-board [data-row="33-92"] { animation-name: sfg-board-33-92; }
.sfg-board [data-row="40-92"] { animation-name: sfg-board-40-92; }
.sfg-board [data-row="78-92"] { animation-name: sfg-board-78-92; }
.sfg-board [data-row="67-83"] { animation-name: sfg-board-67-83; }
.sfg-board [data-t="0-50"] { animation-name: sfg-board-t-0-50; }
.sfg-board [data-t="50-56"] { animation-name: sfg-board-t-50-56; }
.sfg-board [data-t="0-56"] { animation-name: sfg-board-t-0-56; }
.sfg-board [data-t="56-"] { animation-name: sfg-board-t-56; }
.sfg-board [data-t="71-"] { animation-name: sfg-board-t-71; }
.sfg-board [data-t="0-63"] { animation-name: sfg-board-t-0-63; }
.sfg-board [data-t="63-"] { animation-name: sfg-board-t-63; }
/* Geplante Ebene gewählt (is-static): die Wasserwacht-Zeilen gehören nicht ins Bild. */
.sfg-scene.is-static .sfg-board [data-row] { animation: none; opacity: 0; }
@keyframes sfg-board-32-95 { 0%, 32% { opacity: 0; transform: translateY(8px); } 34%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes sfg-board-35-95 { 0%, 35% { opacity: 0; transform: translateY(8px); } 37%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes sfg-board-67-95 { 0%, 67% { opacity: 0; transform: translateY(8px); } 69%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes sfg-board-33-92 { 0%, 33% { opacity: 0; transform: translateY(8px); } 35%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes sfg-board-40-92 { 0%, 40% { opacity: 0; transform: translateY(8px); } 42%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes sfg-board-78-92 { 0%, 78% { opacity: 0; transform: translateY(8px); } 80%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes sfg-board-67-83 { 0%, 67% { opacity: 0; transform: translateY(8px); } 69%, 83% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
/* Badge-Wechsel kippen (steps) und blinken nie */
@keyframes sfg-board-t-0-50 { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sfg-board-t-50-56 { 0%, 49.9% { opacity: 0; } 50%, 55.9% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes sfg-board-t-0-56 { 0%, 55.9% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes sfg-board-t-56 { 0%, 55.9% { opacity: 0; } 56%, 100% { opacity: 1; } }
@keyframes sfg-board-t-71 { 0%, 71% { opacity: 0; transform: scale(.9); } 73%, 100% { opacity: 1; transform: none; } }
@keyframes sfg-board-t-0-63 { 0%, 62.9% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes sfg-board-t-63 { 0%, 62.9% { opacity: 0; } 63%, 100% { opacity: 1; } }
/* --------------------------------------------------------------------------
5. Komponenten-Bewegung (Auslöser: is-visible durch motion.js, Hover, Zustand)
-------------------------------------------------------------------------- */
/* Badge „verfügbar": nur das Häkchen atmet (Opacity), „in Vorbereitung" nie (G1) */
.sfg-badge--avail .sfg-icon,
.sfg-badge[data-status="available"] .sfg-icon {
animation: sfg-breathe var(--dur-breathe) var(--ease-in-out) infinite alternate;
transform-origin: center;
}
:is(.sfg-badge--avail, .sfg-badge[data-status="available"])::before { animation: sfg-breathe-soft var(--dur-breathe) var(--ease-in-out) infinite alternate; }
@keyframes sfg-breathe-soft { from { opacity: .7; } to { opacity: 1; } } /* nur Opacity: die Glyphe trägt ein rotate */
.sfg-badge--soon, .sfg-badge--soon *,
.sfg-badge[data-status="planned"], .sfg-badge[data-status="planned"] *,
.sfg-badge--soon::before, .sfg-badge[data-status="planned"]::before { animation: none !important; }
/* Stepper: Linie füllt sich bis zum aktiven Schritt, aktiver Knoten pulst einmal (§4.11) */
.sfg-js .sfg-stepper .sfg-stepper__step::after { transform: scaleX(0); transform-origin: left; }
.sfg-js .sfg-stepper--vertical .sfg-stepper__step::after { transform: scaleY(0); transform-origin: top; }
.sfg-js .sfg-stepper.is-visible .sfg-stepper__step.is-done::after,
.sfg-js .sfg-stepper.is-visible .sfg-stepper__step[aria-current="step"]::after {
animation: sfg-flow-fill 400ms linear forwards;
}
.sfg-js .sfg-stepper--vertical.is-visible .sfg-stepper__step.is-done::after,
.sfg-js .sfg-stepper--vertical.is-visible .sfg-stepper__step[aria-current="step"]::after {
animation-name: sfg-flow-fill-y;
}
@keyframes sfg-flow-fill-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.sfg-stepper .sfg-stepper__step:nth-child(2)::after { animation-delay: 400ms; }
.sfg-stepper .sfg-stepper__step:nth-child(3)::after { animation-delay: 800ms; }
.sfg-stepper .sfg-stepper__step:nth-child(4)::after { animation-delay: 1200ms; }
.sfg-stepper .sfg-stepper__step:nth-child(5)::after { animation-delay: 1600ms; }
.sfg-stepper .sfg-stepper__step:nth-child(6)::after { animation-delay: 2000ms; }
.sfg-js .sfg-stepper.is-visible .sfg-stepper__step[aria-current="step"] .sfg-stepper__node::before {
animation: sfg-ring 800ms var(--ease-out) 1 both;
}
/* Zeitstrahl (Versicherer-Hero): Stationen mit Stagger 120 ms, Stempel setzt sich */
.sfg-js .sfg-stepper--timeline .sfg-stepper__step { opacity: 0; }
.sfg-js .sfg-stepper--timeline.is-visible .sfg-stepper__step { animation: sfg-appear var(--dur-state) var(--ease-out) forwards; }
.sfg-js .sfg-stepper--timeline.is-visible .sfg-stepper__step:nth-child(2) { animation-delay: 120ms; }
.sfg-js .sfg-stepper--timeline.is-visible .sfg-stepper__step:nth-child(3) { animation-delay: 240ms; }
.sfg-js .sfg-stepper--timeline.is-visible .sfg-stepper__step:nth-child(4) { animation-delay: 360ms; }
.sfg-js .sfg-stepper--timeline.is-visible .sfg-stepper__step:nth-child(5) { animation-delay: 480ms; }
.sfg-js .sfg-stepper--timeline.is-visible .sfg-stepper__node .sfg-icon { animation: sfg-stamp 300ms var(--ease-out) 600ms both; }
/* Modul-Strang: Lichtpunkt wandert, aktive Station wächst, Fahne öffnet (§4.12) */
.sfg-flow__dot { animation: sfg-travel var(--dur-flow) linear infinite; }
.sfg-flow__station {
animation: sfg-station var(--dur-flow) linear infinite;
animation-delay: calc(var(--dur-flow) * var(--i, 0) / var(--n, 1));
}
.sfg-flow__flag {
animation: sfg-station-flag var(--dur-flow) linear infinite;
animation-delay: calc(var(--dur-flow) * var(--i, 0) / var(--n, 1));
}
/* Modulkarte: Icon zeichnet seinen Strich nach (400 ms) beim Hover */
@media (hover: hover) {
.sfg-card--module:hover .sfg-icon-tile .sfg-icon {
--dash: 120;
stroke-dasharray: var(--dash);
animation: sfg-draw 400ms linear;
}
}
/* Zahlenleiste: Quelle blendet 200 ms nach dem Counter ein (§4.8) */
.sfg-stat__source { transition: opacity var(--dur-state) var(--ease-out) 200ms; }
.sfg-js:not(.sfg-reduce) .sfg-stat__num[data-count]:not(.is-done) ~ .sfg-stat__source { opacity: 0; }
/* Alert-Beispiel: Verlauf erscheint mit Stagger 120 ms, Prüfer-Häkchen zeichnet sich (§4.24) */
.sfg-js .sfg-alert-example__trail li { opacity: 0; }
.sfg-js .sfg-alert-example.is-visible .sfg-alert-example__trail li { animation: sfg-appear var(--dur-state) var(--ease-out) forwards; }
.sfg-js .sfg-alert-example.is-visible .sfg-alert-example__trail li:nth-child(2) { animation-delay: 120ms; }
.sfg-js .sfg-alert-example.is-visible .sfg-alert-example__trail li:nth-child(3) { animation-delay: 240ms; }
.sfg-js .sfg-alert-example.is-visible .sfg-alert-example__trail li:nth-child(4) { animation-delay: 360ms; }
.sfg-js .sfg-alert-example.is-visible .sfg-alert-example__trail li:nth-child(5) { animation-delay: 480ms; }
.sfg-js .sfg-alert-example.is-visible .sfg-alert-example__trail li:nth-child(6) { animation-delay: 600ms; }
.sfg-js .sfg-alert-example.is-visible .sfg-alert-example__trail li:nth-child(7) { animation-delay: 720ms; }
.sfg-js .sfg-alert-example.is-visible .is-human .sfg-icon {
--dash: 60;
stroke-dasharray: var(--dash);
animation: sfg-check 500ms var(--ease-out) 900ms both;
}
/* Vorher/Nachher: Griff fährt beim ersten Sichtbarwerden einmal 50 → 35 → 50 % (§4.31) */
@property --ba { syntax: ''; inherits: true; initial-value: 50%; }
@keyframes sfg-ba-nudge { 0% { --ba: 50%; } 50% { --ba: 35%; } 100% { --ba: 50%; } }
.sfg-js .sfg-ba-slider.is-visible:not(.is-touched) { animation: sfg-ba-nudge 1.2s var(--ease-in-out) 1; }
/* Einwilligungs-Toggle: Sensorpunkt atmet, Widerruf leert die Messwert-Linie (§4.29) */
.sfg-unit.is-granted .sfg-unit__dot,
.sfg-consent-toggle:has(input[value="granted"]:checked) .sfg-unit--toggle .sfg-unit__dot {
animation: sfg-breathe var(--dur-breathe) var(--ease-in-out) infinite alternate;
transform-box: fill-box; transform-origin: center;
}
.sfg-unit.is-revoked .sfg-unit__line,
.sfg-consent-toggle:has(input[value="revoked"]:checked) .sfg-unit--toggle .sfg-unit__line {
--dash: 80;
stroke-dasharray: var(--dash);
animation: sfg-draw 600ms linear reverse forwards;
}
.sfg-unit.is-revoked .sfg-unit__trash,
.sfg-consent-toggle:has(input[value="revoked"]:checked) .sfg-unit--toggle .sfg-unit__trash {
animation: sfg-stamp 300ms var(--ease-out) 300ms both;
}
/* Konfigurator-Feedback (§5.6): Summe blitzt, neue Zeile gleitet ein, Rabatt stempelt */
.sfg-configurator__total.is-flash { animation: sfg-flash-bg 300ms var(--ease-out); }
.sfg-configurator__line.is-new { animation: sfg-appear var(--dur-state) var(--ease-out); }
.sfg-configurator__discount:not([hidden]) .sfg-badge { animation: sfg-stamp 300ms var(--ease-out); }
[data-sum].is-changed { animation: sfg-appear var(--dur-state) var(--ease-out); }
/* Formular: Erfolgs-Häkchen zeichnet sich (500 ms) */
.sfg-form__success .sfg-icon {
--dash: 60;
stroke-dasharray: var(--dash);
animation: sfg-check 500ms var(--ease-out) both;
}
/* Sticky-CTA, Dropdown: siehe Transitions in style.css */
/* --------------------------------------------------------------------------
6. Reduced Motion (WCAG 2.2.2 / 2.3.3): alles aus, Endbilder stehen,
Pausen-Button verschwindet (nichts läuft), Legende wird sichtbar.
html.sfg-reduce spiegelt die Abfrage für JS-gesetzte Zustände.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
.sfg-scene__pause { display: none !important; }
.sfg-scene__legend {
position: static !important; width: auto !important; height: auto !important;
margin: var(--s-3) 0 0 !important; padding: 0 0 0 1.4em !important;
overflow: visible !important; clip: auto !important; clip-path: none !important;
white-space: normal !important;
}
.sfg-js .sfg-reveal,
.sfg-js .sfg-reveal[data-stagger] > * { opacity: 1; transform: none; }
.sfg-js .sfg-stepper .sfg-stepper__step::after,
.sfg-js .sfg-stepper--vertical .sfg-stepper__step::after { transform: none; }
.sfg-js .sfg-stepper--timeline .sfg-stepper__step { opacity: 1; }
.sfg-js .sfg-alert-example__trail li { opacity: 1; }
.sfg-js .sfg-stat__num[data-count]:not(.is-done) ~ .sfg-stat__source { opacity: 1; }
.sfg-ba-slider { --ba: 50%; }
/* Tafel: Endbild (alle Zeilen, Badges des letzten Zustands) */
.sfg-board [data-row] { opacity: 1; transform: none; }
.sfg-board [data-t] { opacity: 1; transform: none; }
.sfg-board [data-t^="0-"], .sfg-board [data-t="50-56"] { display: none; }
/* Strang: alle Fahnen offen, Lichtpunkt an der letzten Station */
.sfg-flow__flag { opacity: 1; }
.sfg-flow__station { transform: none; }
.sfg-flow__dot { transform: translateX(var(--track, 0px)); }
/* Häkchen und Strecken stehen gezeichnet */
.sfg-form__success .sfg-icon,
.sfg-alert-example .is-human .sfg-icon,
.sfg-unit__line { stroke-dasharray: none; stroke-dashoffset: 0; }
}
/* Dieselben Endbilder, wenn JS die Abfrage bereits gespiegelt hat (html.sfg-reduce) */
.sfg-reduce .sfg-reveal,
.sfg-reduce .sfg-reveal[data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
.sfg-reduce .sfg-scene__pause { display: none !important; }