/*
 * Die Release-Seite /downloads/.
 *
 * Dieselben Farben und Schriften wie die Startseite (start.css), aber
 * mit Klassen statt style-Attributen: Diese Seite kam nicht aus einem
 * Entwurf, sie ist von Hand gebaut.
 *
 * Bewegung: alles, was sich beim Scrollen bewegt, steuert downloads.js
 * ueber Klassen und CSS-Variablen. Bei "weniger Bewegung" (Windows:
 * Animationen aus) steht alles sofort und still da.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;1,8..60,300;1,8..60,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --tinte: #0d0f0b;
  --tinte-2: #171911;
  --papier: #ece6d6;
  --kupfer: #c9803f;
  --kupfer-hell: #e2a25b;
  --kupfer-dunkel: #8b5423;
  --leise: rgba(236, 230, 214, .62);
  --leiser: rgba(236, 230, 214, .32);
  --linie: rgba(236, 230, 214, .12);
  --rand: clamp(22px, 6vw, 76px);
  --serif: 'Source Serif 4', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --grain-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.89 0 0 0 0 0.84 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Platz fuer den festen Kopf, wenn ein Link auf #pet o. ae. springt. */
section[id] { scroll-margin-top: 58px; }
body {
  margin: 0; background: var(--tinte); color: var(--papier);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
code { font-family: var(--mono); font-size: .92em; background: rgba(201, 128, 63, .14); padding: 1px 5px; border-radius: 3px; }
:focus-visible { outline: 2px solid var(--kupfer); outline-offset: 3px; }

/* Zwei Sprachen stehen im Dokument, die andere ist ausgeblendet. */
html:not([lang="en"]) [data-en] { display: none !important; }
html[lang="en"] [data-de] { display: none !important; }

.korn {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  mix-blend-mode: overlay; opacity: .06; background-image: var(--grain-url); background-size: 200px 200px;
}

.hex {
  display: inline-block; width: 9px; height: 9px; background: currentColor; flex: none;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.augenbraue {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--kupfer);
}
.augenbraue.dunkel { color: var(--kupfer-dunkel); }
h1, h2, h3 { font-family: var(--serif); font-weight: 300; margin: 0; letter-spacing: -.02em; }
h1 em, h2 em { font-style: italic; color: var(--kupfer); font-weight: 400; }

/* --- Kopf ------------------------------------------------------------ */
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px var(--rand);
  background: rgba(13, 15, 11, .9); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--linie);
}
.marke { display: flex; align-items: center; gap: 10px; color: var(--papier); }
.marke .hex { width: 13px; height: 13px; color: var(--kupfer); }
.marke-name { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.marke-zusatz { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--leiser); }
.kopf-nav { display: flex; gap: 28px; }
.kopf-nav a { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--leise); transition: color .2s; }
.kopf-nav a:hover { color: var(--papier); }
.kopf-rechts { display: flex; align-items: center; gap: 12px; }
.sprache { display: flex; border: 1px solid var(--linie); border-radius: 999px; padding: 3px; }
.sprache button {
  border: 0; cursor: pointer; border-radius: 999px; padding: 6px 11px; background: transparent; color: var(--leise);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; transition: background .25s, color .25s;
}
html:not([lang="en"]) .sprache [data-sprache="de"], html[lang="en"] .sprache [data-sprache="en"] { background: var(--kupfer); color: var(--tinte); }
.kopf-laden {
  background: var(--kupfer); color: var(--tinte); border-radius: 999px; padding: 8px 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; transition: background .2s;
}
.kopf-laden:hover { background: var(--kupfer-hell); }

/* --- Knoepfe ----------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; gap: 12px; border-radius: 3px; padding: 17px 26px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.knopf:active { transform: scale(.98); }
.knopf-voll { background: var(--kupfer); color: var(--tinte); }
.knopf-voll:hover { background: var(--kupfer-hell); }
.knopf-rand { border: 1px solid var(--leiser); color: var(--papier); }
.knopf-rand:hover { border-color: var(--kupfer); color: var(--kupfer); }
.knopf-dunkel { background: var(--tinte); color: var(--papier); }
.knopf-dunkel:hover { background: var(--kupfer); color: var(--tinte); }
.knopf-gross { padding: 22px 34px; font-size: 13px; }
.knopf .win { width: 15px; height: 15px; fill: currentColor; }
.knopf-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--leiser); }
/* Datei gerade nicht da: Knopf bleibt sichtbar, fuehrt aber nirgends hin. */
.dl-aus { opacity: .38; pointer-events: none; filter: grayscale(1); }

