/* ============================================================
GALERIE / SWISS — Design-Layer der Website
Basis: design/styles/B-galerie-swiss (Birgits Wahl, 2026-06-10)
Palette: paper #FAFAF8 · ink #0E0E0C · line #DEDED9 · rouge #A64D35 (Terrakotta) · mute #6B6B63
Stand: 2026-10-09 — Akzent Terrakotta wie der Logo-Rahmen, überall über
var(--rouge); seit 2026-07-28 mit Fotocredits, Video-Fassade,
Vorher-Nachher-Duo, Projekt-Meta; seit 2026-10-21 Projektfotos in
gleich großen 4:3-Zellen und ohne Partner-Signets (Birgits Korrekturen vom 14.10.).
============================================================ */
/* ---- Schrift lokal (offline-fest, kein Google-Fonts-Aufruf) ---- */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("../assets/fonts/inter-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root { --line: #DEDED9; --rouge: #A64D35; }
html { scroll-behavior: smooth; }
body {
background: #FAFAF8;
color: #0E0E0C;
font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ---- Typografische Disziplin ---- */
.display { letter-spacing: -0.02em; line-height: 0.98; font-weight: 500; }
.tight { letter-spacing: -0.02em; }
/* Zitate in .display: swiss.css liegt außerhalb der Tailwind-Ebenen und schlug deren
leading-[…] — bei 0.98 saß das „ der zweiten Zeile auf der ersten (Prüfung 22.10.2026).
Nur die Zeilenhöhe wird nachgezogen, die Schriftstärke bleibt wie gewohnt. */
.display.leading-\[1\.12\] { line-height: 1.12; }
.display.leading-\[1\.15\] { line-height: 1.15; }
/* Trennpunkte „·“ in umbrechenden Listen: swiss.js blendet jeden aus, der an einem
Zeilenumbruch stünde (Prüfung 22.10.2026: am Zeilenende/-anfang, bei jeder Breite) */
.text-line.am-umbruch { display: none; }
/* Sprungziele (#presse, #objekt, #datenschutz …) nicht unter dem festen Kopf verstecken */
html { scroll-padding-top: 5.5rem; }
.label { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; font-weight: 500; }
.label-sm { text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem; font-weight: 600; }
.idx { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.body-lg { font-size: 1.125rem; line-height: 1.6; } /* 18px — Lesbarkeit 50+ */
/* ---- Feine Rasterlinien ---- */
.rule-t { border-top: 1px solid var(--line); }
.rule-b { border-bottom: 1px solid var(--line); }
.rule-l { border-left: 1px solid var(--line); }
.rule-r { border-right: 1px solid var(--line); }
/* Die rule-*-Klassen kennt Tailwind nicht, deshalb erzeugte es md:rule-b-0 nie: Die mobile
Trennlinie unter den Schritt-Rastern blieb am Desktop als „Leerlauf“-Linie stehen
(Birgit, 13./14.10.2026: „Entfernen!“). md:rule-r bleibt bewusst ohne Regel —
senkrechte Linien hat Birgit dort nie gesehen. */
@media (min-width: 48rem) { .md\:rule-b-0 { border-bottom: 0; } }
/* A/B/C-Raster der Ferienwohnungsseite stehen erst ab 1024 px nebeneinander — auf dem iPad
waren die Spalten 150 px schmal, „Kaffeemaschine:“ ragte hinaus (Prüfung 22.10.2026) */
@media (min-width: 64rem) { .lg\:rule-b-0 { border-bottom: 0; } }
/* ---- Plates (Bildflächen) ---- */
.plate { position: relative; overflow: hidden; background-color: #ECEBE4; isolation: isolate; }
.plate::after {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.045; mix-blend-mode: multiply; pointer-events: none; z-index: 2;
}
.plate-cap {
position: absolute; left: 0; bottom: 0; z-index: 3;
padding: 0.75rem 1rem;
background: rgba(250,250,248,0.92);
backdrop-filter: blur(2px);
border-top: 1px solid var(--line);
border-right: 1px solid var(--line);
}
/* Beim Schieberegler gehört die Nachher-Beschriftung nach rechts —
links läge sie über der Vorher-Hälfte. */
.plate-cap-rechts {
left: auto; right: 0;
border-right: 0; border-left: 1px solid var(--line);
}
.plate-photo { background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #ECEBE4; }
.plate-photo::after { content: none; }
/* Fotos sind echte ![]()
(Google-Bildersuche, alt-Text, lazy loading) und
füllen ihre Fläche wie ein Hintergrundbild.
top/right/bottom/left statt der Kurzform inset: ältere Safaris (vor 14.1)
kennen inset nicht. */
.plate-bild {
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
}
/* Dieselbe Alterssicherung für die Tailwind-Kurzform (Regler-Ebenen u. a.) */
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.plate:has(> .plate-bild)::after { content: none; }
/* Bildausschnitt gezielt verschieben, wenn die Motivmitte nicht die Bildmitte ist */
.pos-top > .plate-bild { object-position: center top; }
.pos-bottom > .plate-bild { object-position: center bottom; }
.pos-left > .plate-bild { object-position: left center; }
.pos-right > .plate-bild { object-position: right center; }
/* Ganzes Bild zeigen statt beschneiden — für Skizzen, Grundrisse, Heftseiten */
.plate-fit { background-color: #F4F3EE; }
.plate-fit > .plate-bild { object-fit: contain; }
/* ---- Fotonachweis ----
Birgit (01.09.2026): „kleiner, seitlich hochkant, nicht schwarz“. Der Credit
steht deshalb um 90° gedreht am rechten Rand der Bildfläche, außerhalb des
Fotos auf dem Papierton, und liest sich von unten nach oben — wie in den
Wohnzeitschriften. Der Bezugsrahmen ist .bildrahmen (position: relative). */
.bildrahmen { position: relative; }
.credit {
position: absolute; right: -1.15rem; bottom: 0; z-index: 3;
margin: 0;
writing-mode: vertical-rl;
-webkit-transform: rotate(180deg); transform: rotate(180deg);
text-transform: uppercase; letter-spacing: 0.08em;
font-size: 0.4rem; font-weight: 500; line-height: 1;
color: #6B6B63; white-space: nowrap;
}
/* Birgit (26.10.2026): „alle Foto credits noch kleiner“, am Handy wirke der Name „sehr groß“.
Mobil 6,4 px mit engerer Laufweite (vorher 8 px), ab Tablet 7 px (vorher 8 px, davor 9,3 px).
Kleiner nicht: Der Urhebervermerk muss lesbar bleiben. */
@media (min-width: 48rem) { .credit { font-size: 0.44rem; letter-spacing: 0.1em; } }
/* Fällt der Credit in einer engen Spalte aus dem Layout, bleibt er lesbar:
.credit-innen legt ihn auf den Bildrand statt daneben. */
.credit-innen { right: 0.35rem; color: rgba(250,250,248,0.85); text-shadow: 0 0 4px rgba(14,14,12,0.6); }
/* ---- Reveal ---- */
.reveal {
opacity: 0; transform: translateY(26px);
transition: transform 0.62s cubic-bezier(0.16,1,0.3,1), opacity 0.5s ease;
will-change: transform, opacity;
}
.reveal.in { opacity: 1; transform: translateY(0); }
.fade { opacity: 0; transition: opacity 0.5s ease; }
.fade.in { opacity: 1; }
/* ---- Links & Buttons ---- */
.ulink { position: relative; }
.ulink::after {
content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
background: currentColor; transform: scaleX(0); transform-origin: left;
transition: transform 0.32s cubic-bezier(0.16,1,0.3,1);
}
.ulink:hover::after { transform: scaleX(1); }
.btn-fill { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
/* Sichtbarer Fokus für Tastatur-Bedienung (ganze Seite) */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--rouge);
outline-offset: 3px;
}
/* ---- Vorher/Nachher-Schieberegler ---- */
.ba-clip { -webkit-clip-path: inset(0 50% 0 0); clip-path: inset(0 50% 0 0); }
/* Senkrecht wischen scrollt die Seite, quer ziehen bewegt den Regler (swiss.js) */
[data-ba] { touch-action: pan-y pinch-zoom; }
[data-ba-handle] { touch-action: none; }
/* Die obere Ebene (Vorher) liegt über der Marke „Nachher“ der unteren Ebene —
sonst stand NACHHER auf dem Vorher-Foto, sobald man den Regler nach rechts schob */
[data-ba-top] { z-index: 4; }
/* ---- Vorher/Nachher als Doppelbild (wenn der Winkel nicht passt) ---- */
.duo { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); }
@media (min-width: 768px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo-tag {
position: absolute; left: 0; top: 0; z-index: 3;
padding: 0.4rem 0.7rem;
background: #0E0E0C; color: #FAFAF8;
text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.68rem; font-weight: 600;
}
.duo-tag.is-nachher { background: var(--rouge); }
.duo-tag.rechts { left: auto; right: 0; }
/* ---- Video-Fassade (Klick lädt erst dann YouTube) ---- */
.vid {
position: relative; display: block; width: 100%;
aspect-ratio: 16 / 9; overflow: hidden;
border: 1px solid var(--line); background: #ECEBE4 center/cover no-repeat;
cursor: pointer;
}
.vid::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(14,14,12,0) 40%, rgba(14,14,12,0.55) 100%);
transition: background 0.3s ease;
}
.vid:hover::before { background: linear-gradient(180deg, rgba(14,14,12,0.1) 30%, rgba(14,14,12,0.65) 100%); }
.vid-play {
position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
width: 4.25rem; height: 4.25rem; border-radius: 999px;
background: rgba(250,250,248,0.94); border: 1px solid #0E0E0C;
display: flex; align-items: center; justify-content: center;
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), background-color 0.3s ease;
}
.vid:hover .vid-play { transform: translate(-50%,-50%) scale(1.08); background: var(--rouge); border-color: var(--rouge); }
.vid-play svg { width: 1.1rem; height: 1.3rem; fill: #0E0E0C; margin-left: 0.18rem; transition: fill 0.3s ease; }
.vid:hover .vid-play svg { fill: #FAFAF8; }
/* Auf hellen Vorschaubildern (weiße Bluse, Karton) war der Hinweis nicht
sicher lesbar — deshalb eine halbtransparente Tinte, nur so breit wie der Text. */
.vid-note {
position: absolute; left: 0.5rem; bottom: 0.5rem; z-index: 2;
max-width: calc(100% - 1rem);
padding: 0.25rem 0.5rem;
background: rgba(14,14,12,0.75);
color: #FAFAF8; text-transform: uppercase; letter-spacing: 0.16em;
font-size: 0.68rem; font-weight: 600;
}
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ---- Logo im Kopf ---- */
.marke img { display: block; height: 46px; width: auto; }
@media (min-width: 768px) { .marke img { height: 60px; } } /* 60 px: Zeile „Innenarchitektur“ bleibt auf 1x-Bildschirmen lesbar */
/* ---- Vorher/Nachher-Beschriftung unter dem Regler ---- */
.ba-legende { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.9rem; }
.ba-legende p { font-size: 0.95rem; line-height: 1.45; color: #6B6B63; }
.ba-legende p b { font-weight: 600; color: #0E0E0C; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; margin-right: 0.35rem; }
.ba-legende p:last-child { text-align: right; }
/* ---- Projektseite: „Die Aufgabe“ | „Meine Lösung“ ----
Die rechte Spalte beginnt bündig mit der rechten Fotospalte (Zellen-Abstand 2rem),
so stehen die Texte unter den Fotos wie in Birgits Entwürfen 14 und 18. */
.kurz { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); }
@media (min-width: 768px) { .kurz { grid-template-columns: 1fr 1fr; } }
.kurz > div { background: #FAFAF8; padding: 1.6rem 0 1.9rem; }
@media (min-width: 768px) { .kurz > div { padding: 2rem 2rem 2.4rem 0; } .kurz > div:nth-child(even) { padding-left: 1rem; padding-right: 0; } }
.kurz h2 { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.75rem; font-weight: 600; color: var(--rouge); }
.kurz p { font-size: 1.125rem; line-height: 1.6; color: #3A3A35; margin-top: 0.9rem; max-width: 46ch; }
/* ---- Projektfotos in gleich großen Zellen ----
Birgit (14.10.2026): „Bitte auf ähnliche Größen achten! Sonst etwas beschneiden! Es soll
alles so ruhig wie möglich aussehen!“ Jede Zelle ist ein 4:3-Rahmen, so sind alle Reihen
gleich hoch. Querformat füllt die Zelle (mittig beschnitten), ein Hochformat steht 3:4
in voller Höhe linksbündig, zwei Hochformate teilen sich die Zelle. Der Abstand von 2rem
lässt Platz für den hochkant gestellten Credit (.credit, right: -1.15rem). */
.zellen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 48rem) { .zellen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zellen-einzeln { grid-template-columns: minmax(0, 1fr) !important; } /* Auftaktfoto der Galerieseite */
.zelle { position: relative; aspect-ratio: 4 / 3; margin: 0; }
.zelle-innen {
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
display: flex; align-items: stretch;
}
.zelle-innen > .bildrahmen { height: 100%; }
.zelle-innen .plate { width: 100%; height: 100%; }
.zelle-voll { width: 100%; }
.zelle-hoch { width: 56.25%; } /* 3:4 bei voller Höhe einer 4:3-Zelle: 0,75 × 0,75 */
.zelle-halb { flex: 1 1 0; min-width: 0; }
.zelle-halb + .zelle-halb { margin-left: 2rem; } /* margin statt gap: ältere Safaris */
/* Doppelbild hochkant (Essplatz, Kollage 03): zwei 3:4-Rahmen, je linksbündig in ihrer
Hälfte — bündig mit „Die Aufgabe“ / „Meine Lösung“ und der Galerie darunter wie in
Birgits Entwurf — und nicht breiter als 30rem, sonst würden sie höher als der Bildschirm. */
.zellen-hochkant > .zelle { aspect-ratio: 3 / 4; width: 100%; max-width: 30rem; margin: 0; }
/* Doppelbild mit Unterschrift je Foto (Loft, Kollage 17): Text linksbündig unter seinem Bild */
.ba-zeile { font-size: 0.95rem; line-height: 1.45; color: #6B6B63; margin-top: 0.9rem; }
.ba-zeile b { font-weight: 600; color: #0E0E0C; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; margin-right: 0.35rem; }
@supports not (aspect-ratio: 1 / 1) {
.zelle::before { content: ""; display: block; padding-top: 75%; }
.zellen-hochkant > .zelle::before { padding-top: 133.333%; }
}
/* ---- Heft-Abbildungen (Veröffentlichungen) ---- */
.heft { display: block; }
.heft .plate { background: #F4F3EE; }
.heft img { object-fit: contain; }
.hefte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
@media (min-width: 640px) { .hefte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hefte { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1.25rem; } }
.hefte figcaption { font-size: 0.72rem; line-height: 1.4; color: #6B6B63; margin-top: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; }
.hefte figcaption b { display: block; color: #0E0E0C; font-weight: 600; }
/* ---- Projekt-Kenndaten ---- */
.meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); }
@media (min-width: 768px) { .meta-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.meta-grid > div { background: #FAFAF8; padding: 1.15rem 1.25rem; }
.meta-grid dt { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 600; color: var(--rouge); }
.meta-grid dd { font-size: 1.05rem; letter-spacing: -0.01em; margin-top: 0.45rem; }
/* ---- Mobile Menü ---- */
#mobileMenu { transition: opacity 0.3s ease; }
/* ---- Artikel-Typografie (Magazin) ---- */
.prose-swiss { max-width: 68ch; }
.prose-swiss > p { font-size: 1.125rem; line-height: 1.7; color: #3A3A35; margin-top: 1.4rem; }
.prose-swiss > p.lead { font-size: 1.3rem; line-height: 1.55; color: #0E0E0C; }
.prose-swiss h2 {
font-size: 1.7rem; letter-spacing: -0.02em; font-weight: 500; line-height: 1.15;
margin-top: 3.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.prose-swiss h3 { font-size: 1.25rem; letter-spacing: -0.01em; font-weight: 600; margin-top: 2.2rem; }
.prose-swiss ul:not(.check-list) { margin-top: 1.2rem; padding-left: 1.1rem; }
.prose-swiss ul:not(.check-list) li { font-size: 1.1rem; line-height: 1.65; color: #3A3A35; margin-top: 0.5rem; list-style: none; position: relative; }
.prose-swiss ul:not(.check-list) li::before { content: "—"; position: absolute; left: -1.1rem; color: var(--rouge); }
.prose-swiss blockquote { border-left: 2px solid var(--rouge); padding-left: 1.4rem; margin-top: 2rem; font-size: 1.25rem; line-height: 1.5; color: #0E0E0C; }
/* ---- Magazin-Bildstrecke (Kopenhagen, Birgit 26.10.2026) ----
Text neben den Auftaktfotos und am Schluss; der Wohntipp als Kasten mit Terrakotta-Linie,
wie in Birgits Kollage (dieselbe Linie wie beim Zitat im Artikel). */
.mag-text { font-size: 1.125rem; line-height: 1.7; color: #3A3A35; max-width: 46ch; }
.mag-text.gross { font-size: 1.3rem; line-height: 1.55; color: #0E0E0C; }
.tipp { border-left: 2px solid var(--rouge); background: #F4F3EE; padding: 1.5rem 1.4rem 1.7rem; max-width: 52rem; }
@media (min-width: 48rem) { .tipp { padding: 2rem 2.25rem 2.2rem; } }
.tipp .mag-text { max-width: 62ch; }
/* ---- Checkliste ---- */
.check-list { margin-top: 1.4rem; }
.check-list li {
position: relative; padding: 0.85rem 0 0.85rem 2.4rem;
border-bottom: 1px solid var(--line);
font-size: 1.08rem; line-height: 1.5; color: #1F1F1C;
}
.check-list li::before {
content: ""; position: absolute; left: 0; top: 1.05rem;
width: 1.05rem; height: 1.05rem;
border: 1px solid #0E0E0C; background: #FAFAF8;
}
.check-list li.done::before { background: var(--rouge); border-color: var(--rouge); }
.check-list li.done::after {
content: "✓"; position: absolute; left: 0.22rem; top: 0.92rem;
color: #FAFAF8; font-size: 0.78rem; font-weight: 700;
}
/* ---- Formular ---- */
.field { display: block; width: 100%; }
.field input, .field textarea, .field select {
display: block; width: 100%;
background: #FAFAF8; color: #0E0E0C;
border: 1px solid var(--line);
padding: 0.95rem 1rem;
font-size: 1.05rem; line-height: 1.4;
border-radius: 0;
-webkit-appearance: none; appearance: none;
transition: border-color 0.25s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
outline: none; border-color: #0E0E0C;
}
.field select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 1rem center;
padding-right: 2.6rem;
}
/* ---- FAQ (details/summary) ---- */
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
cursor: pointer; list-style: none;
display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
padding: 1.4rem 0;
font-size: 1.2rem; letter-spacing: -0.01em; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .faq-x { color: var(--rouge); font-weight: 400; transition: transform 0.3s ease; flex: none; }
.faq[open] summary .faq-x { transform: rotate(45deg); }
.faq .faq-body { padding: 0 0 1.6rem; max-width: 62ch; font-size: 1.08rem; line-height: 1.65; color: #3A3A35; }
/* ---- Ältere Browser (Safari vor 15): aspect-ratio unbekannt ----
Ohne diese Stütze fallen alle Bildflächen auf Höhe 0 zusammen und die
Seite wirkt „ohne Fotos“. Die Höhe kommt dann aus einem Innenabstand.
Alle Bildflächen haben ausschließlich absolut positionierte Kinder,
deshalb trägt das ::before-Element die Höhe allein. */
@supports not (aspect-ratio: 1 / 1) {
.aspect-\[4\/3\]::before { content: ""; display: block; padding-top: 75%; }
.aspect-\[3\/4\]::before { content: ""; display: block; padding-top: 133.333%; }
.aspect-\[4\/5\]::before { content: ""; display: block; padding-top: 125%; }
.aspect-\[16\/9\]::before { content: ""; display: block; padding-top: 56.25%; }
.aspect-\[16\/10\]::before { content: ""; display: block; padding-top: 62.5%; }
.aspect-\[21\/9\]::before { content: ""; display: block; padding-top: 42.857%; }
@media (min-width: 48rem) {
.md\:aspect-\[16\/9\]::before { padding-top: 56.25%; }
.md\:aspect-\[16\/10\]::before { padding-top: 62.5%; }
.md\:aspect-\[21\/9\]::before { padding-top: 42.857%; }
}
/* Video-Fassade: der Farbverlauf im ::before weicht der Höhenstütze */
.vid::before {
position: static; display: block; padding-top: 56.25%;
background: none;
}
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal, .fade { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
.ulink::after, .btn-fill, .faq summary .faq-x, .vid, .vid-play { transition: none !important; }
}
@media print {
header, footer, #mobileMenu, .vid-play { display: none !important; }
.reveal, .fade { opacity: 1 !important; transform: none !important; }
body { background: #fff; }
}