/* --- Fenster (Rahmen um die App-Bilder) -------------------------------- */
.fenster {
  border-radius: 10px; overflow: hidden; background: var(--tinte-2);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(236, 230, 214, .1);
}
.fenster-leiste {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 30px; padding: 0 12px; background: #11130e; border-bottom: 1px solid var(--linie);
}
.fenster-titel { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--leiser); }
.fenster-knoepfe { display: flex; gap: 14px; margin-left: auto; }
.fenster-knoepfe i { width: 9px; height: 9px; border: 1px solid var(--leiser); display: block; }
.fenster-knoepfe i:first-child { border-width: 0 0 1px; height: 5px; }
.fenster-knoepfe i:last-child { border: 0; background: linear-gradient(45deg, transparent 45%, var(--leiser) 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--leiser) 45% 55%, transparent 55%); }
.fenster img { width: 100%; height: auto; }

/* --- Einblenden beim Scrollen ----------------------------------------- */
.js [data-zeige] { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--verz, 0s); }
.js [data-zeige].sichtbar { opacity: 1; transform: none; }

/* --- Hero ------------------------------------------------------------- */
.held { padding: 136px var(--rand) 0; text-align: center; position: relative; }
.held-text { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.held h1 { font-size: clamp(44px, 8.6vw, 128px); line-height: 1.02; letter-spacing: -.035em; padding-bottom: .08em; }
/* "MimicSMP-App." bricht nie in der Mitte um. */
.am-stueck { white-space: nowrap; }
.held-lede { margin: 0; max-width: 46ch; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--leise); }
.held-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.held-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--leiser); }
.held-buehne { position: relative; max-width: 1180px; margin: 56px auto 0; perspective: 1800px; }
.held-glut {
  position: absolute; left: 10%; right: 10%; top: 18%; bottom: -10%; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(201, 128, 63, .35), transparent 65%); filter: blur(40px);
}
.held-fenster {
  position: relative; z-index: 1; transform-origin: 50% 100%;
  /* --k: 0 = noch gekippt, 1 = aufgerichtet. Setzt downloads.js. */
  transform: rotateX(calc((1 - var(--k, 1)) * 24deg)) scale(calc(.88 + var(--k, 1) * .12));
  will-change: transform;
}

/* --- Satz, Wort fuer Wort --------------------------------------------- */
.satz { padding: 22vh var(--rand); max-width: 1180px; margin: 0 auto; }
.satz-text { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 5.2vw, 72px); line-height: 1.12; letter-spacing: -.02em; }
.satz-text .wort { color: rgba(236, 230, 214, .16); transition: color .35s ease; }
.satz-text .wort.an { color: var(--papier); }
.satz-text .wort.an.letzt { color: var(--kupfer); }

/* --- Abschnitts-Kopf ---------------------------------------------------- */
.abschnitt-kopf { max-width: 1180px; margin: 0 auto 60px; padding: 0 var(--rand); display: flex; flex-direction: column; gap: 20px; }
.abschnitt-kopf h2 { font-size: clamp(36px, 5vw, 70px); line-height: 1.02; max-width: 18ch; text-wrap: balance; }

/* --- Funktionen: Text scrollt, Bild bleibt stehen ---------------------- */
.funktionen { padding: 6vh 0 14vh; }
.rolle { max-width: 1280px; margin: 0 auto; padding: 0 var(--rand); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(30px, 5vw, 80px); }
.schritt { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; gap: 16px; opacity: .28; transition: opacity .5s ease; }
.schritt.aktiv { opacity: 1; }
.schritt-num { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--kupfer); }
.schritt h3 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.05; }
.schritt p { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--leise); max-width: 40ch; }
.schritt-bild { display: none; }
.rolle-buehne { position: sticky; top: calc(50vh - min(28vw, 330px) - 20px); align-self: start; height: max-content; padding-top: 10vh; }
.rolle-bilder { position: relative; aspect-ratio: 14 / 9; }
.rolle-bilder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity .7s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.rolle-bilder img.aktiv { opacity: 1; transform: none; }
.rolle-punkte { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.rolle-punkte i { width: 28px; height: 2px; background: var(--linie); transition: background .4s; }
.rolle-punkte i.aktiv { background: var(--kupfer); }

/* --- Und ausserdem (hell) ---------------------------------------------- */
.mehr { background: var(--papier); color: var(--tinte); padding: 14vh 0; }
.mehr h2 { color: var(--tinte); }
/* Feste Spalten statt auto-fit: Sechs Kacheln gehen in 3 und 2 auf, bei
   auto-fit entstanden bei manchen Breiten 4 + 2 mit einem Loch. Breite
   wie der Abschnitts-Kopf darueber, damit beide buendig stehen. */
.kacheln { width: calc(100% - 2 * var(--rand)); max-width: calc(1180px - 2 * var(--rand)); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(13, 15, 11, .14); border: 1px solid rgba(13, 15, 11, .14); }
.kachel { background: var(--papier); padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; transition: background .3s; }
.kachel:hover { background: #e4dcc8; }
.kachel-num { color: var(--kupfer-dunkel); font-size: 14px; }
.kachel h3 { font-size: 24px; line-height: 1.15; color: var(--tinte); }
.kachel p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(13, 15, 11, .66); }

/* --- Download-Band ----------------------------------------------------- */
.band { padding: 18vh var(--rand); text-align: center; position: relative; overflow: hidden; }
.band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(201, 128, 63, .16), transparent 60%); }
.band-innen { position: relative; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 44px; }
.band h2 { font-size: clamp(42px, 7vw, 100px); line-height: 1; }
.daten { width: 100%; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--linie); }
.daten div { padding: 20px 10px 0; display: flex; flex-direction: column; gap: 8px; }
.daten dt { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--leiser); }
.daten dd { margin: 0; font-family: var(--serif); font-size: clamp(17px, 1.5vw, 21px); color: var(--papier); white-space: nowrap; }

/* --- Pet --------------------------------------------------------------- */
.pet { padding: 16vh var(--rand); background: radial-gradient(ellipse at 25% 55%, rgba(201, 128, 63, .14), transparent 55%), var(--tinte); border-top: 1px solid var(--linie); }
.pet-innen { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.pet-buehne { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; margin: 0 auto; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14%; }
.pet-figur {
  width: 52%; height: auto; image-rendering: pixelated; cursor: pointer; position: relative; z-index: 2;
  /* --h: Hoehe des Sprungs, --s: Stauchung beim Landen. downloads.js. */
  transform: translateY(calc(var(--h, 0) * -1%)) scale(calc(1 + var(--s, 0)), calc(1 - var(--s, 0)));
  transform-origin: 50% 100%;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .5));
}
.pet-boden { position: absolute; left: 22%; right: 22%; bottom: 12%; height: 14px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%); }
.pet-blase {
  position: absolute; top: 6%; left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap;
  background: var(--papier); color: var(--tinte); padding: 10px 14px; border-radius: 4px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
  animation: blase .25s ease;
}
.pet-blase::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: var(--papier); transform: translateX(-50%) rotate(45deg); }
@keyframes blase { from { opacity: 0; transform: translate(-50%, 6px); } }
.pet-tipp { position: absolute; bottom: 2%; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--leiser); }
.pet-text { display: flex; flex-direction: column; gap: 22px; }
.pet-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.schild { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; background: var(--papier); color: var(--tinte); }
.schild-warn { background: transparent; color: var(--kupfer); box-shadow: inset 0 0 0 1px var(--kupfer); }
.pet h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; }
.pet-lede { margin: 0; font-size: 17px; line-height: 1.65; color: var(--leise); max-width: 46ch; }
.pet-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--linie); }
.pet-liste li { padding: 13px 0 13px 26px; border-bottom: 1px solid var(--linie); font-size: 15px; color: var(--leise); position: relative; }
.pet-liste li::before { content: ''; position: absolute; left: 2px; top: 19px; width: 7px; height: 7px; background: var(--kupfer); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.pet-knopf, .pack-knopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

/* --- Pack (hell) --------------------------------------------------------- */
.pack { background: var(--papier); color: var(--tinte); padding: 16vh var(--rand); overflow: hidden; }
.pack-innen { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.pack-text { display: flex; flex-direction: column; gap: 22px; }
.pack h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; color: var(--tinte); }
.pack p { margin: 0; font-size: 16.5px; line-height: 1.65; color: rgba(13, 15, 11, .68); max-width: 46ch; }
.pack .knopf-meta { color: rgba(13, 15, 11, .5); }
.pack-hinweis { font-size: 14px !important; }
.pack-bild { border-radius: 10px; overflow: hidden; background: var(--tinte); box-shadow: 0 50px 90px -40px rgba(13, 15, 11, .6); transform: translateY(calc(var(--y, 0) * 1px)); }
.pack-bild img { width: 100%; height: auto; image-rendering: pixelated; }

/* --- Installieren -------------------------------------------------------- */
.install { padding: 16vh 0 12vh; }
.install-schritte { list-style: none; margin: 0 auto; padding: 0 var(--rand); max-width: 1180px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.install-schritte li { background: var(--tinte-2); border: 1px solid var(--linie); border-radius: 6px; padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.install-num { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; color: var(--tinte); background: var(--kupfer); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.install-schritte h3 { font-size: 27px; }
.install-schritte p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--leise); }
.smartscreen { margin-top: 6px; background: #1c5ba6; color: #fff; border-radius: 3px; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 10px; font-family: 'Segoe UI', Inter, sans-serif; font-size: 13px; }
.smartscreen b { font-weight: 600; font-size: 15px; line-height: 1.25; }
.smartscreen u { text-underline-offset: 3px; opacity: .9; }
.smartscreen-knopf { align-self: flex-end; border: 1px solid rgba(255, 255, 255, .8); padding: 6px 16px; font-size: 12px; animation: puls 2.4s ease-in-out infinite; }
@keyframes puls { 50% { background: rgba(255, 255, 255, .18); } }
.install-warum { max-width: 1180px; margin: 30px auto 0; padding: 0 var(--rand); font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; line-height: 1.8; color: var(--leiser); }

/* --- Team (unauffaellig) --------------------------------------------------- */
.team { padding: 0 var(--rand) 12vh; }
.team-zeile { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 30px; align-items: center; padding: 22px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.team .augenbraue { color: var(--leiser); }
.team-text { font-size: 14px; color: var(--leiser); }
.team-knopf { display: flex; align-items: center; gap: 14px; }
.team-knopf a { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); border-bottom: 1px solid var(--leiser); padding-bottom: 3px; transition: color .2s; }
.team-knopf a:hover { color: var(--kupfer); }

/* --- Fuss ------------------------------------------------------------------ */
.fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 40px var(--rand) 50px; border-top: 1px solid var(--linie); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 24px; }
.fuss nav a, .fuss-notiz { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--leiser); }
.fuss nav a:hover { color: var(--papier); }

/* --- Schmal --------------------------------------------------------------- */
@media (max-width: 960px) {
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kopf-nav { display: none; }
  .rolle { grid-template-columns: minmax(0, 1fr); }
  .rolle-buehne { display: none; }
  .schritt { min-height: 0; opacity: 1; padding: 0 0 70px; }
  .schritt-bild { display: block; margin-top: 10px; }
  .pet-innen, .pack-innen { grid-template-columns: minmax(0, 1fr); }
  .pet-buehne { max-width: 320px; }
  .install-schritte { grid-template-columns: minmax(0, 1fr); }
  .daten { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
  .team-zeile { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .kacheln { grid-template-columns: minmax(0, 1fr); }
  .kopf { padding: 12px 16px; gap: 10px; }
  .marke-zusatz { display: none; }
  .held { padding-top: 120px; }
  .held-knoepfe .knopf { width: 100%; justify-content: center; }
  .held-buehne { margin-top: 48px; }
  .satz { padding: 14vh 20px; }
  .daten { grid-template-columns: repeat(2, 1fr); }
  .knopf-gross { width: 100%; justify-content: center; padding: 20px; }
}

/* --- Weniger Bewegung ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-zeige] { opacity: 1; transform: none; transition: none; }
  .held-fenster { transform: none; }
  .satz-text .wort { color: var(--papier); transition: none; }
  .rolle-bilder img { transition: none; }
  .smartscreen-knopf { animation: none; }
  .pack-bild { transform: none; }
}